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

Re: [css3-regions][css3-gcpm] Plan B versus Plan A

From: Håkon Wium Lie <howcome@opera.com>
Date: Mon, 6 Feb 2012 16:10:42 +0100
Message-ID: <20271.60786.663381.435929@gargle.gargle.HOWL>
To: Alan Stearns <stearns@adobe.com>
Cc: www-style@w3.org
Also sprach Alan Stearns:

 > > Using GCPM, it can be achieved with:
 > > 
 > >   body { width: 25% }
 > >   .unrelated-content {
 > >     float: top;
 > >     float-offset: 0 25%; /* pushes the green rectangle downwards */
 > >     height: 25%;
 > >     background-color: lightgreen;
 > >   }
 > Yes, that does work. So my example is too simple to make my point.
 > What if the height of the first region is based on something that could not
 > be put into the unrelated-content style block? Say you want the first four
 > lines of text to come before the unrelated content, and you're assuming that
 > line-height is 1.2x font-size. So you set the height of the first region to
 > 9.6em.

That wouldn't work, in general. If one glyph increases the height of a
line box, you may end up with only three lines of formatted text and
(almost) a blank line. 

This is also a problem in the first example of the Regions draft:


By setting the height of region 1 in ems, pixels, or percentages, one
risks unintentionally blank lines. 

An alternative is to select lines directly. For example:

  article { columns: 3 }
  img, p.lead::first-lines(3) {
    column-span: 2;

    <p class=lead>
    <p>...    <p>...    <p>...    <p>...    <p>...


 > In the region code this height can go in the first region style block and
 > the unrelated content fits below without needing to add anything to its
 > style block.
 > But the 2em value of font-size isn't present in the unrelated content, so
 > the height calculation of the region can't be make in the unrelated-content
 > block. Is there a way to position the unrelated content using GCPM in this
 > case?

I'd do this:

  p.lead::first-lines(3) { float: top } /* float it to top */
  img { float: top }                    /* float it just under the first three lines */

    <p class=lead>...
    <p>...    <p>...    <p>...    <p>...    <p>...

(The placement of the <img> element in the source code is not random
in this case; it must appear lower afte the <p.lead> element in order
to float up underneath the first three lines. And the <p.lead> element
must have enough content to fill three lines, otherwise the image will
be higher. If the <img> element appears before the <p.lead> element in
the source code, the image will come out above the content of
<p.lead>. We could add a way of specifing the order of floats to
address this, but I think the current solution is sufficient.)

              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Monday, 6 February 2012 15:11:32 UTC

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