On 1 Oct 2013, at 21:06, Kyle Sessions wrote:
I've come across some really strange behavior when trying to mix
multiple
font-sizes within a single block element. I've built an example page
here:
http://kage23.com/line-height.html
Basically, it seems like I'm getting an extra pixel of height and I
can't
track down how or why.
Believe it or not, this is expected behavior. It arises from the
interaction of 'vertical-align' and 'line-height'. I created some
images to illustrate what's happening:
http://meyerweb.com/eric/css/discuss/examples/kyle-lineheight.html
(Note the images are twice the size of the original test case, in order
to make things a little more obvious.)
In #1, you can see how line-height is applied to the boxes in the line
of text. The orange-backed bits of text have pink line height space
above and below. What's happening there is that the difference between
the 'font-size' and the 'line-height' is split in half and added to the
top and bottom. So 24px 'line-height' minus 16px 'font-size' is 8px,
which is split into two 4px chunks. That adds 4px above and 4px below
the font.
The cyan span in #1 doesn't have any pink because the difference between
its 'font-size' (24px) and the 'line-height' (still 24px) is zero, so
there's nothing to apply above and below.
The text boxes don't align, though, because the text is all vertically
aligned on the baseline, but the baseline in English (and many, many
other languages) is not vertically centered on the letterforms. It's
much closer to the bottom of letterforms than the top. So the boxes,
though each is 24px tall, don't have the same amount of
letter-and-line-height space above and below the baseline, and thus when
their baselines are aligned the boxes don't line up.
In #2, the overall line box has been filled in with a
cornflower-blue-like color, just to make clear that the line box
encloses all of the boxes within it. In this one-line case, that
overall line box defines the content box of the element. You can see
how it fills in above the orange text but below the cyan text.
If you want crawl really deep into the inline layout weeds, feel free to
head over to http://meyerweb.com/eric/css/inline-format.html. Please
note that I am not liable for any glazed eyes or migraine headaches that
may result.
Now for a couple of caveats. The first is that different fonts have
different baseline placement with respect to their letterforms, so just
because your testcase shows an extra 1px of height, with another font
face there might be two or three or five extra pixels of height.
The second caveat is that even if the same font face is in use, font
rendering is dependent on both browsers and operating systems, and can
vary by a pixel or two from one user agent to another. For example, I
saw the boxes in Philippe's testcase as being 16px and 24px tall, even
though he saw 17px and 25px. On the other hand, once I filled the line
height and overall line box colors into my example images, I got an
overall box that indicates a 26px-tall line box. In other words, it
shows an extra 2px of height, not the 1px you saw, Kyle.
This stuff happens with fonts. It isn't random or inexplicable, but
like I say, I don't have anything like the knowledge required to
explicate it. All I know is that, even with my limited grasp of how
text lines get constructed, I'm faintly astonished that pages full of
text get rendered at all.
Anyway, hopefully all this has illuminated some of the corners of this
topic (plus your testcase) without damaging too much of your sanity.
--
Eric A. Meyer - http://meyerweb.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
