सीएसएस

Question

का उपयोग कर फिक्स्ड चौड़ाई में फोर्स गैर-मोनोस्पेस फ़ॉन्ट फोर्स का उपयोग करके मोनोस्पेस्ड होने के लिए फ़ॉन्ट को मजबूर करने का कोई तरीका है?

इसका मतलब है, एक गैर-मोनोस्पेस फ़ॉन्ट का उपयोग करके, क्या आप ब्राउज़र को प्रत्येक वर्ण को निश्चित चौड़ाई पर प्रस्तुत करने के लिए मजबूर कर सकते हैं?

Answer 1

नहीं, जब तक कि यह वास्तविक मोनो-स्पेस फ़ॉन्ट न हो।

Answer 2

नहीं, सीएसएस में कुछ भी मजबूर करने का कोई तरीका नहीं है। और यह सुझाव देने का एक तरीका भी नहीं है कि एक गैर-मोनोस्पेस फ़ॉन्ट मोनोस्पेस फ़ॉन्ट के रूप में प्रस्तुत किया जाए।

Answer 3

आप इसे सीएसएस के साथ नहीं कर सकते हैं। यहां तक ​​कि आप कर सकते हैं तो परिणाम भयानक दिखेगा:

तुम सच में ऐसा करने की जरूरत है, तो आप जावास्क्रिप्ट इस्तेमाल कर सकते हैं एक तत्व में प्रत्येक व्यक्ति चरित्र रैप करने के लिए (या बस हाथ से करते हैं):

function wrap_letters($element) { 
 
    for (var i = 0; i < $element.childNodes.length; i++) { 
 
     var $child = $element.childNodes[i]; 
 

 
     if ($child.nodeType === Node.TEXT_NODE) { 
 
      var $wrapper = document.createDocumentFragment(); 
 

 
      for (var i = 0; i < $child.nodeValue.length; i++) { 
 
       var $char = document.createElement('span'); 
 
       $char.className = 'char'; 
 
       $char.textContent = $child.nodeValue.charAt(i); 
 

 
       $wrapper.appendChild($char); 
 
      } 
 

 
      $element.replaceChild($wrapper, $child); 
 
     } else if ($child.nodeType === Node.ELEMENT_NODE) { 
 
      wrap_letters($child); 
 
     } 
 
    } 
 
} 
 

 
wrap_letters(document.querySelectorAll('.boxes')[0]); 
 
wrap_letters(document.querySelectorAll('.boxes')[1]);

.char { 
 
    outline: 1px solid rgba(255, 0, 0, 0.5); 
 
} 
 

 
.monospace .char { 
 
    display: inline-block; 
 
    width: 15px; 
 
    text-align: center; 
 
}

<h2 class="boxes">This is a title</h2> 
 
<h2 class="boxes monospace">This is a title</h2>

Answer 4

बॉक्स के बाहर और एक मेज के अंदर इस बात के लिए क्यों नहीं:

<table cellpadding="0" cellspacing="0"> 
<tr><td>T</td><td>h</td><td>e</td><td></td><td>r</td><td>a</td><td>i</td><td>n</td><td></td><td>i</td><td>n</td><td></td><td>S</td><td>p</td><td>a</td><td>i</td><td>n</td><td></td><td>s</td><td>t</td><td>a</td><td>y</td><td>s</td></tr> 
<tr><td>m</td><td>a</td><td>i</td><td>n</td><td>l</td><td>y</td><td></td><td>i</td><td>n</td><td></td><td>t</td><td>h</td><td>e</td><td></td><td>p</td><td>l</td><td>a</td><td>i</td><td>n</td><td>s</td><td>.</td></tr> 
</table> 

Answer 5

मैं उल्टी गिनतियां के लिए कभी कभी एक verry सुंदर बात किया है:

एचटीएमएल:

<div class="counter"> 
    <span class="counter-digit counter-digit-0">2</span> 
    <span class="counter-digit counter-digit-1">4</span> 
    <span class="counter-digit counter-digit-divider">/</span> 
    <span class="counter-digit counter-digit-2">5</span> 
    <span class="counter-digit counter-digit-3">7</span> 
</div> 

एससीएसएस:

$digit-width: 18px; 
.counter { 

    text-align: center; 
    font-size: $digit-width; 

    position: relative; 

    width : $digit-width * 4.5; 
    margin: 0 auto; 
    height: 48px; 
} 
.counter-digit { 

    position: absolute; 
    top: 0; 
    width: $digit-width; 
    height: 48px; 
    line-height: 48px; 
    padding: 0 1px; 

    &:nth-child(1) { left: 0; text-align: right; } 
    &:nth-child(2) { left: $digit-width * 1; text-align: left;} 
    &:nth-child(3) { left: $digit-width * 2; text-align: center; width: $digit-width/2} // the divider (/) 
    &:nth-child(4) { left: $digit-width * 2.5; text-align: right;} 
    &:nth-child(5) { left: $digit-width * 3.5; text-align: left;} 
} 

Answer 6

ठीक है, आप का उपयोग कर यह नहीं कहा केवल सीएसएस। प्रत्येक पत्र को span में लपेटने के लिए बस जावास्क्रिप्ट के साथ ऐसा करना संभव है। बाकी सीएसएस में है ...

window.onload = function() { 
 
    const secondP = document.getElementById('fixed'); 
 
    const text = secondP.innerText; 
 
    const newText = text.split('').map(c => { 
 
    const span = `<span>${c}</span>`; 
 
    return span; 
 
    }).join(''); 
 
    secondP.innerHTML = newText; 
 
}

p { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    border-radius: 1em; 
 
    padding: 1em; 
 
    margin: 3em 1em; 
 
} 
 

 
p::after { 
 
    content: attr(name); 
 
    display: block; 
 
    background-color: white; 
 
    color: green; 
 
    padding: 0 0.5em; 
 
    position: absolute; 
 
    top: -0.6em; 
 
    left: 0.5em; 
 
} 
 

 
#fixed span { 
 
    display: inline-block; 
 
    width: 1em; 
 
    text-align: center; 
 
}

<p id="variable" name="Variable Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p> 
 
<p id="fixed" name="Fixed Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>

नियमित पाठ के साथ एक पैराग्राफ में, यह भयानक है, लेकिन उदाहरणों रहे हैं जब यह समझ में आता है। आइकन फोंट और यूनिकोड प्रतीकों दोनों इस तकनीक का उपयोग कर सकते हैं।

मुझे यूनिकोड प्रतीकों के लिए समाधान खोजने का प्रयास करते समय यह प्रश्न मिला, जब उन्हें अन्य यूनिकोड प्रतीकों के साथ प्रतिस्थापित किया गया था, तो नियमित पाठ को दाईं ओर स्थानांतरित कर रहे थे।

Answer 7

इस तो तालिकाओं में संरेखित अंक जहां कुछ फोंट (पारंपरिक टाइपोग्राफी के साथ) उन्हें चर चौड़ाई के साथ डिफ़ॉल्ट रूप से प्रस्तुत करना के लिए है (उदाहरण के लिए विंडोज पर Segoe यूआई), आप के लिए सीएसएस गुण में दिखना चाहिए:

font-variant-numeric: tabular-nums;

(यह proportional-nums संख्यात्मक-अंतरण संस्करण के लिए डिफ़ॉल्ट मान अक्षम करता है)

कोई जावास्क्रिप्ट आवश्यक नहीं है!इन फोंटों में वेरिएबल-चौड़ाई ग्लाइफ को अक्षम करने और उन्हें टैब्यूलर अंकों का उपयोग करने के लिए मजबूर करने का सबसे साफ तरीका है (यह आम तौर पर एक ही फ़ॉन्ट में समान ग्लाइफ में उपयोग करता है, लेकिन उनके अग्रणी और पीछे के अंतर में वृद्धि हुई है, इसलिए 0 से 10 अंक 9 एक ही चौड़ाई पर प्रस्तुत करेगा, हालांकि कुछ फ़ॉन्ट विज़ुअल वेरिएबल इंटरडिजिट स्पेसिंग से बच सकते हैं और कुछ अंकों को थोड़ा विज़ार्ड कर सकते हैं, या अंक के पैर में नीचे सेरिफ़ जोड़ सकते हैं।

ध्यान दें कि यह चर ऊंचाई को अक्षम नहीं करता है Segoe यूआई के साथ मनाया (जैसे कुछ अंकों के रूप में एक्स-ऊंचाई केवल छोटे अक्षरों तरह होगा, दूसरों आरोहक या descenders होगा)। इन पारंपरिक अंकों रूपों का उपयोग कर भी सीएसएस के साथ निष्क्रिय किया जा सकता,

font-variant-numeric: lining-nums;

आप दोनों को जोड़ सकते हैं (यह डिफ़ॉल्ट "ओल्डस्टएल-nums" सांख्यिक-आंकड़ा संस्करण के लिए मूल्य को निष्क्रिय):

font-variant-numeric: tabular-nums lining-nums;