Test tiskových stylů (pro ověření je nutné použít tiskový náhled!)


Stránka by měla být v tiskovém náhledu s orientací na šířku, nastaveno pravidlem @page (podpora jen v Opeře 9).

<style type="text/css">
    <!--
    @page {size: landscape}
    -->
</style>
První stránka by měla mít v tiskovém náhledu levý a pravý okraj 4cm, horní a dolní 1cm, ostatní stránky levý a pravý okraj 2cm, horní a dolní 3cm. Nastaveno pravidlem @page a @page :first (podpora jen v Opeře 9).

<style type="text/css">
    <!--
    @page :first {margin: 1cm 4cm}
    @page {margin: 3cm 2cm}
    -->
</style>

Tento text by měl být v tiskovém náhledu zobrazen modře, nastaveno pravidlem @media print. Funguje všude, překvapivě i v IE, kde podobné pravidlo @import v syntaxi se specifikací typu výstupního zařízení nefunguje (viz tato testovací stránka).

<style type="text/css">
    <!--
    @media print {
    p { color:blue }
    }
    -->
</style>


Tento obrázek by v tiskovém náhledu neměl být zobrazen, v deklaraci @media je vypnuto zobrazování obrázků vlastností display:none (všude OK).

grafika.gif(12 kb)

<style type="text/css">
    <!--
    @media print {
    img {display:none}
    }
    -->
</style>
Nadpis pod tímto textem by měl být černý (při tisku bude díky pevnému zalomení stránky vlastností page-break na straně druhé), ale tentýž nadpis na horním okraji stránky (při tisku na straně první) modře. Nastaveno pravidly page-break-before resp. page-break-after a @page :first, zalomení funguje dobře všude, obarvení nadpisu nefunguje nikde.

<style type="text/css">
    <!--
    h3.break {page-break-before: always; /* vždy se zalomí před h3 s třídou break */
              page-break-after: avoid    /* nikdy se nezalomí za h3 s třídou break */
    }

    @page :first {h3 {color:blue}}
    -->
</style>

<h3 class="break"> ... text ... </h3>

Test tiskových stylů (pro ověření je nutné použít tiskový náhled!)


Poslední aktualizace: , pepe © 2006