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

On Tue, Sep 3, 2013 at 9:34 AM, MURAKAMI Shinyu <murakami@antenna.co.jp> wrote:
> Lea Verou <lea@verou.me> wrote on 2013/09/02 7:24:19
>> On Jul 31, 2013, at 20:15, Brad Kemper <brad.kemper@gmail.com> wrote:
>> > Let us also not forget :first pages and named pages, which @page can select as easily as :left and :right. Thus, if the mechanism is an @content{} block with rulesets within, itself inside the @page{} block, then it would be a good general way of styling content based on if it appears in right/left/first/or other special pages.
> ...
>> Another issue I see that hasn't been discussed much in this thread is fragmentation. How are the rules applied if an element spreads across multiple pages?
> ...
>> I think cluttering CSS with more values like inside/outside is a mistake. We cannot possibly foresee all the things people might want to differentiate between left or right pages. For example, in my case, one of the things I wanted to be different is border-radius. Are we going to also add things like border-top-outside-radius?! That would be ridiculous, wouldn’t it?
>
> Hello,
>
> I would like to propose another approach: Use CSS Variables[1] with @page :left/:right.
>
> [1] http://www.w3.org/TR/css-variables-1/
>
> An example:
>
>   @page :left {
>     var-foo: 2em 0.5em 0.5em 2em;
>   }
>   @page :right {
>     var-foo: 0.5em 2em 2em 0.5em;
>   }
>
>   div {
>     border-radius: var(foo);
>   }
>
> The problem here is that the 'var(foo)' cannot refer the custom property 'var-foo' value set in the @page context according to the current spec.
> We need to allow this usage, or to define another notation to refer the custom property values set in the @page context, e.g.:
>
>   div {
>     border-radius: from-page-context(var-foo);
>   }
>
> Here the from-page-context() function retrieves the property value that the argument matches the property name, which can be custom (var-*) or normal properties, e.g.:
>
>   @page :left {
>     color: blue;
>     var-foo: 2em 0.5em 0.5em 2em;
>   }
>   @page :right {
>     color: green;
>     var-foo: 0.5em 2em 2em 0.5em;
>   }
>
>   div {
>     color: from-page-context(color);
>     border-radius: from-page-context(var-foo);
>   }
>
> The concept of the from-page-context() function is similar to the from-page-master-region() function defined in the XSL-FO[2], although this XSL-FO's function only accepts very limited properties, and no custom properties, for now.

This makes sense, though it adds some complication.  Pages inherit
from the root element, so something like ":root { color:
from-page-context(color); }" is circular.  We could define that the
function returns the initial value of the property on the root element
to avoid this, of course.  (This is completely benign in HTML, since
we effectively have two root elements, the <html> and the <body>, and
can just use <body> to pull "global" things off of the page.)

~TJ

Received on Tuesday, 3 September 2013 17:02:35 UTC