- From: Morten Stenshorne via GitHub <sysbot+gh@w3.org>
- Date: Thu, 19 Dec 2024 13:19:06 +0000
- To: public-css-archive@w3.org
mstensho has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-page][css-env] Expose unprintable areas via CSS ==
Most printers have a small region along each edge of the page sheet which is unprintable, due to the printer's paper handling mechanism. See https://drafts.csswg.org/css-page-3/#page-terms
The size of these unprintable areas are available to applications (such as browsers) in most OSes, but currently it's not web-exposed.
This means that authors have no means of confidently setting page margins to prevent content (inside a page margin box, or even inside the page area) from getting clipped.
Maybe we could use env() variables for this? https://drafts.csswg.org/css-env-1/#safe-area-insets seems to be exactly what we need, in a way, although the spec currently says that "[f]or rectangular displays, these must all be zero". Furthermore, some printers have non-uniform unprintable area widths. For instance, my old HP deskjet had an unprintable area of about 1.5cm at the bottom (which is huge, and more than a typical margin), but more reasonable widths on the other three sides (3 millimeters or less). The problem with this non-uniformity is that the values are relative to the direction the sheet of paper travels through the printer, as far as I understand, and the application has no way of telling whether the printer is going to rotate what it receives from the application. E.g. if the page has landscape orientation (e.g. `@page { size: landscape; }`, and the printer is fed with the short edge first (aka portrait), it will have to rotate it. But will it be 90 or 270 degrees? Up to the printer. If the printer can print on both sides, it may also be rotated.
So the only safe thing seems to be: use the larger of all those unprintable area widths - i.e. just one env() variable for this?
Let's pretend it's called `env(unprintable-area-width)` for now:
```css
<!DOCTYPE html>
<style>
@page {
margin: calc(env(unprintable-area-width) + 50px);
margin-bottom: calc(env(unprintable-area-width) + 50px);
margin-left: calc(env(unprintable-area-width) + 50px);
margin-right: calc(env(unprintable-area-width) + 50px);
@top-center {
content: "";
border: solid;
margin-top: env(unprintable-area-width);
}
@bottom-center {
content: "";
border: solid;
margin-bottom: env(unprintable-area-width);
}
@right-middle {
content: "";
border: solid;
margin-right: env(unprintable-area-width);
}
@left-middle {
content: "";
border: solid;
margin-left: env(unprintable-area-width);
}
@top-left-corner {
content: "";
width: 30px;
height: 30px;
border: solid;
margin-bottom: auto;
margin-right: auto;
}
@top-right-corner {
content: "";
width: 30px;
height: 30px;
border: solid;
margin-bottom: auto;
margin-left: auto;
}
@bottom-right-corner {
content: "";
width: 30px;
height: 30px;
border: solid;
margin-top: auto;
margin-left: auto;
}
@bottom-left-corner {
content: "";
width: 30px;
height: 30px;
border: solid;
margin-top: auto;
margin-right: auto;
}
}
</style>
Content.
```
If there's no unprintable area (when creating a PDF, for example), it would look like this:
If the unprintable area width is 16px, on the other hand, it would result in a print layout like this:
On paper it would look like this (if the printer doesn't lie too much about its capabilities):
Thoughts? @fantasai @tabatkins @rachelandrew
One concern is printers with large unprintable areas (such as my old HP deskjet with 1.5cm at the bottom), resulting in unreasonably large page margins if they are affected by `env(unprintable-area-width)`.
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11395 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 19 December 2024 13:19:07 UTC