Having gone down the rabbit hole of creating printable media/pages from html/css, I also discovered paged media. Generating printable pdfs using only the standard is very cumbersome but thankfully pagedjs[1] exists, which makes this a breeze.
CSS for printing to paper
111–120 of 139 posts
Re: CSS for printing to paper
#112The problem I could not solve: page numbers that start after the title. Can't access anything about page breaks via js and CSS is very limited.
Should be doable using paged.js - https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/91
Re: CSS for printing to paper
#113CSS/html is way faster to build a lot of things for printing. It's very flexible to make changes. Not huge files like Photoshop or indesign. Printing to PDF gets you vector output. Just last week, I built a print ad for a local visitor bureau placement. Pretty much anything I need for a high-quality print job, I use html/css.
If that's all you know, it can be a reasonable alternative. But for most professional print use-cases it's woefully inadequate. Starting from the awkward box model for layout, down to the very bare-bones typography support.
Re: CSS for printing to paper
#114Earlier quoted context omitted.
Not sure how those got in there and git-blame is not helpful. Maybe just me typing out as many as I could imagine? :v No h1 because there is only ever one of those and it's at the top of the first page.
Thanks :-)
While they're not valid, I believe the browser will still respect non standard headings. The browser will treat them like non semantic elements (similar to a div), but you can kind of make it legit with a couple different aria attributes. I would recommend staying within the standard heading sizes though.
Re: CSS for printing to paper
#115Re: CSS for printing to paper
#116Haha one of the examples has this text: By reading this sentence, you hereby agree to all terms and conditions presented by voussoir.net, including but not limited to terms which entitle voussoir.net to a fraction not less than forty (40) percent (%) of your monthly income from now until an as-yet undetermined time not less than thirty six (36) months from the present date.
One of the other examples [0] features a "random number" which might not be entirely random [1].
[0] https://voussoir.net/writing/css_for_printing/#media_print
[1] https://en.wikipedia.org/wiki/AACS_encryption_key_controvers...
Re: CSS for printing to paper
#117Re: CSS for printing to paper
#118Earlier quoted context omitted.
Wow, great use of the attr function, thank you!
If the anchor tag already has the URL as text, then will the URL be printed twice? Like if I've got https://www.google.com/ Will it print like this? https://www.google.com (https://www.google.com)
Based on the above, yes.
Re: CSS for printing to paper
#119Browser support for printing CSS is spotty. Worse: some features, like footnotes on every page, don't have any equivalent in CSS I know of. Is there any easy to use/hack HTML layouting engine where I could experiment with custom CSS attributes and bridge that gap? Would anything from Servo be suitable? Modifying an entire browser with its bloat is too much effort. There is no JS or cookies on paper (they can be in pa…
You don't have to use a browser . I had very good results with Weasyprint [0]. And there's also PrinceXML [1] if you're willing to pay. [0]: https://weasyprint.org/ [1]: https://www.princexml.com/
PrinceXML is expensive but I feel it's worth the money. I've used it to layout several RPGs with Markdown source files and HTML and CSS for templates and styling. RPG layouts can be quite complex with stat blocks and the like and it's handled everything I've thrown at it.
Re: CSS for printing to paper
#120A few of my favorite print styles, from my personal site: h2,h3,h4,h5,h6,h7,h8 {break-after: avoid-page;} img, svg, table, canvas {break-inside: avoid;} a::after {content: " (" attr(href) ")";} Explanation: - Avoid printing section headers at the bottom of one page with the section content left headerless at the top of the next page. - Prefer printing graphics and figures on whole pages instead of split across pages.…
This is useful, but note that with `table {break-inside: avoid;}`, if there are tables longer than the page, the browser will add a break before it, and that could be not desirable.
I have used, too:
footer {
page-break-inside: avoid;
}
summary {
page-break-after: avoid;
}
body {
min-width: 992px;
}
- I usually don't want to break the page footer.
- Similar to headings, usually it is not desirable to produce a break after the summary element (for details element). If the details elements are never longer than the page, `details {break-inside: avoid;}`can be useful.
- Avoids rendering the mobile version of a page