Gutenberg Framework

Demonstration

Print (or use the print preview) to see the result with Gutenberg.

Utils

Hide elements

To hide elements to be printed you can simply add the class no-print.

Force break page

Gutenberg provides two ways to break a page, the class page-break-before will to break before and page-break-after to break after. Example:

<!-- The title will be on a new page -->
<h1 class="break-before">My title</h1>

<p class="break-after">I will break after this paragraph</p>
<!-- Break here, the next paragraph will be on a new page -->
<p>I am on a new page</p>

Avoid break inside

To avoid the page to break "inside" an element, you can use the avoid-break-inside class.

Not reformat links or acronym

If you do not want to reformat the links, acronym or abbreviation to show the full url or title, you can use the class no-reformat.

Force to print background

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;