W3C home > Mailing lists > Public > public-css-archive@w3.org > January 2021

[csswg-drafts] [css-page] Spec doesn't match browsers on alignment of headers & footers (particularly vertical centering) (#5870)

From: Daniel Holbert via GitHub <sysbot+gh@w3.org>
Date: Wed, 13 Jan 2021 20:07:01 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-785405834-1610568420-sysbot+gh@w3.org>
dholbert has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-page] Spec doesn't match browsers on alignment of headers & footers (particularly vertical centering) ==
The css-page-3 spec aims to specify how headers/footers are aligned on a printed page, but its requirements don't actually match what browsers currently do.

There's some spec text about print header/footer placement here:
(a) https://drafts.csswg.org/css-page/#margin-boxes
(b) https://drafts.csswg.org/css-page/#margin-text-alignment
(c) https://drafts.csswg.org/css-page/#page-properties

This text effectively says that headers/footers should be vertically centered in the margin area. In particular:
* In link (a), the spec defines various "margin boxes" within the page margin area that can contain things like headers and footers. e.g. "top-left-corner" which is "a fixed-size box defined by the intersection of the top and left margins of the page box".
* In link (b), the spec provides default `text-align` and `vertical-align` values that the UA should use for each of the margin-boxes. Nearly all of them have `vertical-align:middle` (except for some boxes on the left and right edges of the page, which aren't relevant here).
* In link (c), and it specifies that "On page-margin boxes, the `vertical-align` property behaves as specified for table cells."  (So the aforementioned default `vertical-align:middle` is expected to actually get us vertical centering for header/footer text, as shown in the mockups in the spec like https://drafts.csswg.org/css-page/images/header-ex-4.png)

However: as far as I can tell, **no browser actually does this vertical centering** for their default page headers/footers.  I tested Chrome, Edge (Chromium-based), Safari, and Firefox, and they all seem to use some sort of fixed offset from the edge of the page or the printable area.  The headers/footers don't move if I adjust my page margins (in the print dialog) -- the page content respects the margins that I choose, but the headers/footers stay put.

Here's the testcase that I've been using for this, FWIW (to easily visualize the content area in a printed page):
data:text/html,<title>Page Title</title><body style="margin:0;border:1px solid black;box-sizing:border-box;height:100vh">

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5870 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 13 January 2021 20:07:03 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:25 UTC