Ein Print-Layout mit Bootstrap 4
Bootstrap 4 bringt einige Funktionen mit, um Layouts von Webseiten für das Drucken fit zu machen. So werden z.B. Navigationen standardmäßig im Print-Layout ausgeblendet. Es lassen sich aber auch beliebig alle anderen Elemente aus- oder einblenden.
Bootstraps Dokumentation1 dokumentiert dieses Feature.
Elemente ausblenden
Das Ausblenden könnte nicht einfacher sein. Es reicht das Hinzufügen einer einzigen CSS-Klasse.
<div class="d-print-none">
...
</div>
Zusätzliche Tweaks
Mit den Klassen, die Bootstrap anbietet lässt sich enormer Einfluss auf das Browserverhalten des Print-Layouts nehmen. Ich brauchte für meinen eigenen Blog aber noch ein paar kleine zusätzliche Tweaks.
@media print {
.print-hide-background {
background-image: none !important;
background-color: transparent !important;
}
.print-page-break-after {
page-break-after: always;
}
.print-page-break-before {
page-break-before: always;
}
.print-color-black {
color: black !important;
}
code, pre {
border: none !important;
}
}
Mit .print-hide-background
lassen sich Hintergrundbilder und Farben entfernen. Das spart Tinte.
.print-page-break-after
und print-page-break-before
fügt einen Seitenumbruch in der Druckansicht ein. Das Layout auf den Seiten kann so bei z.B. Überschriften sauberer Verteilt werden, wenn man einen längeren Text geschrieben hat.
.print-color-black
kann genutzt werden um helle Schriften dunkel zu machen.
Fazit
CSS eignet sich hervorragend um aus einer Webseite beim Drucken einen schönen, aufgeräumten Text auszudrucken. Bootstrap nimmt einem einiges an Arbeit ab. Probiert es einfach aus. STRG + P und sehen was passiert.
-
Bootstraps Display in Print — https://getbootstrap.com/docs/4.1/utilities/display/#display-in-print ↩