Print styles

This page helps to understand how built-in print styles behave in Digigov CSS.

When to use

Since we’re still far from the reality of a paperless world, users often need to print in paper any user interface that exists online in a GOV.GR service. Doing so means they can store their documents in a physical form for later use or reference. They might also feel a lot safer that their transaction are complete, especially if they are not familiar with the digital world.

We need to handle the case of printing a Web page and make sure that the print version of each page or document is readable, and that we don’t cause a user to print out unnecessary color sections and huge images thus spending more on ink and paper. It is important to keep in mind that the cheapest ink to print is the black one and consider reducing color as much as possible.

How to use

Digigov CSS already provides the govgr-print-hidden CSS class right out of the box that you can use to hide certain elements showing up in print.

For example, buttons are printed by default but it is recommended to avoid this. To completely hide this element in print, you can combine these classes.

<button class="govgr-btn govgr-btn-primary govgr-print-hidden">
  Συνέχεια
</button>

Apart from the fact that you can manually hide elements, you don't have to do anything else to make a page view print-friendly, hiding unwanted background colors, borders, and other styling, Digigov CSS has already taken care of everything.

The Digigov CSS also offers the govgr-print-visible-block and govgr-print-visible-inline CSS classes if you wish to display something that is by default hidden while printing.

Finally, when in print mode, layout formation adjusts accordingly by moving side bars to the bottom, getting all tabs and accordions to reveal their content, displaying the url that links lead to and any other adjustment deemed necessary to provide a better printed layout.