search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 658 forks source link

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

Open dholbert opened 3 years ago

dholbert commented 3 years ago

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:

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">
dholbert commented 3 years ago

This isn't to say that the spec is necessarily wrong, but I want to double-check that the requirements in this area are actually intentional & that it represents what browsers should in fact be doing. (And if not, this section should be updated/broadened to reflect the actual requirements or best-practices here.)

dauwhe commented 3 years ago

We use PrinceXML for book typesetting, and always override the vertical-align: middle for page margin boxes. Our goal is a consistent distance between the header/footer and the page area, so we set text-align: bottom on the top- boxes and text-align: top on the bottom- boxes.

fantasai commented 3 years ago

It would be good to know what the various CSS-to-PDF implementations do. I imagine they care the most about what happens here. CC @faceless2

fantasai commented 3 years ago

I'm also thinking, the preferred alignment of headers/footers added by web browsers might be different from what defaults make sense for ones defined by the page: browser-added headers and footers are not really designed as part of the document, so that's probably why historically they've been pushed as far away from the content as possible.

mstensho commented 7 months ago

I've always thought that the spec is oblivious of browser-default margins, and that the default UA stylesheet for margin box alignment (https://drafts.csswg.org/css-page/#margin-text-alignment) only has an effect if the content property in a margin context is not none. The spec also goes "As with the :before and :after pseudo-elements, a specified content: normal on a page-margin box computes to none." (https://drafts.csswg.org/css-page/#margin-text-alignment).

mstensho commented 4 months ago

FYI: I just filed issue #10421 regarding how the default placement (text-align and vertical-align) isn't very useful for vertical writing modes.