Re: [css-line-grid][css-books] (base)line grids

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