V dnešním digitálním věku je tisk webových stránek často přehlíženým aspektem webdesignu. Přestože primární interakce s webovými stránkami probíhá elektronicky, existují situace, kdy je tisk nezbytný. Ať už jde o tisk faktury, článku, nebo jakéhokoli jiného obsahu, správné nastavení CSS pro tisk zajišťuje, že výstup na papíře bude čitelný, profesionální a užitečný. V tomto článku se zaměříme na to, jak správně nastavit CSS pro tisk, abychom dosáhli nejlepších možných výsledků.
Základní principy CSS pro tisk
Při tvorbě stylů CSS pro tisk je klíčové pochopit, že cílem je maximalizovat čitelnost a užitečnost tištěného materiálu. To znamená odstranění všech prvků, které na papíře nejsou potřebné (např. navigační menu, reklamy) a zaměření se na hlavní obsah.
1. Vytvoření samostatného CSS souboru pro tisk
Nejprve je doporučeno vytvořit samostatný CSS soubor určený výhradně pro tisk. Tento přístup usnadňuje správu a údržbu stylů. Do HTML dokumentu jej pak vložíte následovně:
<link rel="stylesheet" type="text/css" href="/print.css" media="print">
Atribut media="print" zajistí, že se tento styl použije pouze při tisku stránky.
2. Optimalizace layoutu pro tisk
Při přípravě layoutu pro tisk je důležité zvážit šířku stránky. Většina obsahu webových stránek je navržena pro zobrazení na širokoúhlých monitorech, ale papír má jiné proporce. Přizpůsobte šířku obsahu tak, aby odpovídala standardní šířce papíru, a zároveň zanechejte dostatečné okraje pro lepší čitelnost.
@media print {
body {
width: 100%;
margin: 0;
padding: 0;
font-size: 12pt;
}
}
3. Skrytí nežádoucích prvků
Některé prvky, které jsou užitečné na obrazovce, mohou být při tisku zbytečné. Použijte CSS k jejich skrytí:
@media print {
.navigace, .reklama, .footer {
display: none;
}
}
4. Úprava fontů a barev
Pro tištěný obsah preferujte temnější fonty na světlém pozadí, což zvyšuje kontrast a čitelnost. Barevné obrázky a pozadí mohou způsobit, že tisk bude náročnější na černobílých tiskárnách, proto je často lepší použít škálu šedi.
@media print {
body {
color: #000;
background: #fff;
}
a, a:visited {
text-decoration: underline;
color: #000;
}
}
5. Zobrazení URL adres
Pro odkazy může být užitečné zobrazit celé URL adresy, aby byly dostupné i v tištěné formě:
@media print {
a[href]:after {
content: " (" attr(href) ")";
}
}
Použití stránkových zlomů
Správné použití stránkových zlomů může výrazně zlepšit čitelnost tištěného dokumentu. CSS vlastnost page-break-before nebo page-break-after umožňuje řídit, kde má tiskárna začít novou stránku.
@media print {
.kapitola {
page-break-before: always;
}
}
Správné nastavení CSS pro tisk znamená zohlednit specifika tištěného média a přizpůsobit styl a layout obsahu tak, aby byl v tištěné formě co nejužitečnější a nejčitelnější. S pomocí CSS media queries a specifických vlastností pro tisk lze dosáhnout vynikajících výsledků a zajistit, že vaše Webové stránky budou vypadat skvěle jak na obrazovce, tak na papíře.
