Creating Printable Versions of Slate Dashboards

Is it possible to print Slate dashboards for offline use?

Since Slate documents are not print-friendly by default and require different styling for print media, could anyone share effective methods for generating a printable version of a Slate dashboard?

This includes considerations for concealing interactive elements (e.g., sliders, search fields), incorporating classification watermarks, and repositioning logos for the printed format.

1 Like

To ensure optimal print styles for web pages, incorporate the following CSS within your style sheets:

@media print {
  /* CSS rules for print */
}

This directive specifies styles for print media. Key considerations include:

  • Set background to white.
  • Remove box shadows from containers to avoid print artifacts.
  • Hide UI controls by setting display: none; on specific IDs or classes (e.g., .sl-toggle { display: none; }).
  • Apply overflow: visible; to scrolling containers and adjust positioning if necessary.
  • Use page-break-before: always; or page-break-after: always; to control pagination.

For a live preview of print styles in Chrome, utilize the “Emulate Print Media” feature in the developer tools.

2 Likes