Použití CSS pro zalomení stránky na tiskárně 1.

V poslední době nalézám v různých webových a emailových konferencích spoustu dotazů na to, jak vytvořit webovou stránku, u které bude možné nadefinovat jednotlivé tiskové strany při výstupu na tiskárnu. Tento článek vám poradí, jak na to.

Některé vlastnosti kaskádových stylů CSS určené pro zalomení stránky nám umožňují definovat část webové stránky, která se při výstupu na tiskárnu zalomí na další papírovou stranu. Pomocí CSS tak můžete u vašich HTML dokumentů zajistit, aby se například začátek kapitoly nebo třeba nadpis první úrovně (<H1>) objevil vždy na úplně nové tiskové stránce anebo zabránit tomu, aby se nějaký, třeba ilustrační obrázek nevložil hned na začátek dokumentu atd.

Pro výše zmíněné zalamování webové stránky při tisku byly vytvořeny v CSS následující vlastnosti:

• page-break-inside
• widows
• orphans

U každé z těchto vlastností je možno použít několik hodnot, které způsobí, že buď se stránka pokaždé zalomí při tisku anebo že se zalomí pouze za specifických podmínek, které je možné nadefinovat.

Velmi jednoduchý příklad na úvod

Máme tento jednoduchý a krátký HTML kód s definicí CSS:

V tomto jednoduchém a doufám, že také výstižném příkladě (který si můžete zkopírovat a vyzkoušet na „vlastní kůži“), jsem definoval na odstavec s třídou „zalomeni“ vlastnost page-break-after hodnotu always, která způsobí, že jakmile odstavec skončí, další text na stránce se při tisku objeví na další stránce. Velmi snadné, souhlasíte? Pojďme si teď postupně vysvětli jednotlivé vlastnosti a hodnoty, které je možné použít:

Vlastnost page-break-after

Jak již název vlastnosti napovídá, tisková stránka se může zalomit ihned poté, co skončí platnost elementu na který byla tato vlastnost aplikována. Pokud tedy tuto vlastnost použijeme na nadpis <H1>, stránka se zalomí ihned poté, co nadpis skončí (</H1>).

U této vlastnosti je možné použít následující hodnoty:

• auto
• avoid
• always
• left
• right

Hodnota „auto“ říká prohlížeči, že zalomení tiskové strany za daným elementem nemusí být ani zakázano a ani vynuceno. Hodnota „avoid“ říká, že za elementem je zalomení stránky vždy potlačeno, hodnota „always“ naopak říká, že za elementem vždy následuje zlom stránky. Hodnota „left“ říká, že je vloženo jeden nebo více zlomů stránky tak, aby se obsah za daným elementem objevil na sudé (levé) straně. Hodnota „right“ dělá totéž, až na to, že obsah za daným elementem se objevuje na liché (pravé) straně.

Vlastnost page-break-before

Hodnota page-break-before je velmi podobná vlastnosti page-break-after, jenom s tím rozdílem, že stránka se může zalomit před daným elementem. Pokud vezmeme náš první ukázkový příklad a vyměníme vlastnosti:

Pak při tisku stránky zjistíme, že odstavec, na který byla aplikována třída „zalomení“, začne na nové tiskové stránce, protože vlastnost page-break-before s hodnotou „always“ zalomí stránku před tímto odstavcem. Logicky tak i třetí odstavec se objeví na druhé tiskové straně. U této vlastnosti je možné použít stejné hodnoty jako v minulém případě. Hodnota „auto“ říká prohlížeči, že zalomení tiskové strany před daným elementem nemusí být ani zakázáno a ani vynuceno. Hodnota „avoid“ říká, že před elementem je zalomení stránky vždy potlačeno, hodnota „always“ naopak říká, že před daným elementem vždy následuje zlom stránky. Hodnota „left“ říká, že je vloženo jeden nebo více zlomů stránky tak, aby se obsah před daným elementem objevil na sudé (levé) straně. Hodnota „right“ dělá totéž, až na to, že obsah před daným elementem se objevuje na liché (pravé) straně.

Tyto dvě vlastnosti jsou podporovány od Internet Exploreru 5.0 (vyzkoušeno). Dané vlastnosti by také měly být podporovány Netscape Navigátorem 6 a Mozillou (nevyzkoušeno). Opera v5.12 je nepodporuje (vyzkoušeno).

V dalším článku si vysvětlíme zbývající tři vlastnosti užitečné pro zalamování stránky. Přeji vám pěkný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.