- From: Håkon Wium Lie <howcome@opera.com>
- Date: Sun, 5 Feb 2012 13:19:52 +0100
- To: Stephen Zilles <szilles@adobe.com>
- Cc: www-style@w3.org
Stephen Zilles wrote, in the end of a very long message:
> Comments are welcome
I haven't read and digested the whole message. But in recent
disucssion with others on this subject, I've sketched a simple
solution to the common cases I've run into myself.
First, a new property establishes a grid based on -- typically -- the
line-height:
article { baseline-grid: line-height }
Then we use vertical-align (or some sub-property thereof) to align
child elements. The body text (in <p> elements) snap to the grid of
baselines:
p { vertical-align: baseline } /* body text */
while bigger elements, like headlines and figures, are placed
naturally but we declare where the extra white space (which appears du
to snapping to grid lines) appears:
h1, h2, h3 { vertical-align: bottom } /* or 'top' or 'middle' */
div.figure { vertical-align: top } /* or 'bottom' or 'middle' */
In addition to page floats, this feature in the one most requested
when doing printed publications in CSS.
Cheers,
-h&kon
Håkon Wium Lie CTO °þe®ª
howcome@opera.com http://people.opera.com/howcome
Received on Sunday, 5 February 2012 12:20:29 UTC