Re: New ::first-page pseudo-element

David Hyatt wrote:

 > I just really want to see us have a coherent picture for regions, multi-column and printing. 

Yes, this is very important. 

 > My opinion is that pages and columns should be auto-generated
 > regions created according to the rules of their layout systems, and
 > they should support capabilities like region styling by being
 > addressable via pseudo-element or pseudo-class selectors.

We can quite easily do region styling by selecting columns. E.g.:

   article:column(1) { font-size: 1.2em }

The column then, in effect, becomes a region. Using columns as basis
for regions has the benefit of supporting auto-generation of
boxes/regions and pagination; as far as I can tell, the current region
propsal doesn't describe auto-generatation and pagination.

By positioning columns, I believe we can support magazine-like
layouts, as proposed by Alex and Peter. For example you could recreate
the first example in the regions draft [1] through code like this:

  article:column(1) {
    position: absolute;
    top: 0; left: 0;
    column-span: 2; height: 400px;
  }

  article:column(2) {
    position: absolute;
    top: 400px; left: 0;
    column-span: 2; height: 200px;
  }
  
  article:column(3) {
    top: 600px; left: 0;
  }
  
  article:column(4) {
    top: 600px; left: 300px;
  }

In the code above, the 'position: absolute' take the column out of the
normal flow, and the next column is then moved in. This way, column 5
will appear where column 3 would naturally occur (as the first two
columns have been abspos'd). Column 3 and 4 appear in their natural
places, but have been pushed down (by 'top') to make room for the
first two columns (referred to as 'A' and '1' in [1]).

It would be interesting to compare this syntax to other alternatives.
I think the regions proposal should have code examples, even if -- as
proposed -- regions can be created using different layout systems.

[1] http://dev.w3.org/csswg/css3-regions/images/regions-intro.svg

As for selecting pages, there was a proposal for selecting pages in
GCPM through nth() page selectors. For example, this code would se the
background color of the second page in the document:

  @page :nth(2) { 
    background: green;
  }

This code would set the background color of the second page of all
chapters in a document:

  @page chapter {
    background: yellow;
  }
  @page chapter:nth(2) { 
    background: green;
  }
  div.chapter {
    page: chapter;
  }

Is this what you had in mind?

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Saturday, 29 October 2011 18:05:11 UTC