- From: Alan Stearns <stearns@adobe.com>
- Date: Thu, 2 Oct 2014 21:32:25 +0000
- To: Håkon Wium Lie <howcome@opera.com>
- CC: Liam R E Quin <liam@w3.org>, Tab Atkins Jr. <jackalmage@gmail.com>, "www-style@w3.org" <www-style@w3.org>
On 10/2/14, 2:12 PM, "Håkon Wium Lie" <howcome@opera.com> wrote: >Also sprach Alan Stearns: > > > > > How about a publication with two columns of text, e.g. main body > > > > and sidebar on the outer edge of each page, where the sidebar has > > > > smaller type...? > > > > > >Yes, this is a common case. So, your markup would be something like: > > > > > > <article> > > > ... > > > <aside>...</aside> > > > ... > > > <aside>...</aside> > > > ... > > > </article> > > > > > >Setting a baseline grid on the 'article' element is a solution for the > > >main column, but setting it on 'aside' would lead to each <aside> > > >element having its own baseline grid. > > > > > >This is another situation where the 'root' keyword would be handy, one > > >could simply do: > > > > > > article { baseline-grid: new } > > > aside { baseline-grid: root } > > > > This works or not depending on the designer’s intent. It definitely >allows > > the two aside elements to share a grid, but as far as I can tell this > > isn’t usually what the designer wants. What I see instead are aside > > elements with their own grid but where the first line of each aside >aligns > > with a baseline from the article text. > >Both are good use cases, I believe. Like you say, it's common to have >(a) sidenotes "hanging" in the outside margin, in which case each sidenote >can have its own baseline grid. But, it's also common for sidenotes to (b) >stack tightly in a sidenote area, in which case you want all sidenotes >to use the same baseline grid. In CSS Books, this is achived with: > >Using CSS Books, you can achieve (b) with a two-liner: > > article { baseline-grid: new } > aside { baseline-grid: root } In this solution you have two separate grids, you’d need to specify an appropriate line-height for an aside on the root (which seems to me like an odd indirection), and you would probably want to carefully position the top of the article and the top of the aside such that their first lines shared a baseline (perhaps using box-snap on the article?). It’s not really a two-liner, in my book. > >I don't see a way of doing it in CSS-line-grid? It all depends on how you’re positioning the asides. If you’re stacking them up on top of each other and establishing a new grid for each aside, you’d want to make sure your margins and padding for the asides use values that work with the grids. Or the markup might have a container for all of the asides, and that container could establish a single grid. > > > I think this can be accomplished without resorting to a named grid: > > > > article { line-grid: create } > > aside { > > line-grid: create; > > box-snap: first-baseline; > > } > >Using CSS Books, you could achieve this with: > > article { baseline-grid: new } > aside { baseline-grid: new } This solution does not align the first baseline of the aside with a baseline from the article text. Thanks, Alan
Received on Thursday, 2 October 2014 21:32:56 UTC