W3C home > Mailing lists > Public > www-style@w3.org > March 2013

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

From: Simon Sapin <simon.sapin@exyr.org>
Date: Mon, 25 Mar 2013 15:12:12 +0100
Message-ID: <51505B3C.6000104@exyr.org>
To: www-style@w3.org
CC: Håkon Wium Lie <howcome@opera.com>
Le 25/03/2013 14:06, Simon Sapin a écrit :
> Hi,
>
> Compared to the previous one in 2006, the latest WD changes the layout
> of page-margin boxes in the "variable dimension" to be much more
> realistic to implement:
>
> http://www.w3.org/TR/2013/WD-css3-page-20130314/#variable-sizing
>
> Still, it’s been said in recent threads to be much more complicated than
> it should be, especially given that this algorithm is only used for a
> very specific purpose. I agree, but I am not sure of how to simplify it
> while still having it do the "right thing" by default.
>
>
> One option that has been suggested is to use flexbox. Each side of the
> four page margin (eg. the top) would be have flex container, and the
> three page-margin boxes that share that side (eg. @top-left, @top-center
> and @top-right) would be flex items.
>
> Is it possible with such a setup to have @top-center be centered by
> default, even if all three boxes all have a different amount of content,
> but still roughly distribute the space proportionally to the amount of
> content?


(Quoted from another thread.)
Le 25/03/2013 14:51, Håkon Wium Lie a écrit :
> How about using the table algorithm? The rendering of the top margin
> boxes would be described with:
>
> <style>
>   #top-left-corner { text-align: right; vertical-align: middle }
>   #top-left { text-align: left; vertical-align: middle }
>   #top-center { text-align: center; vertical-align: middle }
>   #top-right { text-align: right; vertical-align: middle }
>   #top-right-corner { text-align: left; vertical-align: middle }
>   #page-area { /* determined elsewhere */ }
> <style>
> <table>
>   <tr><td id=top-left-corner><td id=top-left><td id=top-center><td id=top-right><td id=top-right-corner></tr>
>   <tr><td><td colspan=3 id=page-area><td></tr>
> </table>

Maybe there something in this direction, but the code above is not enough:

1. If there is any content in #top-left or #top-right, #top-center may 
not be centered compared to #page-area.

2. Large unbreakable content in #top-left-corner will make the column 
smaller (even if the cell has a fixed 'width'), which in turn probably 
makes #page-area smaller.

Do you think that something based on tables could be tweaked to fix this?


> Likewise, the left, right and bottom margin boxes could be described
> this way.
>
> If we need to simplify, droppig the six left-* and right-* margin
> boxes may be an option -- I can't recall ever having used these.

Page-margin boxes on the left or right can make sense with a vertical 
writing mode (where they are "headers" and "footers".) Removing them 
does not make the algorithm any simpler for the remaining boxes.


> Margin boxes on the side of a page often need even more precise
> placement:
>
>   http://people.opera.com/howcome/2013/tests/margin-boxes.jpg

I think there is no difficulty in doing this in a printed book. If you 
know the size of your paper, fonts and content, just use fixed 
(non-auto) heights and margins.

-- 
Simon Sapin
Received on Monday, 25 March 2013 14:12:37 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:07 GMT