![]() ![]() Yay! Why rely on the browser’s print functionality at all when there’s jsPDF and similar libraries? Nothing’s stopping you from using the * selector here, but think twice before doing so – users who actually print on paper might be disgruntled if you do (but ink salesman will worship you during their secret rituals).Īccording to, the feature is understood by all major browsers. This exact mode also disables some browsers’ adjustment of low-contrast elements in print mode. Any of the following declarations will work – there’s almost certainly something for your use Inside CSS’s selector, you can specify a size property whose value determines the paper size. However, this CSS feature comes in handy when the desired paper size is known, say, in the context of markdeep-thesis where it’s configurable by the user in the source code, or for markdeep-slides, where you want precisely one slide per page, so the paper size needs to exactly match the slide aspect ratio. You shouldn’t dictate the paper size on any old website – after all, the user might have their own preference. Crucially, as of early 2021, non-Chromium-based browsers don’t allow for specifying arbitrary paper sizes with CSS – which is the first thing we’ll be looking at.Īt the end of this post, I’ll also write about other CSS features of relevance in a printing context, plus how to print to PDF using headless Chrome. ![]() In this post, I’ll be focusing on Chrome simply because of all major browsers, its printing tooling has followed web standards more closely than others’ for at least the last couple of years. Out of this plethora of options, five can be directly or indirectly controlled via CSS: Layout, paper size, Margins, Headers and footers, and Background graphics. Great for printing, but not at all what you want on your bespoke PDF! Take a gander at this badly cropped screenshot of Chrome’s Print dialogue:Ĭhrome’s Print dialogue (as it appears on a Mac in early 2021) showing a preview of, appropriately enough, David Bull’s Encyclopedia of Woodblock Printmaking, with all settings set to their defaults. (More about that at the bottom of this post.)īut browsers like to futz with your page en route to generating a PDF: With the best intentions, they add additional margins, fill them with some metadata that you don’t want on your generated document, and get rid of all the background colors. In this case, I was using a good old-fashioned Makefile to generate PDFs using a headless instance of Chrome. Similarly, markdeep-thesis, whose initial development was part of my Master’s thesis (for the purpose of typesetting it), would be pointless without solid in-browser printing.īecause I’m incorrigible 2, I’ve also formatted my personal resume and cover letter template (based on Min-Zhong John Lu’s html-resume) using HTML and CSS – impossible without confidence in the browser’s print functionality. My project markdeep-slides, which builds on top of the in-browser Markdown renderer Markdeep to enable seamless, setup-free presentation slide authoring and playback, relies on the browser’s built-in print tooling for PDF exporting. When’s the last time you’ve printed a website? If you’re anything like me, that query will return either “long ago” or some kind of NULL value 1 – but the print functionality built into modern browsers isn’t just tremendously handy for precise spilling of black water on dead wood, it can also be coerced into serving as a simple-yet-powerful export-to-PDF method for basic client-side document generators or even server-side applications. Controlling the Settings in Chrome's Print Dialogue With CSS Excessively Adequate Controlling the Settings in Chrome's Print Dialogue With CSS Posted on March 31, 2021
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |