W3C home > Mailing lists > Public > www-style@w3.org > February 2012

Re: Processing model for line formation and the CSS Line Modu8le

From: Håkon Wium Lie <howcome@opera.com>
Date: Sun, 5 Feb 2012 13:19:52 +0100
Message-ID: <20270.29672.858558.828451@gargle.gargle.HOWL>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:50 GMT