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

Re: [css3-page] Page-margin boxes layout

From: Bert Bos <bert@w3.org>
Date: Wed, 27 Mar 2013 15:38:54 +0100
Message-Id: <FE1CA100-F874-4ABE-8436-F4F0725D232D@w3.org>
To: WWW Style <www-style@w3.org>
On Mar 23, 2013, at 17:36, Simon Sapin wrote:

> Le 22/03/2013 13:51, Bert Bos a écrit :
>> Yes, I believe there are some, e.g., all cases where the left box
>> isn't on the left or the right box isn't on the right. See cases 11
>> and after in the list below.
> I believe that most of the cases described (not quoted for brevity) are hacks for simulating two inline or block boxes (each with different styles) inside the same page-margin box. I also believe that this is the kind of use cases that Daniel wants to cover with css4-page. (eg. by flowing elements into page-margin boxes.) Daniel, is this correct?

Two differently styled parts side by side is quite common (on the order of 1-2% of books is my estimate). Typically, it's a a chapter title and a page number, one of which is bold or italic. More complex running headers are very rare and would anyway require a different approach, because then we get into cases such as mathematical formulas in the heading or even complete tables. See below.

> (By the way, the same ability would be useful for ::before and ::after. For example, an image generated by 'content: url(…)' is anonymous, there is no way to set its width property.)
> Other cases (such as a bottom border as wide as the text) can be covered with new keyword values for 'width' based on intrinsic sizes:
> http://dev.w3.org/csswg/css3-sizing/#width-height-keywords

Those didn't exist when we created css3-page, of course. :-) But I believe that is indeed another way to do case 14.

> Bert, do you think the cases you mentioned can be covered by either feature? (multiple boxes with different styles inside a page-margin box, and 'width: fill-available' etc.) Alternatively, do you have suggestions on how to tweak the layout algorithm to cover more cases without going back to quadratic optimization?

"Minimizing the sum of the squares" is just a fancy way of saying that all margins must be as close to zero as possible, whether negative or positive. That implies that, if there is a choice between giving extra space to the 'width' or to the 'margin', then it should go to the width.

But it is true that the rules were under-specified. In some cases there are multiple solutions and the rules don't say which one is better (probably because it isn't obvious which one is "best" in that case...) I'll try to come up with a set of rules that keeps all the features, is easier to understand, and gives a single answer in all cases.

There are three aspects of running headers and footers:

1) Their position. There exist magazines where the running headers  aren't in the page margin. One example I studied could actually be done by moving a margin box down a bit with a negative margin, but there are no doubt more complex examples. If we want to handle those, we need a way for the designer to create a page template (e.g., by assigning a grid-based template to the page and using some of its slots for running content.).

I'd like for our predefined page template to cover as many cases as possible, because, even when the syntax for defining a personal page template is easy (the easiest I've seen so far is to use the 'grid' property from css3-layout), it is still an extra indirection and thus not for the average user.

2) Their content. The content of a running header is usually a combination of some boilerplate text (em-spaces, dashes, slashes...), some counters (chapter, section, page) and content copied from elements on the page. GCPM proposes (1) a way to copy just the text of an element and (2) a way to move, rather than copy an element. Moving an element presupposes that some other process (XSLT?) has constructed that element, or that the document contains special elements for running headers.

The editor's draft of GCPM hints at copying an element by means of a new CSS syntax, but that hinges on there being a way to style that copy, which is the next point:

3) Their formatting. This has two parts:

3a) Formatting the generated text (the boilerplate and the counters). I don't know of any proposals for how to do that. How, e.g., would I do

    @top-right { content: counter(chap) "." counter(sect) }

with the chap counter in bold? (That is the same problem you mentioned with an image in the generated content.)

3b) Formatting a copied element. If you put an element in a running header and also keep a copy in the flow, you need a way to style that copy differently from the original. I have some vague ideas for pseudo-classes or for extending @region, but nothing that I really like...

  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France
Received on Wednesday, 27 March 2013 14:39:18 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:27 UTC