W3C home > Mailing lists > Public > www-style@w3.org > July 2013

inline-block baseline when the baseline would be outside of the element

From: Christian Biesinger <cbiesinger@google.com>
Date: Wed, 10 Jul 2013 11:20:05 -0400
Message-ID: <CAPTJ0XGHdT-1DJYsrTVZ6=kXO2On9Wzx_b1rXNS2eRtg52Q=Rw@mail.gmail.com>
To: www-style list <www-style@w3.org>
Hi,

consider this chrome bug / testcase:
https://code.google.com/p/chromium/issues/detail?id=258650

http://plexode.com/eval3/#s=aekVQXANJVQMbAwGVAR14Hz1Pm5aWBFBWVUZTAVydnpaJDoobGhdRWRyoqQGrR0JOSk1aGyJTSkJNs5xPtZWLGwRGzMS1Xpu0n1hTQlGnxsd5G0pPTd1GDkNNUERMzseDGxIRscTSnskEFxMlFxga6J7QxZ4dCCZaLZSodOQBJRFDw9AahUZThaagaWHLwS8GhEKAbUa0QHT/OURfwQkCbAZeAAA=

Basically, we have an inline-block div with a low height (10px), with
a big font (96px) that therefore overflows the div at the bottom.

The baseline for this div would normally be essentially the bottom of
the Y.  However, that would place the baseline for the element outside
of the element's box!

Consequently, Chrome/Webkit clamp the baseline to be the bottom of the
margin box, whereas Firefox/IE keep the baseline outside of the box
and place the X and Y at the same position.

What is the right behavior? Should baselines be allowed to be outside
the margin box of an element? A strict reading of CSS 2.1 seems to
support that, but I'd like to hear opinions of others.

Thanks!

PS: I just realized that in Firefox, if I add overflow: hidden;, then
the baseline changes! In other words: the overflow setting affects the
positioning of the box. That also seems weird?

-christian
Received on Wednesday, 10 July 2013 15:20:32 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:32 UTC