Modern framework to print the web correctly.
Modern framework to print web pages correctly
Simply include the right stylesheet(s) in your html and load it only for a printer. Gutenberg.css is the base stylesheet but there are themes available in the
Example with Gutenberg and "old style" theme :
Comparison between standard print (left) and Gutenberg (middle, Modern style and right, Old style)
Gutenberg is available on npm
npm install gutenberg-css
yarn add gutenberg-cssfor yarn users)
You can also use the unpkg service as a CDN.
To hide elements to be printed you can simply add the class
Gutenberg provides two ways to break a page, the class
break-beforewill to break before and
break-afterto break after.
I will break after this paragraph
I am on a new page
To avoid the page to break "inside" an element, you can use the
I really don't want this part to be cut
If you do not want to reformat the links, acronym or abbreviation to show the full url or title, you can use the class
To force backgrounds to be printed (can be useful when you "print" a pdf), add this CSS (compatible with Safari and Chrome):
-webkit-print-color-adjust: exact; print-color-adjust: exact;
npm ito install the dependencies
npm run watchto "watch" the scss folder and compile to css
npm run buildto compile gutenberg to css