W3C home > Mailing lists > Public > www-style@w3.org > August 2010

[css3-gcpm][css3-box] aligning baselines in multicol layouts

From: Håkon Wium Lie <howcome@opera.com>
Date: Thu, 12 Aug 2010 00:47:00 +0200
Message-ID: <19555.10340.596444.832095@gargle.gargle.HOWL>
To: www-style@w3.org
In multi-column layouts, baselines are typically aligned between
adjacent columns. This gives the presentation a visual rythm, and text
in the end of the columns will be alignend. You typically want this:

    This is   of text in
    a simple  two columns.

and not this:

    This is
              of text in
    a simple
              two columns.

When uniform text fill both columns, the lines will automatically be
aligned. However, when headlines or figures of different (and
uncertain) line heights appear, the lines will easily come out of

To ensure that alignment can be achieved, a new value on
'line-box-contain' property is proposed: ''gap''. The value means that
the height of the line in which the element occurs should be rounded
up to the smallest multiple of the used ‘line-height’ value on the
containing block. In this example, the stacking height of div.figure
would be 30px (2 * 15px):

  div.multicol {
    line-height: 15px;
  div.figure { 
    height: 20px; 
    line-box-contain: block inline replaced gap;

There may be better names for this value, perhaps, ''crack'',
''snap'', ''snap-gap'', ''void'', ''grid'', ''snap-to-grid''?

I've added it here:


              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Wednesday, 11 August 2010 22:47:38 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:49 UTC