- From: Håkon Wium Lie <howcome@opera.com>
- Date: Mon, 6 Feb 2012 16:10:42 +0100
- 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: 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