Menu
ch unitThe unit you're looking for is ch. According to the MDN docs:
ch: Represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element'sfont.
It is supported in current versions of major browsers (caniuse).
pre {
width: 80ch; /* classic terminal width for code sections */
}
1em is the height of an M, rather than the width. Same holds for ex, which is the height of an x. More generally speaking, these are the heights of uppercase and lowercase letters.
Width is a totally different issue....
Change your example above to
<div>
<span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>
and you will notice width and height of the span are different. For a font-size of 20px on Chrome the span is 12x22 px, where 20px is the height of the font, and 2px are for line height.
Now since em and ex are of no use here, a possible strategy for a CSS-only solution would be to
I however did not manage to code this up. I also doubt it really is possible.
The same logic could however be implemented in Javascript. I'm using ubiquitous jQuery here:
<html>
<head>
<style>
body { font-size: 20px; font-family: Monospace; }
</style>
<script
type="text/javascript"
src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>
</head>
<body>
<div>1 3 5 7 9 1 3 5 7 9 1</div>
<script>
$('body').append('<div id="testwidth"><span> </span></div>');
var w = $('#testwidth span').width();
$('#testwidth').remove();
$('div').css('width', (w * 10 + 1) + 'px');
</script>
</body>
</html>
The +1 in (w * 10 + 1) is to handle rounding problems.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With