[css-page] Spec doesn't match browsers on alignment of headers & footers (particularly vertical centering) #5870
Description
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-alignandvertical-alignvalues that the UA should use for each of the margin-boxes. Nearly all of them havevertical-align:middle(except for some boxes on the left and right edges of the page, which aren't relevant here). - In link (c), it specifies that "On page-margin boxes, the
vertical-alignproperty behaves as specified for table cells." (So the aforementioned defaultvertical-align:middleis 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">