Formátování dokumentů pro tisk pomocí CSS

Formátování dokumentů pro tisk pomocí CSS

Pokud jste si někdy z webu vytiskli rezervace vstupenek nebo pokyny k hotelu, pravděpodobně jste na výsledky nezapůsobili. Proto si můžete být vědomi toho, že lze tištěné dokumenty stylizovat stejným způsobem, jako je lze zobrazovat na obrazovce, pomocí kaskádových stylů (CSS).





Oddě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ích stylistických značek, jako jsou:



Heading

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






Nejen, že je to 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 odkazováním 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 jeden soubor můžeme kdykoli změnit, aby se aktualizovalo formátování v každém dokumentu, který jej používá.



Včetně šablony stylu tisku

Podobným způsobem, jako je zahrnutí šablony stylů obrazovky, můžeme určit šablonu stylů pro tisk. List stylu obrazovky je obvykle součástí takto:


Nicméně další atribut, polovina , 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 media však může mít také hodnoty tisku a obrazovky:


V tomto případě print.css šablony stylů se použijí pouze při vytištění dokumentu. 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í) do šablony stylů, která platí pro všechna média, a formátování specifické pro média v jednotlivých šablonách stylů. Opět se jedná o další využití oddělení obav.



Některá deklarace stylu

Čisté pozadí

Téměř jistě nechcete ztrácet inkoust tiskem barevného pozadí nebo obrázku na pozadí. Začněte resetováním všech výchozích hodnot těchto hodnot, které mohly být v dokumentu nastaveny:

body {
background: white;
color: black;
}

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

* {
background-image: none !important;
}

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

windows nedokáže naformátovat SD kartu

Ovládání okrajů

Dalším zřejmým bodem, který je třeba vzít v úvahu ohledně tisku, je okraj stránky. Zatímco CSS poskytuje způsob nastavení velikosti okraje, měli byste mít na paměti, že váš prohlížeč a tiskárna mohou také ovlivnit nastavení okrajů samy.

Například v tiskovém dialogu prohlížeče Chrome je nastavení okraje, které obsahuje hodnoty včetně žádný a Zvyk který přepíše cokoli zadaného prostřednictvím CSS:

Z tohoto důvodu se doporučuje ponechat rozhodnutí o okraji na čtenářích 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 být použito následovně:

@page {
margin: 2cm;
}

CSS má také kapacitu pro sofistikovanější rozvržení tisku, například změnu okraje podle toho, zda je stránka lichá (pravá), sudá (vlevo) nebo titulní.

můj xbox one se nepřipojí k internetu

Toto je bohužel špatně podporováno - zejména možnost titulní stránky - ale lze jej použít v minimální míře. Následující styly vytvářejí stránky s mírně většími spodními okraji než horní a mírně většími okraji na vnějším okraji stránky než je hřbet:

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

Skrytí irelevantního obsahu

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

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

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

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

Můžete však přesto chtít, aby čtenáři měli přístup k původním adresám URL, a jednoduchým řešením je automaticky je vložit za propojený text:

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

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

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

Zpracování zlomů stránky

Chcete-li zabránit tomu, aby konce stránek zanechávaly izolovaný obsah nebo jej nešikovně rozbíjely uprostřed, použijte vlastnosti konce stránky: page-break-before , přerušení stránky a prolomení stránky . Například:

table { page-break-inside: avoid; }

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

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

To znamená, že takové nadpisy vždy začínají novou stránku. Může to však způsobit problémy, pokud budete okamžitě sledovat h1 své stránky s h2, protože h1 skončí na stránce zcela samostatně. Abyste tomu zabránili, jednoduše zrušte konec stránky pomocí selektoru, který cílí na konkrétní instanci, například:

proč nemohu přesunout všechny aplikace na SD kartu
h1 + h2 { page-break-before: avoid; }

Zobrazení stylů tisku

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 i ladění vašich stylů tisku pomocí Nástroje pro vývojáře, jak ukazuje tento příklad zobrazují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 objeví, vyberte Jídelní lístek , pak Více nástrojů , následován Vykreslování :

Poté přejděte dolů na Emulujte typ média CSS nastavení. Rozevírací seznam umožňuje přepínat mezi tiskem a zobrazením dokumentu:

Při emulaci šablony stylů tisku je standardní Prohlížeč stylů je k dispozici ke kontrole a úpravě pravidel živého stylu. Mějte na paměti, že emulace tiskového výstupu na obrazovce stále není 100% přesná. Prohlížeč neví nic o velikosti papíru a @strana pravidlo nelze napodobit.

Tisk do PDF

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

Díky tomu je HTML v kombinaci s šablonou stylů tisku vynikajícím prostředkem pro vytváření vysoce kvalitních dokumentů, které lze odeslat jako přílohu i vytisknout.

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 při tisku vypadají ošklivě a obsahují nežádoucí detaily, 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í, profesionální dokumenty.

Podíl Podíl tweet E-mailem Jak tisknout webové stránky do PDF pomocí Microsoft Edge

Setkali jste se někdy se zajímavým článkem, který jste si chtěli uložit na později? Ve Edge můžete ve třech jednoduchých krocích uložit jako PDF.

Číst dále Související témata
  • Programování
  • Tisk
  • CSS
O autorovi Bobby Jack(58 článků zveřejněno)

Bobby je technologický nadšenec, který pracoval jako vývojář softwaru po téměř dvě desetiletí. Je zapálený pro hraní her, pracuje jako editor recenzí časopisu Switch Player Magazine a je ponořen do všech aspektů online publikování a webového vývoje.

Více od Bobbyho Jacka

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru