Re: [css3-page] Flexbox or table algorithm for page-margin box layout

Le 26/03/2013 00:04, Robert O'Callahan a écrit :
> Why not use a new position value, let's say page-area, with flexbox?
>
> Håkon's example could be expressed like this:
> <div class="margin-box"><div class="pagenum left"></div><div
> class="title"></div><div class="pagenum right"></div></div>
> .margin-box { position:page-area; left:0; right:0; bottom: -2%;
> display:flex; justify-content:center; }
> .pagenum { content: counter(page); flex:none; }
> .title { content: string(chapter); flex:1 0 auto; text-align:center; }
> @page :left .pagenum.right { visibility:hidden; }
> @page :right .pagenum.left { visibility:hidden; }

So, the trick for centering the middle box is to have the same content 
in both other boxes, but hide one of them? What if you want different 
content in all three boxes? Let’s say page number, title, and date.

Are the <div>s here only to express nesting, or do you mean actually 
taking elements from the document?


> This is actually better than what's currently in the css3-page spec,
> IMHO, because instead of allowing the title and page number to overlap,
> the page number would be pushed out into the left or right margin.

The current algorithm never makes the boxes overlap, if widths are 'auto':
http://www.w3.org/TR/2013/WD-css3-page-20130314/#variable-sizing


> The only tricky thing I've done here is to allow :left and :right
> selectors to style content inside the margin box element. We wouldn't
> want to allow them to style content that's not inside a
> position:page-area or position:fixed container. (BTW the only difference
> between position:page-area and position:fixed is that the former isn't
> clipped to the page area.)


-- 
Simon Sapin

Received on Tuesday, 26 March 2013 09:15:05 UTC