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

On Jul 28, 2013, at 10:57 AM, Håkon Wium Lie <howcome@opera.com> wrote:

> Brad Kemper wrote:
> 
>>>> My use case is the incredibly common case of sidebars (for notes,
>>>> figures etc). The sidebar should be on the left in left pages and
>>>> on the right in right pages.
> 
>>> http://www.w3.org/TR/css3-gcpm/#floating-inside-and-outside-pages
>> 
>> That's not bad for floats, but doesn't help much if you want to use
>> grid or table-* or something else
> 
> The problem at hand is how to best to sidenotes in CSS (as opposed to
> how to do sidenotes with feature x). Here's my proposal:
> 
>  div.sidebar { float: outside }

My point is that sidebars are commonly needed as a page layout feature, and floats are not great for doing page layout. Grid or table structure is much better for that, and it would be more useful to have a general way to deal with layout structure and other properties change based on what page they were on.

That said, I am not against the new float values. I just don't think they are enough in and of themselves to address the larger need.

> Which specifies that the sidenote is floated to the outside edge of
> the content box. If you want to push the element further out, into the
> marginalia, the code could be:
> 
>  div.sidebar { float: outside; float-offset: -5em; width: 4em;  } 
> 
> The 'float-offset' property pushes the sidebare further in the
> direction where it has been floated, so that it ends up outside the
> content box.
> 
> AntennaHouse and Prince support float inside/outside. Antennahouse
> also support float offsets [1]. Here's a sample document and the resulting
> PDF file:
> 
>  http://people.opera.com/howcome/2013/tests/css3-gcpm/sidenote.pdf
>  http://people.opera.com/howcome/2013/tests/css3-gcpm/sidenote.html
> 
>> It also doesn't help if there is some multi-line text that you want
>> right-aligned on the left pages and left aligned on the right pages
>> (or vice versa). Or if you want left pages to be a different
>> background color and/or foreground color than right pages.
> 
> Backgrounds are easy:
> 
>  @page :left { background: red }
>  @page :right { background: blue }

OK, but that is only for the background of the whole page, not for individual elements within the page. And changing the background from light to dark is impractical unless you can change the foreground colors of all the elements in the page from dark to light.

> This is also shown in the demo document above.
> 
> Alignment is not part of the proposal. You could specify inheritance
> from the page context, I guess.

Not practical except in very simple pages. If the element is inside another element that needs to have a different alignment, then you are SOL.

>> By the way, those three sentences in the gcpm draft you linked to
>> are rather sparse with the details. For 'float:inside | outside', I
>> think it should be defined to be usable in 'media=all', where there
>> is no left or right versions of the continuous media. In that case,
>> I'd default to inside=left, which would also work well for an
>> 'overflow:paged' implementation that did not have facing pages (or
>> in that case would you alternate anyway, based on how the paged
>> media spec defines :left and :right?[1] That would be weird).
> 
> Yes, it doesn't seem to make sense to do alternate between :left and
> :right on screens.
> 
> THanks for your feedback; I'm in the process of updating GCPM to align
> with implementations.

You're welcome. I do like much of GCPM.

Received on Sunday, 28 July 2013 19:26:21 UTC