Pokud jste si někdy z webu vytiskli rezervaci letenek nebo pokyny k hotelu, výsledky vás pravděpodobně neocitly. Možná si proto neuvědomujete, že tištěné dokumenty lze stylizovat stejným způsobem jako na obrazovce pomocí kaskádových stylů (CSS).

Rozdělení obav

Klíčovou výhodou CSS je oddělení obsahu od prezentace. V nejjednodušších termínech to znamená místo velmi staromódního stylistického označení, jako například:

Nadpis

Používáme sémantické značení:

Nadpis

Je to nejen mnohem čistší, ale také to znamená, že naše prezentace je oddělena od našeho obsahu. Prohlížeče se vykreslují h1 prvky ve výchozím nastavení jako velký tučný text, ale tento styl můžeme kdykoli změnit pomocí šablony stylů:

h1 {font-weight: normal; }

Shromážděním těchto deklarací stylu do samostatného souboru a odkazem na tento soubor z našeho dokumentu HTML můžeme separaci ještě lépe využít. Šablonu stylů lze znovu použít a tento jednotlivý soubor můžeme kdykoli změnit, abychom aktualizovali formátování v každém dokumentu, který jej používá.

Včetně listu stylů tisku

Podobným způsobem, jako když zahrneme šablonu stylů obrazovky, můžeme určit šablonu stylů pro tisk. Šablona stylů obrazovky je obvykle zahrnuta takto:

Další atribut, média, umožňuje cílení na základě kontextu, ve kterém je dokument vykreslen. Ve výchozím nastavení je předchozí prvek ekvivalentní:

To znamená, že šablona stylů bude použita pro jakékoli médium, ve kterém je dokument vykreslen. Atribut média však může mít také hodnoty tisku a obrazovky:

V tomto příkladu print.css šablona stylů bude použita pouze v případě, že je dokument vytištěn. Jedná se o velmi užitečný mechanismus. Můžeme shromáždit všechny běžné styly (možná rodinu písem nebo řádkování) v šabloně stylů, která platí pro všechna média, a formátování specifické pro média v jednotlivých šablonách stylů. Jedná se opět o další využití oddělení obav.

Několik příkladů deklarací stylu

Čisté pozadí

Téměř určitě nechcete plýtvat inkoustem na barevné pozadí nebo obrázek na pozadí. Začněte resetováním všech výchozích hodnot pro tyto hodnoty, které mohly být nastaveny v dokumentu:

tělo {
pozadí: bílá;
Černá barva;
}

Můžete také zabránit tisku obrázků na pozadí - měly by být dekorativní, a proto by neměly být požadovanou součástí vašeho obsahu:

* {
obrázek na pozadí: žádný! důležité;
}

Příbuzný: Jak nastavit obrázek na pozadí v CSS

Jak nastavit obrázek na pozadí v CSS

CSS je výkonný nástroj pro styling webových stránek. Naučit se, jak umístit obrázek na pozadí, vás naučí spoustu základů CSS.

Ovládání okrajů

Dalším zjevným bodem, který je třeba při tisku zvážit, je okraj stránky. Zatímco CSS poskytuje prostředky pro nastavení velikosti okraje, měli byste mít na paměti, že váš prohlížeč a tiskárna mohou také ovlivnit samotné nastavení okrajů.

Například v dialogovém okně pro tisk v prohlížeči Chrome je nastavení okraje, které má hodnoty včetně žádný a Zvyk který přepíše vše zadané pomocí CSS:

Z tohoto důvodu se doporučuje ponechat rozhodnutí o rozpětí na čtenáři na veřejných webových stránkách. Pro osobní použití nebo pro vytvoření výchozího rozvržení však může být vhodné nastavení okrajů tisku pomocí CSS. The @strana pravidlo umožňuje nastavit okraje a mělo by se použít následovně:

@strana {
okraj: 2 cm;
}

CSS má také kapacitu pro sofistikovanější rozvržení tisku, jako je změna okraje podle toho, zda je stránka lichým číslem (vpravo), sudým číslem (vlevo) nebo titulní stránkou.

Bohužel je to špatně podporováno - zejména možnost titulní stránky - ale lze ji použít v minimálním rozsahu. Následující styly vytvářejí stránky s mírně většími dolními okraji než horními a mírně většími okraji na vnějším okraji stránky než na hřbetu:

@strana {
levý okraj: 20 mm;
pravý okraj: 20 mm;
horní okraj: 40 mm;
spodní okraj: 50 mm;
}
@strana: vlevo {
levý okraj: 30 mm;
}
@page: right {
pravý okraj: 30 mm;
}

Skrytí irelevantního obsahu

Ne veškerý obsah bude vhodný pro tištěnou verzi dokumentu. Pokud vaše stránka obsahuje navigaci po bannerech, reklamy nebo postranní panel, můžete zabránit tomu, aby se tyto podrobnosti zobrazovaly v tiskové verzi, například:

#contents, div.ad {display: none; }

Hypertextové odkazy zjevně nejsou v tištěném materiálu relevantní, takže pravděpodobně budete chtít odstranit všechny styly, které je odlišují od okolního textu:

a {text-decoration: none; barva: zdědit; }

Možná však stále budete chtít, aby čtenáři měli přístup k původním adresám URL, a přímým řešením je jejich automatické vložení za propojený text:

a [href]: po {
obsah: "(" attr (href) ")";
velikost písma: 90%;
barva: # 333;
}

Tento CSS poskytuje výsledky, jako jsou následující:

a [href]: po konkrétně cílí na pozici po (:po) každý prvek odkazu (A), který má ve skutečnosti adresu URL ([href]). The obsah deklarace zde vloží hodnotu href atribut v závorkách. Všimněte si, že k ovládání zobrazení generovaného obsahu lze použít další pravidla stylu.

Zpracování zalomení stránky

Chcete-li zabránit tomu, aby konce stránek zanechávaly izolovaný obsah nebo jej uprostřed nepohodlně rozdělovaly, využijte vlastnosti konce stránky: konec stránky, konec stránky a konec stránky. Například:

tabulka {page-break-inside: avoid; }

To by mělo pomoci zabránit tomu, aby tabulky pokrývaly více stránek, za předpokladu, že žádná nebude vyšší než jedna stránka. Podobně:

h1, h2 {page-break-before: always; }

To znamená, že takové nadpisy vždy začnou novou stránku. Mohlo by to způsobit problémy, kdybyste okamžitě sledovali h1 své stránky s h2, protože h1 skončí na stránce sama. Chcete-li tomu zabránit, jednoduše zrušte konec stránky pomocí selektoru, který cílí na konkrétní instanci, například:

h1 + h2 {page-break-before: avoid; }

Prohlížení tiskových stylů

Ve všech případech by měl váš prohlížeč a operační systém poskytovat funkci náhledu tisku, často jako součást standardního dialogového okna tisku.

Prohlížeč Chrome usnadňuje kontrolu a dokonce ladění vašich stylů tisku pomocí nástrojů pro vývojáře, jak ukazuje tento příklad ukazující životopis s listem stylů tisku. Nejprve otevřete hlavní nabídku a vyberte Více nástrojů následuje Vývojářské nástroje volba:

Na novém panelu, který se zobrazí, vyberte Jídelní lístek, pak Více nástrojů, následován Vykreslování:

Poté přejděte dolů na ikonu Napodobit typ média CSS nastavení. Rozevírací nabídka umožňuje přepínat mezi zobrazením dokumentu pro tisk a na obrazovce:

Při emulaci šablony stylů tisku standard Prohlížeč stylů je k dispozici pro kontrolu a úpravu pravidel živého stylu. Pamatujte, že emulace tiskového výstupu na obrazovce stále není stoprocentně přesná. Prohlížeč neví nic o velikosti papíru a @strana pravidlo nelze napodobit.

Tisk do PDF

Šikovnou funkcí moderních operačních systémů je možnost tisku do souboru PDF. Ve skutečnosti vše, co můžete vytisknout, lze místo toho odeslat do souboru PDF - žádné skutečné překvapení, protože soubor PDF má koneckonců představovat tištěný dokument.

Díky tomu je HTML v kombinaci s tištěným stylem vynikajícím prostředkem pro vytvoření vysoce kvalitního dokumentu, který lze odeslat jako přílohu i vytisknout.

Tisk různých dokumentů

Pomocí šablony stylů tisku můžete vytvářet kvalitní dokumenty, včetně čehokoli od životopisu po recepty nebo oznámení o událostech. Webové stránky obvykle vypadají ošklivě a při tisku obsahují nechtěné podrobnosti, ale malý počet vylepšení stylu může výrazně zlepšit výsledky tisku. Uložení konečných výsledků ve formátu PDF je rychlý způsob, jak vytvářet atraktivní a profesionální dokumenty.

Jak tisknout webové stránky do formátu PDF s Microsoft Edge

Už jste někdy narazili na zajímavý článek, který jste si chtěli odložit na později? S Edge můžete uložit jako PDF ve třech snadných krocích.

O autorovi