{"id":10748,"date":"2023-08-30T14:43:50","date_gmt":"2023-08-30T12:43:50","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=10748"},"modified":"2023-08-30T14:43:54","modified_gmt":"2023-08-30T12:43:54","slug":"my-little-printer-friendly-css","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2023\/08\/30\/my-little-printer-friendly-css\/","title":{"rendered":"My little printer-friendly CSS"},"content":{"rendered":"\n

Here is my little “Printer friendly CSS” that I add to each and every page using Simple Custom CSS and JS<\/a> <\/p>\n\n\n\n

\/* override styles when printing *\/\n@media print {\n\t@page {\n\t\tmargin: 2cm; \n\t\t@top-center {\n\t\t\tfont-family: sans-serif;\n\t\t\tfont-weight: bold;\n\t\t\tfont-size: 2em;\n\t\t\tcontent: counter(page);\n\t\t}\n\t}\n\t\/* target the first page only *\/\n\t@page :first { margin-top: 6cm; }\n\t\/* target left (even-numbered) pages only *\/\n\t@page :left { margin-right: 2cm; }\n\t\/* target right (odd-numbered) pages only *\/\n\t@page :right { margin-left: 2cm; }\n\t\n\t\n\tbody {\n\t\tfont-size: 16pt;\n\t\tline-height: 1.2;\n\t\t\/*margin: 1cm;*\/\n\t\tcolor: #000;\n\t\tbackground-color: #fff;\n\t\tborder: 1mm black;\n\t}\n\t\/* header, *\/\n\tfooter, aside, nav, form, iframe, .menu, .hero, .adslot, .header-bottom, .site-header, .header-middle {\n\t\tdisplay: none;\n\t}\n\t\n\th2.entry-title {\n\t\tfont-size: 32pt;\n\t}\n\t\n\t\/* page breaks before main header *\/\n\th1 {\n\t\tbreak-before: page; \n\t}\n\t\/* don't break tables and pictures*\/ \n\ttable, img, svg {\n\t\tbreak-inside: avoid;\n\t}\n\t\n\t\/* avoid too small text *\/\n\tbody,p {\n\t\tfont-size: 16pt;\n\t\tline-height: 1.2;\n\t}\n\tarticle {\n\t\twidth: 100%;\n\t\t\/* no columns please \n\t\t** column-width: 19cm;\n\t\t** column-gap: 0.5cm;\n\t\t*\/\n\t}\n\t\n\t\/* no background images *\/\n\t* {\n\t\tbackground-image: none !important;\n\t}\n\t\n\t \/* styling links *\/\n\ta {\n\t\tfont-size: 80%;\n\t}\n\ta::after {\n\t\tcontent: " (" attr(href) ")";\n\t\toverflow-wrap: break-word;\n\t}\n\t\n\t\n\t\/* don't display unimportang pictures *\/\n\t\/* img, svg {\n\t**\tdisplay: none !important;\n\t** }\n\t*\/\n\t\n\t\/* make picture big *\/\n\timg.print, svg.print {\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n\t\n\t\/* don't show comments *\/\n\t#comments {\n\t\tdisplay: none;\n\t}\n\t\n\t\/* don't show tables of contents *\/\n\t.wp-block-uagb-table-of-contents, .advgb-toc {\n\t\tdisplay: none;\n\t}\n}<\/code><\/pre>\n\n\n\n
I use it with News-box<\/a> theme but it should work fine with any other “pretty modern” theme.<\/p>\n\n\n\n
 I started reading How to Create Printer-friendly Pages with CSS<\/a> (local copy) <\/p>\n","protected":false},"excerpt":{"rendered":"
Here is my little “Printer friendly CSS” that I add to each and every page using Simple Custom CSS and JS I use it with News-box theme but it should work fine with any other “pretty modern” theme. I started reading How to Create Printer-friendly Pages with CSS (local copy)<\/p>\n
Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[278,61],"tags":[353,352],"class_list":["post-10748","post","type-post","status-publish","format-standard","hentry","category-tricks","category-wordpress","tag-comments","tag-fff"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-2Nm","jetpack-related-posts":[{"id":4923,"url":"https:\/\/monodes.com\/predaelli\/2018\/11\/17\/css-the-perfect-print-stylesheet-the-jotform-blog\/","url_meta":{"origin":10748,"position":0},"title":"CSS: The Perfect Print Stylesheet | The JotForm Blog","author":"Paolo Redaelli","date":"2018-11-17","format":false,"excerpt":"Here's something I shall add to my themes, expecially \"bollettino\" and \"qualita\": CSS: The Perfect Print Stylesheet | The JotForm Blog CSS: The Perfect Print Stylesheet by Andreas Hecht Even today, there are still many people that want to print out the entire internet. This can have many reasons. Maybe\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"a4-print","src":"https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":11412,"url":"https:\/\/monodes.com\/predaelli\/2024\/03\/05\/css-for-printing-to-paper\/","url_meta":{"origin":10748,"position":1},"title":"CSS for printing to paper","author":"Paolo Redaelli","date":"2024-03-05","format":false,"excerpt":"CSS for printing to paper I do like articles explaining how to use CSS for printing! CSS for printing to paper Introduction Sample files @page @media print Width, height, margin, and padding Element positioning Multi-page documents with repeating elements Portrait \/ Landscape mode Data source Essentials cheatsheet Introduction At work,\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9530,"url":"https:\/\/monodes.com\/predaelli\/2022\/08\/03\/how-to-create-printer-friendly-pages-with-css\/","url_meta":{"origin":10748,"position":2},"title":"How to Create Printer-friendly Pages with CSS","author":"Paolo Redaelli","date":"2022-08-03","format":"link","excerpt":"How to Create Printer-friendly Pages with CSS How to Create Printer-friendly Pages with CSS CSS Craig BucklerJanuary 5, 2020 Share This article was updated in 2020 to reflect latest best practices in CSS print styling. In this article, we review the art of creating printer-friendly web pages with CSS. \u201cWho\u2026","rel":"","context":"In "Web"","block_context":{"text":"Web","link":"https:\/\/monodes.com\/predaelli\/category\/web\/"},"img":{"alt_text":"Firefox print preview mode","src":"https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925121printer-friendly-css-05-firefox.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925121printer-friendly-css-05-firefox.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925121printer-friendly-css-05-firefox.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":6313,"url":"https:\/\/monodes.com\/predaelli\/2019\/12\/12\/comicbook-inspired-hand-drawn-borders-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80\/","url_meta":{"origin":10748,"position":3},"title":"Comicbook Inspired Hand Drawn Borders \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40","author":"Paolo Redaelli","date":"2019-12-12","format":false,"excerpt":"Comicbook Inspired Hand Drawn Borders \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 \u00a0 Here are some pure CSS borders that looks like it was pulled from a comic book, it has got that distinct hand-drawn look and feel to it. If you are going for a comic book inspired layout for your page you will\u2026","rel":"","context":"In "Themes"","block_context":{"text":"Themes","link":"https:\/\/monodes.com\/predaelli\/category\/themes\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6310,"url":"https:\/\/monodes.com\/predaelli\/2019\/12\/12\/hand-drawn-border-buttons-in-css-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80\/","url_meta":{"origin":10748,"position":4},"title":"Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40","author":"Paolo Redaelli","date":"2019-12-12","format":false,"excerpt":"Hand-Drawn Border Buttons in CSS From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 I know I will try this style sooner or later in a WordPress theme, eventually coupled with a old-style typewriter font. Hand-Drawn Border Buttons in CSS From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 I know I\u2026","rel":"","context":"In "Themes"","block_context":{"text":"Themes","link":"https:\/\/monodes.com\/predaelli\/category\/themes\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5529,"url":"https:\/\/monodes.com\/predaelli\/2019\/04\/30\/58-bytes-of-css-to-look-great-nearly-everywhere\/","url_meta":{"origin":10748,"position":5},"title":"58 bytes of css to look great nearly everywhere","author":"Paolo Redaelli","date":"2019-04-30","format":"link","excerpt":"58 bytes of css to look great nearly everywhere when making this website, i wanted a simple, reasonable way to make it look good on most displays. not counting any minimization techniques, the following 58 bytes worked well for me: main { max-width: 38rem; padding: 2rem; margin: auto; } let's\u2026","rel":"","context":"In "Documentations"","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/10748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=10748"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/10748\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=10748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=10748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=10748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}