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: Fri, 22 Mar 2013 14:51:25 +0100
Message-Id: <B3A9821A-597C-4582-8073-3B10C6DF2217@w3.org>
To: WWW Style <www-style@w3.org>
On Nov 5, 2012, at 02:54, Simon Sapin wrote:

> I just pushed my replacement for section 6.3.2 of css3-page:
> http://dev.w3.org/csswg/css3-page/#margin-dimension
> 
> Any feedback is appreciated. In particular, are there use cases not covered by the algorithm?

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.

Here are some use cases I saw recently. Most running headers are simple and are handled by the old as well as by your rules. Here are some common variations:

1) Single centered chapter title

    @page {
      @top-center {content: string(chapter)}
    }

2) Single folio in outer corner

    @page :right {
      @top-right {content: counter(page)}
    }

3) Centered title and folio in outer corner

    @page :right {
      @top-center {content: string(chapter)}
      @top-right {content: counter(page)}
    }

4) Chapter title and page number together in outer corner

    @page :right {
      @top-right {content: string(chap) "\2003\2003" counter(page)}
    }

5) Same, but with a full-width rule below them

    @page :right {
      @top-right {
        content: string(chap) "\2003\2003" counter(page);
        border-bottom: solid;
      }
    }

6) Like 4, but with folio outside the page box (like in the TeXbook)

    @page :right {
      @top-right {content: string(chap)}
      @top-right-corner {content: "\2003" counter(page)}
    }

7) Chapter title inside and folio in outside corner

    @page :right {
      @top-left {content: string(chap)}
      @top-right {content: counter(page)}
    }

8) Same, but with a full-width rule below the running header

    @page :right {
      @top-left {
        content: string(chap);
        border-bottom: solid;
      }
      @top-right {
        content: counter(page);
        border-bottom: solid;
      }
    }

9) Folio outside the corner

    @page :right {
      @top-right-corner {content: counter(page)}
    }

10) Verse numbers, chapter title and folio

    @page :right {
      @top-left {content: counter(page)}
      @top-center {content: string(chap)}
      @top-right {content: string(versenr, start) "-"
          string(versenr, last)}
    }

The following cases were handled by the previous rules, but not by yours, I believe. The first isn't actually that rare, I'd guess about 2% of books. (One famous example is the Chicago Manual of Style, with italic instead of bold.)

11) Chapter title and folio together in outer corner, folio in bold

    @page :right {
      @top-left {
        content: string(chap) " ";
        margin-left: auto;
      }
      @top-right {
        content: counter(page);
        font-weight: bold;
      }
    }

12) A full-width ornament overlaid with a chapter title on the outside

    @page :right {
      @top-center {
        width: 100%;
        background: url(ornament) center;
      }
      @top-right {
        content: string(chapter);
        background: white
      }
    }

This seems to be quite common in East-Asian typography, but not in European and American.

13) Chapter (large) and section (small) both in outer corner, with the chapter title above the section title

    @page :right {
      @top-left {
        content: string(chapter);
        font-size; large;
        text-align: right;
        vertical-align: bottom;
        width: 100%;
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 1em;
      }
      @top-right {
        content: string(section);
        font-size: small;
        vertical-align: bottom;
      }
    }

This one is obviously tricky, because the right margin of the first box has to be negative so that the two boxes can overlap in the horizontal dimension. But it shows that the predefined page template is powerful enough to handle even a number of cases where you need two boxes in the same corner.

A quick random sample of my bookshelf found two examples that needed this trick of putting two boxes in the same corner, one higher than the other: a tourist guide and the German translation of Håkon's and my CSS book. (We didn't do the typography for the translations, Addison-Wesley did.)

14) A running header with a border only under the text itself (cf. case 5 above). This style, minus the page number, is used in the book of typographical rules of the French national printer (Lexqique des règles typographique en usage à l'Imprimerie nationale).

    @page {
      @top-right {
        content: string(chap) " " counter(page);
        border-bottom: solid
        margin-left: auto;
      }
    }

15) A running header on a 2em-high colored background, with a different color behind the title on the left and the folio on the right

    @page {
      @top-center {
        content: " "; /* Make sure it exists */
        background: #BBB;
        width: 100%;
        height: 2em;
      }
      @top-left {
        content: string(chapter) " ";
        background: #CCC;
        margin-right: auto;
        height: 2em;
        z-index: 1;
      }
      @top-right {
        content: " " counter(page);
        background: #CCC;
        margin-left: auto;
        height: 2em;
        z-index: 1;
      }
    }

The top-center box has no real content, but it is used to create the 2em-high colored bar that the other two boxes are put on top of. (One of the two z-index declarations is probably not needed.)



Bert
-- 
  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 Friday, 22 March 2013 13:51:55 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:07 GMT