Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force Non-Monospace Font into Fixed Width Using CSS

Is there any way to force a font to be monospaced using CSS?

By this I mean, using a non-monospace font, can you force the browser to render each character at a fixed width?

like image 856
Jon Raasch Avatar asked Apr 13 '12 22:04

Jon Raasch


People also ask

Which is a fixed width or monospaced font?

A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space.

How do I make my font monospaced?

Basically, for a font to be considered monospace, every glyph has to be the same width, right down to the exact same number of units. This includes even glyphs that should normally be zero width, or a certain width (such as em spaces, em dashes, etc).

Why do programmers use monospaced fonts?

Consequently, most coders prefer retro-style monospaced fonts, where each character takes up the exact same amount of horizontal space. Because a single typo can mess everything up, these simple, monospaced fonts make code a lot easier to read.

How can you tell if a font is monospaced?

A font can be monospaced even if metadata tells you otherwise. Just look at the with of glyphs. Compare the width of 'i' and 'm' and/or other glyphs.


1 Answers

If this is for aligning digits in tables where some fonts (with traditional typography) render them by default with variable width (e.g. Segoe UI on Windows), you should look into CSS properties for:

font-variant-numeric: tabular-nums; 

(this disables the proportional-nums default value for the numeric-spacing variant supported at least by OpenType fonts, and possibly by other font formats supported by the text renderer of your web browser for your particular platform)

No JavaScript needed! It is the cleanest way to disable the variable-width glyphs in these fonts and force them to use tabular digits (this generally uses in the same glyphs in the same font, but their leading and trailing gap is increased so the 10 digits from 0 to 9 will render at the same width; however some font may avoid the visual variable interdigit spacing and will slightly widden some digits, or could add bottom serifs to the foot of digit 1.

Note that this does not disable the variable height observed with Segoe UI (such as some digits will be x-height only like lowercase letters, others will have ascenders or descenders). These traditional digit forms may be disabled with CSS too, using

font-variant-numeric: lining-nums; 

(this disables the default oldstyle-nums value for the numeric-figure variant supported at least by OpenType fonts, and by possibly other font formats supported by the text renderer of your web browser for your particular platform)

You can combine both:

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

--

The snippet below demonstrates this using a single proportional font (not monospaced!) featuring shape variants for digits, such as 'Segoe UI' on Windows and shows the different horizontal and vertical alignments produced.

Note that this style does not prohibit digits to change width if different styles like bold or italic is applied instead of medium roman as shown below because these will use different fonts with their own distinct metrics (this is not warrantied as well with all monospace fonts).

html { font-family: 'Segoe UI'; /* proportional with digit variants */ } table { margin: 0; padding: 0; border: 1px solid #AAA; border-collapse: collapse; } th, td { vertical-align:top; text-align:right; } .unset       { font-variant-numeric: unset; } .traditional { font-variant-numeric: proportional-nums oldstyle-nums; } .lining      { font-variant-numeric: proportional-nums lining-nums;   } .tabular-old { font-variant-numeric: tabular-nums      oldstyle-nums; } .tabular-new { font-variant-numeric: tabular-nums      lining-nums;   } .normal      { font-variant-numeric: normal; }
<table> <tr><th>unset<td><table width="100%" class="unset">   <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal   <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal   </table> <tr><th>traditional<td><table width="100%" class="traditional">   <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal   <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal   </table> <tr><th>lining<td><table width="100%" class="lining">   <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal   <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal   </table> <tr><th>tabular-old<td><table width="100%" class="tabular-old">   <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal   <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal   </table> <tr><th>tabular-new<td><table width="100%" class="tabular-new">   <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal   <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal   </table> <tr><th>normal<td><table width="100%" class="normal">   <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal   <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal   </table> </table>

Reference: https://developer.mozilla.org/docs/Web/CSS/font-variant-numeric

like image 114
verdy_p Avatar answered Sep 28 '22 10:09

verdy_p