On 2006-10-13, Xah Lee <xa*@xahlee.orgwrote:
Ben C wrote:
« It does respect the font. Try it with a few fonts-- the width of the
box varies.»
Thanks. I just created a page here and tested it:
http://xahlee.org/js/width-ex.html
You are right that Firefox respect font when considering ex.
However, it turns out, FireFox is still incorrect. While, Safari and
Opera are correct. (the iCab browser does the worst here. It doesn't
respect font at all)
I looked at the example on your page in Firefox 1.0.7. Where it says
"Firefox Bug", I measured the 70ex box (with the KDE screen ruler) and
made it 490px wide. I then measured the height of one of the x glyphs
and made it 7px. 7x70 = 490, so that looks right.
But it depends on the font. If you're using Firefox on a different OS,
or even on a different Linux distribution, you may not have exactly the
same font. Safari and Opera may not be using the same fonts as
Firefox on your system.
Some fonts may report the height of an 'x' incorrectly. Some fonts don't
even have an 'x' (most languages after all don't have an 'x') but you
can still size things in ex units.
«You can fix your problem instead by using a shrink-to-fit box by
making it absolutely positioned, floated, or using a table. Obviously
the content may need other changes if these have other unwanted
sideeffects.»
mm... interesting suggestions. Thanks. One thing that won't work with
FireFox is display:table. When using display:table, FireFox will omit
spaces between adjacent <span>, and it will also render line breaks
inside <preincorrectly.
(see here for the former:
http://xahlee.org/js/linebreak_after_tag.html)
That does look like it might be a bug.
Easily worked around though by putting the newline instead before you
open the <span(or after you close it).
(IE doesn't shrink wrap the border for display:table at all)
You could also try display: table-cell.
Perhaps i'll try floated or absolutely positioned...
Float is probably the easiest.
The main drawback in this case with position: absolute is that it takes
the positioned box "out of the flow", so the next block box goes
behind it instead of below it.
If you give the float its own block box, and make sure it's cleared at
the bottom, it should behave identically to a normal block box but with
shrink-to-fit width.
Something like this:
<div>
Here is the code:
</div>
<div>
<pre style="float: left; background-color: seashell;">
blah blah
blah
</pre>
<span style="clear: left"></span>
</div>
<div>
Next bit of text
</div>
