I researched for a while, hasn't found a CSS solution yet, em and ex units are not correct in this case. What I want is simply a div box that exactly fits 80x25 monospace text. Do I have to resort to Javascript solutions?
views:
340answers:
3
A:
For the height you can use em, but you have to set the line-height also:
height: 25em; line-height: 1em;
Or with a bit more spacing:
height: 30em; line-height: 1.2em;
There is no CSS unit for a character width, so there I am afraid that you need some Javascipt...
Guffa
2009-08-10 14:49:42
If you know the ratio of a character's height and width, you can set the proper width using ems (it only works with monospace fonts where each character has the same width, though).
Jason Francis
2009-08-10 14:55:59
Yes, that would work if you knew the ratio, but you never do. The ratio varies with the actual font used, and how the text is rendered (font smoothing, et.c.).
Guffa
2009-08-10 15:05:20
+3
A:
em does work in this case, if you know the proper ratios involved with your font. Try the following HTML:
(The danger with this is that some browsers adjust the font, which can alter the width/height of the font. For 100% accuracy, you might have to go with JavaScript.)
<style type="text/css">
#text-container {
border: #f00 solid 1px;
font: 10px/1.2 Courier, monospace;
width: 48em; /* 80 x 0.6 (the width/height ratio of Courier) */
height: 30em; /* 25 x 1.2 (line-height is 1.2) */
overflow: hidden;
}
</style>
<div id="text-container">
00000000001111111111222222222233333333334444444444555555555566666666667777777777
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>
Blixt
2009-08-10 14:51:24
What if the user have no Courier font? In this case monospace font may have a different width/height ratio. Even the ratio of the same font is not a constant at different scale, try zoom in/out the page.
btw0
2009-08-10 15:06:14
That is not a reliable solution. On my computer you have to make it 49em wide...
Guffa
2009-08-10 15:07:16
Yup, as I wrote in my last paragraph this is not a perfect method, but it's the closest you will get using CSS. Courier has different ratios depending on its size, and on top of that some browsers adjust the font to "look better". Fonts have always been hard to measure and this case is not different. Basically, you're best off using JavaScript for this (let the browser render, then measure.)
Blixt
2009-08-10 15:10:18
That tiny last paragraph after a giant code block is so easy to be overlooked :)
btw0
2009-08-10 15:15:56
If you don't hide a paragraph like that below a huge code block, you will of course get downvoted for saying it... ;P
Guffa
2009-08-10 15:49:55
When I try your code it gives me a box that is 60x25 characters. With the fallback monospace it gives a box that is 80x25...
Guffa
2009-08-10 17:55:00
A:
Blixt's response is the correct one, but you can also do this if it makes the math easier:
font-family: Courier;
font-size: 0.57em;
line-height: 1.2em;
width: 80em;
height: 30em; /* 1.2 * 25; you could set the line-height at 1em and the box height at 25,
but that would squish things too much */
Jason Francis
2009-08-10 15:02:45