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

On Jul 27, 2013, at 2:02 PM, Håkon Wium Lie <howcome@opera.com> wrote:

> Also sprach Lea Verou:
> 
>> 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.
>> 
>> Since @page :left/:right cannot include nested CSS rules (except
>> certain @rules), is this possible with the current paged media
>> specs? How?
> 
> 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 for your sidebar (and I think using floats for page structure is a hack anyway). 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.

I think what we really need is to be able to nest CSS rules inside an @page, perhaps by wrapping them in (let's say) an '@content' block, or even bare curly braces, to separate the in-page selectors from the page-box properties. These rules would then only apply to content that appeared inside that page. 

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). 


1) http://dev.w3.org/csswg/css-page/#left