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

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:

  http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/regions.png

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;
  }

  <article>
    <img>
    <p class=lead>
    <p>...    <p>...    <p>...    <p>...    <p>...
  </article>

  http://dev.w3.org/csswg/css3-gcpm/#selecting-lines

 > 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 */

  <article>
    <p class=lead>...
    <img>
    <p>...    <p>...    <p>...    <p>...    <p>...
  </article>

(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
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Monday, 6 February 2012 15:11:32 UTC