- From: Daniel Holbert via GitHub <sysbot+gh@w3.org>
- Date: Wed, 13 Jan 2021 20:07:01 +0000
- To: public-css-archive@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