यहां मुद्दा लाइन ऊंचाई नहीं है लेकिन विशेष रूप से टेक्स्ट बेसलाइन का स्थान ग्लिफ की लंबवत प्लेसमेंट है। ऐसा कुछ है जिस पर फ़ॉन्ट डिजाइनर ने फैसला किया है; डिजाइनर ग्लाइफ खींचता है और उन्हें एम वर्ग में रखता है, वैचारिक डिवाइस जिसमें ऊंचाई ऊंचाई (या परिभाषित) की ऊंचाई ऊंचाई होती है। विशेष रूप से, डिजाइनर तय करता है कि एक तरफ बेसलाइन के नीचे और दूसरे पर अपरकेस अक्षरों की ऊंचाई से ऊपर कितनी जगह है। आम तौर पर ये रिक्त स्थान बराबर या लगभग बराबर होते हैं, लेकिन उन्हें होने की आवश्यकता नहीं होती है। यदि वे काफी अलग हैं, तो फ़ॉन्ट का इच्छित उपयोग शायद विशेष है और इसमें छवि में दिखाए गए जैसे उपयोग शामिल नहीं हैं। इससे पता चलता है कि फ़ॉन्ट पसंद पर पुनर्विचार किया जाना चाहिए, लेकिन मान लीजिए कि यह तय है।
समस्या से निपटने के कई तरीके हैं। यदि अक्षरों के नीचे बहुत अधिक जगह है, तो line-height
को कम करने से यह छोटा हो जाता है, लेकिन यह उपर्युक्त स्थान को भी प्रभावित करता है। शीर्ष पैडिंग एक अर्थ में मदद करता है, लेकिन यह तत्व द्वारा कब्जा कर लिया गया कुल ऊंचाई बढ़ाता है। आप vertical-align
के साथ भी खेल सकते हैं, लेकिन यह लाइन बक्से की ऊंचाई को प्रभावित करता है।
शायद सबसे सरल दृष्टिकोण यह सोचते हैं कि समस्या एक एक लाइनर पाठ के साथ सौदों, सापेक्ष स्थिति उपयोग करने के लिए है। संबंधित स्थिति केवल लेआउट को प्रभावित किए बिना, किसी निर्दिष्ट तरीके से सामग्री को विस्थापित करती है। इसके लिए आपको एक रैपर की आवश्यकता होगी, यानी एक तत्व जिसमें टेक्स्ट होता है, ताकि आप पृष्ठभूमि को न केवल टेक्स्ट को विस्थापित कर सकें।
निम्नलिखित डेमो एक Google फ़ॉन्ट का उपयोग करता है, कैंडल, जिसमें एक ही समस्या है, लेकिन एक अलग दिशा में: आधार रेखा बहुत कम है। मूल समस्या को पूरा करने के लिए इस दृष्टिकोण के संशोधन स्पष्ट होना चाहिए, लेकिन विस्थापन की सटीक मात्रा को अनुभवी रूप से निर्धारित किया जाना चाहिए (या फ़ॉन्ट निरीक्षक का उपयोग करके फ़ॉन्ट फ़ाइल से निकाली गई जानकारी से)। स्वाभाविक रूप से, em
यूनिट का उपयोग यहां किया जाना चाहिए, भले ही आप फ़ॉन्ट आकार को पिक्सल या पॉइंट्स में सेट करते हैं (ताकि फ़ॉन्ट आकार बदलने के लिए कोड को बदलने की आवश्यकता न हो)।
<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even “setting solid”) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>
स्रोत
2015-01-23 09:08:28
यह लाइन-ऊंचाई के बारे में नहीं है बल्कि ग्लिफ के लंबवत प्लेसमेंट के बारे में है। –
इस के लिए कोई अन्य व्यावहारिक समाधान? स्वीकार्य समाधान के अलावा? मैं फ़ॉन्ट को मैन्युअल रूप से संपादित नहीं करना चाहता हूं –