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

I wrote:

>>>> @page :right {
>>>>  background-color: black;
>>>>  margin-right:2in;
>>>>  {
>>>>      * { color: white; }
>>>>      .next-page { background-color: red; float:right-top}
>>>>      img { float: right-middle; }
>>>>  }

[...]

>> I don't think so though, and it feels weird to me to put that at the end of some arbitrary simple selector (it wouldn't have to be the last one of the chain, right, since everything on the page is also contained by something that is at least partially on the page?), when the page is wrapping the thing you are selecting. Seems like the page selector should really always be on the left.

On Sep 11, 2013, at 2:01 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

> The pseudo-element can make sense, as "the fragment of the element
> that appears on a described page".

I understand that, but it still feels unnatural and less intuitive to me. It is backwards from the way most things are selected, where you work your way from outer to inner as you go left to right in the selector chain.

It also feels kind of stupid to me that the following rules all would mean the same thing (almost, but the difference between them is insignificant):

html body article p a:page(right)
html body article p:page(right) a
html body article:page(right) p a
html body:page(right) article p a
html:page(right) body article p a
html:page(right) body article:page(right) p a:page(right)
html:page(right) body:page(right) article:page(right) p:page(right) a:page(right)

> And we clearly just need rule nesting.  ^_^

Not 'just'. For nesting to work with @page, you'd still need to extend @page too, because the non-nested version that selects things on a page, such as '@page :right img', doesn't currently exist. And I'd rather have that, than 'html:page(right) img', because it leverages and extends the existing '@page :right' syntax.

If we could write '@page :right img' to select images on right hand pages, then we could then just offload the nesting part to the hierarchies draft, to be able to write something like this:

@page :right {
 {
     img { float: right-middle; }
 }
}

Or

@page :right {
@nest {
     img { float: right-middle; }
 }
}

Or

@page :right {
     & img { float: right-middle; }
 }

Or whatever.

Received on Wednesday, 11 September 2013 14:43:51 UTC