अवधि में लपेटने वाला चरित्र "वाई", अगले चरित्र में मार्जिन बढ़ाता है

Question

मेरी वर्तमान परियोजना में, मुझे एक अवधि के भीतर एक वाक्य के प्रत्येक चरित्र को लपेटने की ज़रूरत है, इसलिए मैं वाक्य की शुरुआत से दूरी को माप सकता हूं प्रश्न में चरित्र।

दुर्भाग्य से, ऐसा लगता है कि पात्रों में से कुछ लपेटकर अंतराल में (मैं इसे "Y" और "टी" के लिए सही पाए), सही करने के लिए एक अतिरिक्त मार्जिन कहते हैं, इसलिए पूरे पाठ फैला हो जाता है :

div { font-size: 100px; }

<h2>Expected (same width):</h2> 
 
<div>A-A-A-A</div> 
 
<div> 
 
    <span>A</span><span>-</span><span>A</span><span>-</span><span>A</span><span>-</span><span>A</span> 
 
</div> 
 

 
<h2>Unexpected (different width):</h2> 
 
<div>Y-Y-Y-Y</div> 
 
<div> 
 
    <span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span> 
 
</div>

आप टुकड़ा चलाते हैं, तो आपको एहसास होगा, जब तक फैला में लिपटे है कि "YYYY" काफी व्यापक है।

ऐसा क्यों है? मैं इस व्यवहार को कैसे रोक सकता हूं?

Answer 1

चाहे ऐसा होता है आपके ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट पर निर्भर करता है। कुछ फोंट में कर्नलिंग (अक्षर अंतर समायोजन) हो सकता है जो राजधानी Y और एक छोटा अक्षर या डैश के बीच की जगह को कम कर देता है।

ऐसा लगता है कि क्रोम का टेक्स्ट रेंडरिंग इंजन या तो अन्य ब्राउज़रों की तुलना में अधिक कर्नाई का उपयोग करता है, या अक्षरों के बीच एक HTML टैग होने पर इसे लागू करने में विफल रहता है।

आप अपने div एक निर्दिष्ट font-family देकर इस समस्या को हल कर सकते हैं:

div { 
    font-family: Courier New; 
} 

(एक monospace फ़ॉन्ट होना जरूरी नहीं है, लेकिन उन कर्निंग नहीं की गारंटी है)

Answer 2

आप div

Like this

को font-kerning:none; स्थापित करने के साथ हल कर सकते हैं कि

https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning

Answer 3

किसी भी मोनो स्थान दिया गया है फॉन्ट मदद मिल सकती है के रूप में प्रत्येक चरित्र एक ही चौड़ाई है।

आप भी इस कोशिश कर सकते:
https://css-tricks.com/forums/topic/characterletter-widths-in-css/