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

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.

[2] http://www.w3.org/TR/xsl/


Regards,

Shinyu Murakami
Antenna House

Received on Tuesday, 3 September 2013 16:34:58 UTC