Tiskové styly v CSS 0

V minulém článku jsem nakousl jednu drobnost, která se může hodit při vytváření tiskových stylů: vložení URL za odkaz při tisku. Nedalo mi to a ten stylopis, na kterém jsem pracoval, jsem dotáhnul až do konce. Své postřehy s tvorbou tiskových stylů si pro sebe i pro vás vypíšu přehledně tak, abych vytvořil checklist pro tiskové styly, který by vám měl zajistit funkční a přístupné stránky k tisku.

Zavedení tiskových stylů

Jak? Jednoduše. Přidat vedle běžného stylu tiskový je otázka zkopírování link tagu a přidání atributu media.

<link rel="stylesheet" type="text/css" media="print" href="print.css">

Barvy a fonty

Moje či vaše webové stránky mohou být černé či modré, červené nebo zelené. Pro papír je ale lepší se držet klasické bílo-černé kombinaci (konkrétně černý text, bílé pozadí).

Na papíru se čtou lépe serifové fonty než sansserifové a také neškodí vyresetovat velikost písma.

body {
  background: #fff;
  color: #000;
  font-family: serif;
  font-size: 100%;
}

Šířka obsahu

U fixních layoutů máte obsahový div nastylovaný s pevnou šířkou v pixelech. Pixely jsou pro web super a vždy vám dají očekávaný výsledek, u papíru, pro kterého je stránka k tisku určena tomu tak ale není. Vždy je lepší odstranit horizontální dělení a nechat prohlížeč, aby text “rozlil do stránky” podle zvoleného zarovnání textu.

body {
  width: 100%;
}
#content, #obsah {
  width: auto;
  float: none;
}

Používejte width: auto; nebo šířku v procentech pro všechny blokové elementy s obsahem.

Skrýt nepotřebný obsah

Typická situace, kdy si uživatel bude tisknout vaší stránku je taková, kdy bude potřebovat její obsah, tedy text. Navigační prvky jako menu, patičku, do jisté míry hlavičku nebo třeba seznam odkazů můžete s klidem ze stránky vyhodit a nic se nestane. Naopak uživatel bude mít na papíře pouze ty informace, které potřebuje.

#menu, #nav, #footer, #links {
  display: none;
}

Odkazy

O odkazech jsem mluvil již v předchozím článku.

Print-only prvky

Pro verzi stránky k tisku může být dobré přidat komentář, který počítá s tím, že ho uživatel bude číst na papíře. Může jít o zprávu typu “Toto je verze stránky pro tisk. Pro další odkazy a články navštivte nás na ….”, poděkování za přečtení článku nebo jen drobný easter-egg pro uživatele se zajímavou hláškou.

Jednoduše si na stránce vytvořte div s třídou .print-only a v tiskovém stylu jí nastavte display: block; a v normálním display: none;

(Ne)zalamování textu

Pokud máte na stránce obsah, u kterého chcete, aby se zobrazoval na další stránce, opět pomůže CSS:

#comments {
  page-break-before: always;
}

Zde konkrétně pro sekci s komentáři. Uživatel si tak může vybrat, jestli si vytiskne pouze první stránky s textem a nebude se mu tam míchat sekce s komentářema, anebo jestli chce vytisknout úplně všechno. Pomocí zalomení mu zjednodušíte omezení rozsahu tisku.

Dejte si také pozor, abyste nevyresetovalo nezalamování po nadpisech. Ve výchozím ostylování HTML prvků tato definice už je, umět jí definovat explicitně je ale plus pro každého kodéra:

 h1, h2, h3, h4, h5, h6 
{
  page-break-after: avoid;
}

Nestane se vám tak už, že by na konci jedné stránky byl nadpis a na začátku druhé první odstavec.