Formátovanie dokumentov na tlač pomocou CSS

Formátovanie dokumentov na tlač pomocou CSS

Ak ste si niekedy vytlačili rezervácie leteniek alebo pokyny do hotela z webu, výsledky vás pravdepodobne nezaujali. Preto si môžete byť vedomí toho, že tlačené dokumenty je možné štylizovať rovnakým spôsobom ako na obrazovke pomocou kaskádových štýlov (CSS).





Oddelenie obáv

Kľúčovou výhodou CSS je oddelenie obsahu od prezentácie. Najjednoduchšie to znamená namiesto veľmi zastaraných štylistických značiek, ako sú:



Heading

Používame sémantické značenie:






Nielenže je to oveľa čistejšie, ale to tiež znamená, že naša prezentácia je oddelená od nášho obsahu. Vykreslenie prehliadačov h1 prvky ako predvolený veľký, tučný text, ale tento štýl môžeme kedykoľvek zmeniť pomocou šablóny štýlov:

h1 { font-weight: normal; }

Zhromaždením týchto deklarácií štýlu do samostatného súboru a odkazovaním na tento súbor z nášho dokumentu HTML môžeme separáciu ešte lepšie využiť. Šablónu štýlov je možné znova použiť a tento jeden súbor môžeme kedykoľvek zmeniť, aby sa aktualizovalo formátovanie v každom dokumente, ktorý ho používa.



Vrátane šablóny štýlu tlače

Podobným spôsobom, akým je zahrnutie hárku štýlov obrazovky, môžeme určiť hárok štýlov pre tlač. List štýlu obrazovky je obvykle zahrnutý takto:


Ďalší atribút, polovicu , umožňuje zacielenie na základe kontextu, v ktorom je dokument vykreslený. Predvolený prvok je predvolene ekvivalentný s:




To znamená, že šablóna štýlov sa použije pre akékoľvek médium, v ktorom je dokument vykreslený. Atribút media však môže mať aj hodnoty tlače a obrazovky:


V tomto prípade je print.css šablóna so štýlmi sa použije iba vtedy, keď je dokument vytlačený. Toto je veľmi užitočný mechanizmus. Môžeme zhromaždiť všetky bežné štýly (napríklad rodinu písem alebo riadkovanie) v hárku štýlov, ktorý sa vzťahuje na všetky médiá, a formátovaní špecifickom pre médiá v jednotlivých štýloch. Opäť je to ďalšie použitie oddelenia záujmov.



Niekoľko príkladov vyhlásení štýlu

Čisté pozadie

Takmer určite nechcete plytvať atramentom pri tlači farebného pozadia alebo obrázku na pozadí. Začnite resetovaním všetkých predvolených hodnôt pre tieto hodnoty, ktoré mohli byť nastavené vo vašom dokumente:

body {
background: white;
color: black;
}

Môžete tiež zabrániť tlači akýchkoľvek obrázkov na pozadí - tieto by mali byť dekoratívne, a preto by nemali byť povinnou súčasťou vášho obsahu:

* {
background-image: none !important;
}

Súvisiace: Ako nastaviť obrázok na pozadí v CSS

Prečo potrebujem sim kartu?

Ovládanie okrajov

Ďalším zrejmým bodom, ktorý je potrebné zvážiť pri tlači, je okraj strany. Aj keď CSS poskytuje spôsob nastavenia veľkosti okraja, mali by ste mať na pamäti, že váš prehliadač a tlačiareň môžu tiež ovplyvniť samotné nastavenia okraja.

Napríklad v dialógovom okne tlače prehliadača Chrome je nastavenie okraja, ktoré obsahuje hodnoty vrátane žiadny a zvyk ktoré prepíšu čokoľvek špecifikované prostredníctvom CSS:

Z tohto dôvodu sa odporúča ponechať rozhodnutie o rezerve na čitateľovi na verejných webových stránkach. Na osobné použitie alebo na vytvorenie predvoleného rozloženia však môže byť vhodné nastaviť okraje tlače pomocou CSS. The @stránka pravidlo umožňuje nastaviť okraje a malo by sa používať nasledovne:

@page {
margin: 2cm;
}

CSS má tiež kapacitu pre sofistikovanejšie rozloženia tlače, ako napríklad zmenu okraja podľa toho, či je stránka nepárna (pravá), párna (vľavo) alebo titulná strana.

filmy zadarmo bez vytvorenia účtu

Toto je bohužiaľ málo podporované - najmä možnosť titulnej stránky - ale dá sa použiť v minimálnej miere. Nasledujúce štýly produkujú stránky s o niečo väčšími dolnými okrajmi ako horný a o niečo väčšími okrajmi na vonkajšom okraji stránky ako je chrbát:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

Skrytie irelevantného obsahu

Nie všetok obsah bude vhodný pre tlačenú verziu vášho dokumentu. Ak vaša stránka obsahuje navigáciu bannerov, reklamy alebo bočný panel, možno budete chcieť zabrániť zobrazovaniu týchto podrobností v tlačenej verzii, napríklad:

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

Hypertextové odkazy zjavne nie sú v tlačenom materiáli relevantné, takže pravdepodobne budete chcieť odstrániť všetky štýly, ktoré ich odlišujú od okolitého textu:

a { text-decoration: none; color: inherit; }

Môžete však chcieť, aby mali čitatelia prístup k pôvodným adresám URL, a jednoduchým riešením je ich automatické vloženie za prepojený text:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

Tento CSS poskytuje výsledky, ako napríklad:

a [href]: po konkrétne sa zameriava na pozíciu po ( : po ) každý prvok odkazu ( do ), ktorá má v skutočnosti URL ( [href] ). The obsah vyhlásenie tu vkladá hodnotu href atribút medzi zátvorkami. Všimnite si toho, že na ovládanie zobrazenia generovaného obsahu možno použiť iné pravidlá štýlu.

Manipulácia so zlommi stránky

Ak chcete zabrániť tomu, aby konce stránok zanechávali izolovaný obsah alebo ho nešikovne lámali uprostred, využite vlastnosti konca stránky: page-break-before , prerušenie stránky a prelomenie stránky . Napríklad:

table { page-break-inside: avoid; }

To by malo pomôcť zabrániť tomu, aby tabuľky presahovali viac strán, za predpokladu, že žiadne nie sú vyššie ako jedna stránka. Podobne:

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

To znamená, že takéto nadpisy vždy zakladajú novú stránku. Mohlo by to spôsobiť problémy, ak budete okamžite nasledovať h1 svojej stránky s h2, pretože h1 skončí na stránke úplne samostatne. Aby ste tomu zabránili, jednoducho zrušte zlom stránky pomocou selektora, ktorý zacieľuje na konkrétnu inštanciu, napríklad:

aký veľký je inštalácia systému Windows 10
h1 + h2 { page-break-before: avoid; }

Zobrazenie štýlov tlače

Váš prehliadač a operačný systém by vo všetkých prípadoch mal poskytovať funkciu ukážky tlače, často ako súčasť štandardného dialógového okna tlače.

Prehliadač Chrome uľahčuje kontrolu a dokonca ladenie vašich štýlov tlače pomocou nástrojov pre vývojárov, ako ukazuje tento príklad zobrazujúci životopis s listom štýlov tlače. Najprv otvorte hlavné menu a zvoľte Viac nástrojov nasleduje Nástroje pre vývojárov možnosť:

Na novom paneli, ktorý sa zobrazí, vyberte Ponuka potom Viac nástrojov , nasledovaný Vykresľovanie :

Potom posuňte zobrazenie nadol na ikonu Emulujte typ média CSS nastavenie. Rozbaľovacia ponuka vám umožňuje prepínať medzi tlačou a zobrazením dokumentu:

Pri emulácii šablóny so štýlmi tlače ide o štandard Štýlový prehliadač je k dispozícii na kontrolu a úpravu pravidiel živého štýlu. Majte na pamäti, že emulácia tlačového výstupu na obrazovku stále nie je 100% presná. Prehliadač nevie nič o veľkosti papiera a @stránka pravidlo nemožno napodobniť.

Tlač do PDF

Šikovnou funkciou moderných operačných systémov je možnosť tlače do súboru PDF. V skutočnosti čokoľvek, čo môžete vytlačiť, môže byť namiesto toho odoslané do súboru PDF - žiadne prekvapenie, pretože súbor PDF má koniec koncov predstavovať vytlačený dokument.

Vďaka tomu je HTML v kombinácii s tabuľkou štýlov tlače vynikajúcim prostriedkom na vytváranie vysokokvalitného dokumentu, ktorý je možné odoslať ako prílohu aj vytlačený.

Pomocou šablóny so štýlom tlače môžete vytvárať kvalitné dokumenty vrátane čokoľvek od životopisu po recepty alebo oznámenia o udalostiach. Webové stránky pri tlači zvyčajne vyzerajú škaredo a obsahujú nežiaduce detaily, ale malý počet vylepšení štýlu môže výrazne zlepšiť výsledky tlače. Uloženie konečných výsledkov vo formáte PDF je rýchly spôsob, ako vytvárať atraktívne a profesionálne dokumenty.

zdieľam zdieľam Tweet E -mail Ako tlačiť webové stránky do formátu PDF pomocou programu Microsoft Edge

Stretli ste sa niekedy so zaujímavým článkom, ktorý ste si chceli odložiť na neskôr? V Edge môžete v troch jednoduchých krokoch uložiť ako PDF.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • Tlač
  • CSS
O autorovi Bobby Jack(58 publikovaných článkov)

Bobby je technologický nadšenec, ktorý pracoval ako vývojár softvéru väčšinu dvoch desaťročí. Má nadšenie pre hry, pracuje ako editor recenzií v časopise Switch Player a je ponorený do všetkých aspektov online publikovania a webového vývoja.

Viac od Bobbyho Jacka

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber