Explore line-box-contain as a way of enforcing standard line-height

[georgecrawford]

Problem

Lines containing portions of bold, superscript and subscript text will sometimes be rendered slightly taller than other lines. Presumably the browser does this to stop lines bleeding into each other.

The current solution involves adding p strong, p sup, p sub { font-size: 0.9rem } to user CSS. This works, but a more scalable solution would probably be better.

Support

Seems to be supported in Chrome > 16 and Safari > 5.1.

Documentation

CSS3 LineBox spec
Peter Beverloo's WebKit blog

[mattcg]

In this example using -webkit-line-box-contain: block, the line height is contained even though one line contains a character more than double the height of the other characters: http://jsfiddle.net/6u7Qa/1/

The problem is that the big A bleeds into the preceding line, overlapping an a.