Re: [css3-page] Styling elements differently based on whether they appear on a left or right page

On 7/29/13 4:39 PM, "Håkon Wium Lie" <howcome@opera.com> wrote:

>Alan Stearns wrote:
>
> > >Also sprach Brad Kemper:
> > >
> > > > >  http://people.opera.com/howcome/2013/02-reader/
> > > > > 
> > > > > What would be your preferred ways of coding, say, the first of
>these?
> > > > 
> > > > I've nothing against doing that sort of layout like that, where you
> > > > have evenly sized and spaced columns and everything is to fit
> > > > within even multiples of those columns.
> > >
> > >That's good. Still, my question stands: how would you code these sorts
> > >of layouts using your preferred methods -- what would the code look
>like
> > >in
> > >flex box or grid?
> > 
> > There is an example of the holy grail layout in the flexbox spec that
>has
> > two sidebars the same height as the article using a flex container.
> >
> > Since the topic at hand is sidebars, what about reversing your
>question?
> > How would you accomplish the sidebar layout Brad is talking about?
>
>The one with sidebars differing on left/right pages? The code example I
>gave is here:
>
>  http://people.opera.com/howcome/2013/tests/css3-gcpm/sidenote.pdf
>  http://people.opera.com/howcome/2013/tests/css3-gcpm/sidenote.html
>
>Or, are you asking about the holy grail, like the one Brad referred to?:
>
>  http://d.alistapart.com/holygrail/example_1.html

The desired result from that article is a bit further down:

http://d.alistapart.com/holygrail/example_3.html

>
>Here's a float-based alternative:
>
>  http://people.opera.com/howcome/2013/tests/hg-float.html

That's missing the fixed-width sides and equal heights from the desired
result.

>
>Using flexbox is fine, too. Or CSS tables.

I think flex and grid are much better suited to layout than floats or
tables.

> 
>
> > What would the code look like with float:outside/inside? Let's have
> > a paginated layout with an article and a sidebar, where the sidebar
> > paginates along with the article columns. When the sidebar content
> > ends, the height should either be the viewport height (if the
> > article continues on another page) or the height of the final
> > fragment of the article (if the article and sidebar finish on the
> > same page).
>
>You're adding a bunch of constraints and I'm not sure I follow your
>description. Is this a common layout you can point to in the wild?

Yes, it's the basis of the 'interleaved flows' example I posted here
(though this is a mid-bar, rather than a sidebar):

http://wiki.csswg.org/spec/css3-regions/regions-print-use-cases

I'm taking the height constraints from the holy grail layout article, and
adding in fragmentation because that's necessary for any paginated view.
The main difference I see between paginating sidebars in a print formatter
and allowing for sidebars in an on-screen paginated view is that you can't
ever be sure that the sidebar will fit on one screen. Whatever layout
scheme(s) we arrive at for paginated views will need to take fragmentation
of all layout elements into account.

Thanks,

Alan

Received on Tuesday, 30 July 2013 00:24:44 UTC