पारंपरिक अग्रणी और सीएसएस लाइन-ऊंचाई

सीएसएस विनिर्देश बताता है कि निर्दिष्ट मूल्य को दो से विभाजित करके टेक्स्ट की ऊंचाई को टेक्स्ट पर लागू किया जाना चाहिए और पाठ की रेखा के ऊपर और नीचे परिणाम लागू करना चाहिए।पारंपरिक अग्रणी और सीएसएस लाइन-ऊंचाई

यह अग्रणी की पारंपरिक समझ से काफी भिन्न होता है, जिसका आमतौर पर मतलब है कि अंतर केवल पाठ की रेखा से ऊपर 'जोड़ा' है। (मुझे पता है कि यह 100% सही नहीं है, क्योंकि वास्तव में रेखा-ऊंचाई अंतरिक्ष नहीं जोड़ती है, लेकिन रेखा की ऊंचाई निर्धारित करती है, हालांकि, इस तरह समस्या का वर्णन करना आसान है)।

इस उदाहरण मार्कअप पर विचार करें:

<!DOCTYPE html> 
<html> 
    <head> 

    <style type="text/css"> 
    p 
     { 
     margin:0; 
     font-size: 13pt; 
     line-height: 15pt; 
     } 
    h1 
     { 
     margin:0; 
     font-size: 21pt; 
     line-height: 30pt; 
     } 
    </style> 

    </head> 
    <body> 

    <h1>Title</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
    <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> 
    <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> 
    </body> 
</html>

तो line-height अग्रणी है, तो <h1> और पहली <p> के बीच की दूरी के पारंपरिक समझ के बराबर था <p> के बीच की दूरी के बराबर होगा, क्योंकि इस दूरी अग्रणी द्वारा परिभाषित किया गया है। बहरहाल, मामला यह नहीं।

<p> रों के बीच की दूरी लगातार रहता है (p's line-height - p's font-size = 15 - 13 = 2pt), दूरी <h1> और पहली <p> के बीच अलग है: यह (p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt के बराबर है।

यदि ऊपर दिए गए मार्कअप को ब्राउज़र के साथ संसाधित किया जाता है तो इसे आसानी से नग्न आंखों द्वारा देखा जा सकता है।

समस्या यह है कि किसी पृष्ठ पर लंबवत दृश्य ताल को बनाए रखने का पारंपरिक तरीका बेस अग्रणी के गुणकों में तत्वों की अग्रणीता स्थापित करना है। जैसा कि ऊपर दिखाया गया है, यह विधि सीएसएस में लागू नहीं है।

मैं 3 प्रश्न हैं: प्रमुख और अपने मतभेदों को सही

line-height की मेरी समझ है?
क्या सीएसएस के साथ लंबवत लय बनाए रखने का कोई तरीका है (सीएसएस के साथ पारंपरिक अग्रणी नकल करके)?
(बोनस प्रश्न) लाइन-ऊंचाई को अग्रणी से अलग करने के पीछे क्या तर्क था?

अद्यतन: आपके इनपुट के लिए बहुत बहुत धन्यवाद! कृपया ध्यान दें कि मैं अपने खुद के समाधान का सुझाव दिया और मैं इस पर कोई टिप्पणी के लिए बहुत आभारी होगा: https://stackoverflow.com/a/8335230/710356

स्रोत

2011-12-01 sbichenko

ठीक है, यह मेरे अन्य समाधान की तुलना में बेहतर काम करने के लिए लगता है। यह अभी भी ब्लॉक तत्वों के अंदर अतिरिक्त <span> एस कार्यरत है। यह चाल ब्लॉक तत्व के line-height से 1 पर सेट करना है, और स्पैन के line-height को समायोजित करना है, जबकि इसे ऊपर और नीचे margin एस के साथ रद्द करना भी है। ध्यान दें कि इसके लिए प्रदर्शन को inline-block पर सेट करने की आवश्यकता है।

हालांकि, वास्तव में मार्जिन सेट करना (ताकि <h1> और <p> के बीच एक लाइन-उच्च ब्रेक बनाने के लिए) काफी कठिन हो और कुछ गणित की आवश्यकता हो। इसलिए, मुझे लगता है कि अग्रणी टाइपोग्राफ़िक दृष्टिकोण का उपयोग करने की कोशिश करना सीएसएस में वास्तव में डेवलपर के काम में नियोजित होने के लिए बहुत समय ले रहा है।

वैसे भी, यहाँ अंतिम कोड है:

<!DOCTYPE html> 
<html> 
    <head> 

     <style type="text/css"> 

     span.p 
      { 
      display:inline-block; 
      line-height: 32px; 
      } 

     span.h 
      { 
      display:inline-block; 
      line-height: 64px; 
      margin-top: -32px; 
      margin-bottom: -32px; 
      } 

     p 
      { 
      margin:0; 
      font-size: 26px; 
      line-height: 1; 
      } 
     h1 
      { 
      margin:0; 
      font-size: 42px; 
      line-height: 1; 
      } 
     </style> 

    </head> 
    <body> 

    <h1><span class="h">Molloy</span></h1> 
    <p><span class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p> 
    <p><span class="p">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p> 
    <h1><span class="h">Lorem Ipsum is simply</span></h1> 
    </body> 
</html>

स्रोत

2011-12-01 12:10:30 sbichenko

हाँ
हां। यह न बहुत सरल है, लेकिन position:relative; उपयोग कर, आप सही ढंग से पंक्तिबद्ध करने के लिए, उदाहरण के लिए चीजों को प्राप्त कर सकते हैं:
```
h2 { 
    font-size: 36px; 
    line-height: 48px; 
    position: relative; 
    top: 6px; 
} 
```
यहाँ है एक काम में प्रगति demo
लोग हैं, जो सीएसएस डिज़ाइन नहीं कर रहे हैं टाइपोग्राफरों। यह शायद जानबूझकर नहीं था।
बोनस उत्तर: Here is a talk जोनाथन होफ्लर द्वारा वेब के लिए डिजाइन प्रकार और सीएसएस की सीमाओं के साथ समस्याओं के बारे में।

स्रोत

2011-12-01 00:16:42 bookcasey

धन्यवाद! हालांकि, ऐसा लगता है कि आपके द्वारा लिंक किया गया डेमो एक खाली gif फ़ाइल है। इसके अलावा, मुझे आपके कोड में कोई नकारात्मक मान नहीं दिख रहा है। – sbichenko

क्षमा करें, मैंने लिंक तय किया और याद किया कि मैंने नकारात्मक मानों का उपयोग नहीं किया है। :-) – bookcasey

आपको वास्तव में लंबवत लय बनाए रखने के लिए स्थिति का उपयोग करने की आवश्यकता नहीं है। यह लगातार लाइन-ऊंचाई (फ़ॉन्ट आकार के सापेक्ष) और नीचे मार्जिन सुनिश्चित करके किया जा सकता है। – joshnh

मैं अपना खुद का जवाब जोड़ रहा हूं, लेकिन मैं इसे 'स्वीकृत' के रूप में चिह्नित नहीं कर रहा हूं, क्योंकि मैं अभी इस विधि के साथ आया हूं और वास्तव में इसे पर्याप्त रूप से पर्याप्त रूप से चेक नहीं किया है। मार्कअप पठनीयता के मामले में यह भी काफी गन्दा है।

चाल लपेट हर तत्व है जो हम <span> टैग में हमारे शीर्षक लागू करना चाहते हैं, और <span>'s सीएसएस गुण vertical-align करने के लिए सेट करने के लिए है या तो middle या sub (वे थोड़ा अलग परिणाम है, और मुझे यकीन है कि नहीं कर रहा हूँ या तो क्यों या वे वास्तव में अलग कैसे हैं) और line-height से 0। परिणाम आवश्यकतानुसार बहुत करीब है, इसलिए उपर्युक्त उदाहरण में <h1> और <p> के बीच की दूरी लगभग सही हो जाती है (बिल्कुल स्पष्ट रूप से नहीं), यानी <p> की रेखा-ऊंचाई के बराबर होती है। मैं सीएसएस के साथ वास्तव में अच्छा नहीं हूं, इसलिए मुझे यकीन नहीं है कि यह समग्र लेआउट को कैसे प्रभावित कर सकता है, भले ही यह हैक का उपयोग करने के लिए स्वीकार्य है और यदि यह क्रॉस-ब्राउज़र-अनुकूल होगा। यदि आप मेरे समाधान पर टिप्पणी करते हैं तो मैं आभारी रहूंगा।

उदाहरण मार्कअप:

<!DOCTYPE html> 
<html> 
    <head> 

     <style type="text/css"> 

     span.lh 
      { 
      vertical-align: sub; 
      line-height:0 
      } 
     p 
      { 
      margin:0; 
      font-size: 26px; 
      line-height: 30px; 
      } 
     h1 
      { 
      margin:0; 
      font-size: 42px; 
      line-height: 60px; 
      } 
     </style> 

    </head> 
    <body> 

    <h1><span class="lh">Title</span></h1> 
    <p><span class="lh">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p> 
    <p><span class="lh">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p> 
    <h1><span class="lh">Lorem Ipsum is simply</span></h1> 
    </body> 
</html>

स्रोत

2011-12-01 00:49:31 sbichenko

इसका नकारात्मकता रखरखाव और अर्थशास्त्र है। अगर सीएसएस ने हमें कुछ और विकल्प दिए तो अच्छा नहीं होगा! – joshnh

SASS या कम्पास आज़माएं – sarink

मुझे पता है इस सूत्र पुराना है, लेकिन मैं भी इस समस्या थी। यदि आप माइक्रोसॉफ्ट वर्ड जैसे शब्द दस्तावेज़ संपादकों के समान टाइपोग्राफी प्रभाव चाहते हैं, तो लाइन-ऊंचाई 1.

लाइन-ऊंचाई की बजाय: 1; लाइन-ऊंचाई डालें: सामान्य; अन्य रेखा ऊंचाई मान एक ही रहते हैं (1.5 1.5 के रूप में रहता है)।

स्रोत

2015-09-03 23:36:37

पारंपरिक अग्रणी और सीएसएस लाइन-ऊंचाई

उत्तर

संबंधित मुद्दे