Odlišné formátování tisku

CSS umožňují, aby se vzhled stránky na obrazovce a v tiskárně odlišoval.

Media=print - Příklad - Alternativní zápisy - Podpora prohlížečů - Výhody - Zalomení stránky - Tisk naležato - Tisk pozadí - Snadné experimenty

Media=print

Uvedu-li v tagu <style> atribut media s hodnotou print, říkám tím, že se instrukce tohoto stylopisu budou vztahovat jenom na tisk.

<style media="print">
/* zápis stylu */
</style>

Existují i jiné možné hodnoty atributu media, například screen pro monitor, page pro papírovou stránku. Avšak kromě hodnoty print se to kvůli slabé podpoře moc nepoužívá.

Možných hodnot u media je spousta, nejen media="print". Další hodnoty najdete v přehledu @media pravidla v CSS, ale tady přednostně řeším tisk.

Příklad

<html><head><title>Pokus s media=print</title>
<style media="print">
    p {font-style: italic}
</style>
</head>
<body>
    <p>Tento text bude na monitoru zobrazen normálním stojatým písmem, ale při tisku vyleze kurzívou.</p>
</body></html>

Nevěříte? Inu, než jsem si tenhle příklad vytisknul, taky jsem nevěřil.

Alternativní zápisy

Vztahuje-li se k tisku celý externí stylopis odkazovaný tagem <link rel=stylesheet>, prostě se také přidá media=print, stejně jako do <style>:

<link rel=stylesheet href="někam.css" media="print">

Oproti tomu pokud chci nějaký styl přiřadit všem médiím, mohu použít hodnotu all, která je ale výchozí:

<link rel=stylesheet href="někam.css" media="all">

@Media

V praxi častěji nastává, že chci pro tisk určit část stávajícího stylopisu nebo když styl zadávám přímo. Pak musím využít formule @media print.

<style>
p {color: blue}/* Normální stylopis */
@media print {
p {text-indent: 10%}
}

/* Pokračování normálního stylopisu*/
</style>

Určitě jste si všimli syntaxe, která spočívá v použití dalších složených závorek, které ohraničují styl určený pro tisk.

Dříve se to dalo použít i v přímém stylu, tento zápis ale v moderních prohlížečích nefunguje:

<p style="@media print{ text-indent: 10% }">Text odstavce.</p>

Podpora prohlížečů

Výše popsané postupy fungovaly ve všech prohlížečích už kolem roku 2002. Můžete si to zkusit na příkladu, v němž využívám všechny postupy.

Výhody odlišného tisku

Někdy se to může hodit. Napadá mě pár příkladů:

Určitě vymyslíte mnoho veselých použití. Zejména si lze vyhrát s třídami a identifikátory.

Zalomení stránky

CSS2 nabízí celou kolekci nových vlastností, které mají ovlivňovat tištěný výstup. Dnes jsou do moderních prohlížečů zabudovány vlastnosti určující zalomení stránek.

Css vlastnosti řídící lámání stránek
Vlastost Význam Hodnoty
page-break-before zalomení stránky před elementem always | auto | right | left | avoid
page-break-after zalomení stránky po elementu
page-break-inside zalomení stránky v elementu (např. mezi řádky odstavce) auto | avoid

Hodnota avoid ale v prohlížečích u page-break-before a page-break-after nefunguje.

Hodnoty page-break-before a page-break-after
Hodnota Význam Poznámka
always zalomení vždy Jediná rozumně použitelná hodnota
auto normálně Jako by se nic nezadalo
right nová pravá stránka u tisku, v němž jsou rozlišovány pravá a levá stránka
v některých prohlížečích implementováno chybně jako always
left nová levá stránka
avoid nikdy nelámat v prohlížečích nefunguje

Přikazování zalomení (hodnotou always) před nadpisem se může hodit, pokud nechcete šetřit papírem a chcete, aby kapitola uvedená nadpisem H2 vždy začínala na nové stránce.

h2 {page-break-before: always;}

Avoid v prohlížečích nefunguje

V praxi bych považoval za nejužitečnější zakázání zalomení po nadpisech, např:

h2 {page-break-after: avoid}

čímž by se zabránilo nepříjemnému efektu, kdy stránka končí nadpisem a následující text (patřící k nadpisu) je až na jiné vytištěné stránce. Výše zmíněný zápis by vedl k tomu, že se nadpis na konec stránky necpe, nechá předchozí stránku končit kouskem prázdného místa, ale raději se rovnou přesune na následující stránku nahoru před svůj text.

Nic z toho ale v prohlížečích nefunguje (2022). Moje pokusy to říkají. Liším se v tom s Caniuse, která tvrdí, že to funguje. Můj test break-after a break-inside.

Page-break-inside brání rozdělení prvků na stránky

Page-break-inside: avoid je skvělý způsob, jak nedovolit některému obsahu nechat se při tisku roztrhat na více stránek. Typicky obrázkům a tabulkám. V roce 2022 už funguje.

Alternativou k page-break-inside je vlastnost break-inside, která funguje úplně stejně, jen je obecná. Funguje i ve sloupcové sazbě.

Vdovy a sirotci

Kdo se vyznáte v typografii, víte, že není dobré, když se samostatný řádek vytiskne na jiné stránce než zbytek odstavce. Posledním řádkům odstavce vytištěným na nové stránce se říká vdovy (widows) a prvním řádkům odstavce vytištěným na konci stránky se říká sirotci (orphans). V CSS lze takovým jevům zabránit. Typicky tím, že osamělé řádky z konce stránky přesunou na novou.

Existují na to vlastnosti orphans a widows. Je celkem fajn nastavit, aby u

Bránit vdovám a sirotům lze i ve vícesloupcovém layoutu (column-count).

Tisk naležato

Po mnoha letech, kdy se na šířku nedalo tisknout, už mi v roce 2022 funguje tento zápis:

@page {size: landscape}

Jak vidíte, selektor je @page, tedy celý tiskový stránkovaný dokument. Size určuje orientaci celého dokumentu. Všechny stránky se tedy budou vytisknout na šířku. Určit, že jedna stránka se vytiskne na šířku a jiná na výšku, neumím.

Pamatuji si, že tisk na šířku byl vždycky komplikovaný. Size: landscape fungovalo nespolehlivě, nebo jen v kombinaci s nějakými zlými triky typu writing-mode nebo transform. Krom vlastnosti size jsem vídal i příklady s orientation: landscape, ale ty mi nefungovaly.

Pomocí @page {size: A5} lze také nastavovat velikost papíru. Doporučuji s tím ale experimentovat velmi opatrně, neboť to pak ne každá tiskárna pochopí.

Tisk pozadí

Normálně se pozadí netiskne. Barva ani obrázek.

Základní předpoklad je, že si o tisku pozadí má rozhodnout uživatel sám. V Chrome se tisk pozadí nastavuje až při tisku. Při vyvolání dialogu Tisk (Ctrl+P) se vlevo objeví Další nastavení a tam si uživatel může nastavit tisk "Grafika na pozadí".

Existuje ale způsob, jak tiskárnu donutit u určitého prvku (nebo celé stránky) tisknout barvu pozadí nebo obrázek na pozadí. I bez uživatelského zásahu. Je na to CSS vlastnost, která přednastaví volbu tisku grafiky:

-webkit-print-color-adjust: exact;
print-color-adjust: exact;

Podporu to má slušnou, ale musí se prefixovat pro Webkit (ten je dneska (2022) skoro všude) jen Safari a Firefox respektují neprefoxovaný zápis. Druhá, výchozí hodnota vlastnosti je print-color-adjust: economy. Stará nestandardní a zavržená verze vlastnosti byla jen color-adjust bez print-.

Přesto to doporučuji nepoužívat, protože jednak plácáte lidem barvu, jednak tisk pozadí typicky znečitelní text a hlavně víte prd, jakou má uživatel tiskárnu. Může mít jehličkovou nebo černobílou, takže se barvy stejně nevytisknou. V praxi tedy použijte jen na některé prvky, u kterých víte, že je tisk pozadí důležitý, např. u mapiček apod.:

div.mapka {-webkit-print-color-adjust: exact; print-color-adjust: exact;}

Snadné experimenty: náhled

Internet Explorer, Firefox i Chrome mají náhled, který se zobrazí předtím, než se stránka pošle do tiskárny. Je to klasické zobrazení před tiskem, vyvolané například zkratkou CTRL + P. Ukazuje stránku přesně tak, jak potom vyleze z tiskárny. Podle mých zkušeností je to naprosto přesné s výjimkou tisku průhledných obrázků na postscriptových tiskárnách (průhledná barva se tiskne bíle). Takže na pokusy nemusíte plýtvat papírem.

Ještě jednodušší způsob spočívá v tom, že si po dobu ladění přepíšete media="print" na media="screen". Potom změny uvidíte rovnou na obrazovce. Musíte se ovšem ujistit, že máte laděné styly na konci stylopisu (aby měly prioritu) a nesmíte zapomenout to pak změnit zpátky na print.

Nejnovější famózní způsob se dá vynutit přes Web Inspector. V Chrome zmáčkněte F12 (pustí se Web Inspector), potom tři tečky nahoře v šedivé zóně > More tools > Rendering. Nakonec je tam úplně dole Emulate CSS media, přepněte na hodnotu print.

Musíte ale počítat s tím, že v takovém režimu neuvidíte konce stránek.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.