W3C home > Mailing lists > Public > www-style@w3.org > March 2013

Re: [css3-page] Idea for simplier page-margin boxes

From: Håkon Wium Lie <howcome@opera.com>
Date: Mon, 25 Mar 2013 00:13:10 +0100
Message-ID: <20815.34950.560248.378186@gargle.gargle.HOWL>
To: robert@ocallahan.org
Cc: Simon Sapin <simon.sapin@exyr.org>, Julian Viereck <julian.viereck@googlemail.com>, www-style@w3.org
Robert O'Callahan wrote:

 > Speaking for myself, and Julian I think, the current css3-page margin-box
 > model feels both over-complicated and inadequate, which isn't a good
 > combination, and I don't think we want to implement it in Gecko. We'd
 > rather bypass it and do something better, perhaps along the lines of
 > Julian's proposal.

Let's see. A common use of margin boxes is to put the chapter title of
a book in the top center, and the page number on the top left. (Many
variations of this are used, Bert listed a bunch here: [1]). Here's a
code snippet that achieves this -- let's call it example 1:

  @page { margin: 8%;
     @top-center { content: string(chapter) }}
  @page :left { @top-left { content: counter(page) }}
  @page :right { @top-right { content: counter(page) }}
  .chapter h2 { string-set: chapter content() }

I'd say the code is both simple and powerful; the common case is encoded
in 5 lines.

How would one achieve the same in Julian's proposal [2]? I guess you
would write something like this -- let's call it example 2:

  @page { margin: 8% }
  div.title { position: pagebox; 
     left: 12%; right: 12%; top: 3%;
     content: string(chapter) }
  @page :left { position: pagebox:
     left: 8%; right: 88%; top: 3%;
     text-align: left; 
     content: counter(page) }
  @page :right { position: pagebox:
     left: 88%; right: 8%; top: 3%;
     text-align: right; 
     content: counter(page) }
  .chapter h2 { string-set: chapter content() }

I've made some assumtions in example 2: that @page :left and @page
:right still exists, and that string-set and counter(page) are
supported. The big difference between the two models is:

 - how boxes are positioned: in example 1, margin boxes are
   automatically laid out, while they must be created as abspos in
   example 2.

 - how properties are initiated: in example 1 'text-align' and
   'vertical-align' are automatically set to sensible values, while
   they must be manually set in example 2.

Using abspos also creates some dependencies. In the code above, I'm
guessing that the page number will fit in a box with a with of 4%
(100-88-8). For page numbers, that's a reasonable guess. For other
types of content, using abspos may cause overflow/overlap.

Also, if the page margin is changed by some other style sheet, example
2 may result in marginalia not being aligned with the page area -- in
example 1 the margin boxes will automatically align if the page margin
is changed.

I may have misunderstood Julian's proposal. If so, feel free to
correct example 2.

I'm not against adding abspos margin boxes for marginalia. However,
I've used the current css3-page model to publish real-world books [3]
and I find it simple & powerful -- not over-complicated & inadequate.

[1] http://lists.w3.org/Archives/Public/www-style/2013Mar/0427.html
[2] http://lists.w3.org/Archives/Public/www-style/2013Mar/0059.html
[3] http://alistapart.com/article/boom


              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Sunday, 24 March 2013 23:13:51 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:35:24 UTC