Tento tweet mě dostal. Najednou jsem si uvědomil, že si už nepamatuji, kdy jsem optimalizoval webové stránky pro tisk nebo dokonce kontroloval, jak byly vytištěny na tiskárně.
Hlavním zaměřením vývoje webu je elektronické verze stránky. Stránky se musí kontrolovat ve více prohlížečích, testovat na různých velikostech oken... Koho zajímají tiskárny? Nebo jsem možná zapomněl na styly tisku, protože papírové kopie stránek sám dělám jen zřídka. Ať je to jakkoli, cítil jsem, že situaci je naléhavě potřeba napravit.
Tištěná verze webové stránky má stejné právo na existenci jako elektronická verze. A pokud se snažíme, aby naše materiály byly co nejpřístupnější, neměli bychom zanedbávat papírová média. Kromě toho byste neměli vytvářet domněnky o uživatelích a jejich chování. Lidé stále tisknou webové stránky na tiskárnách. Jen si vzpomeňte na články nebo blogové příspěvky, stránky s recepty, kontaktní informace, pokyny nebo seznamy. Dříve nebo později se jistě někdo pokusí vytisknout něco, co jste umístili na internet.
Zde je to, co o tom říká Haydon Pickering, autor knihy „Inclusive Design Patterns“: „Domácí tiskárny už dlouho nepoužívám. Tady jde o to, že mám pocit, že se rozbijí asi deset minut po zahájení tisku. Ale nejsem všechno."
Pokud si nyní uvědomujete, že jste stejně jako já nevěnovali dostatečnou pozornost stylům tisku, doufám, že vám můj příběh dobře poslouží a pomůže vám rychle osvěžit paměť. A pokud jste nikdy neoptimalizovali webové stránky pro tiskárny, moje malá sbírka užitečných CSS triků vám pomůže začít.
1. Použití stylů tisku CSS Nejlepší způsob, jak začlenit styly tisku do vaší stránky, je deklarovat pravidlo @media v hlavním souboru CSS.Body ( font-size: 18px; ) @media print ( /* styly tisku budou zde */ body ( font-size: 28px; ) )
Případně můžete styly tisku vložit do samostatného souboru a zahrnout jej do HTML, ale s tímto přístupem budete při načítání stránky potřebovat další požadavek.
2. Testování Jak hodnotit vzhled webová stránka připravená k tisku? Každému je jasné, že dát to na papír po každé změně stylu ne Nejlepší rozhodnutí. Naštěstí jsou možnosti prohlížeče pro „bezpapírovou“ kontrolu tištěných verzí stránek zcela dostatečné.
V závislosti na prohlížeči můžete stránku exportovat do PDF, použít funkci náhledu nebo dokonce ladit stránku přímo ve webovém prohlížeči.
Chcete-li ladit styly tisku ve Firefoxu, otevřete Panel vývojáře pomocí klávesové zkratky Shift + F2 nebo spuštěním příkazu nabídky Vývoj → Panel vývojáře. Vstupte příkazový řádek ve spodní části okna: media emulate print , zadání dokončete stisknutím klávesy Enter . Aktivní karta se bude chovat, jako by byl její typ média vytištěn, dokud stránku nezavřete nebo neobnovíte.
Emulace tisku ve Firefoxu
Podobnou funkci má také Chrome. Otevřete Nástroje pro vývojáře, pro které v systému MacOS můžete použít kombinaci kláves CMD + Opt + I, ve Windows – Ctrl + Shift + I nebo spustit příkaz nabídky Další nástroje → Nástroje pro vývojáře. Poté otevřete panel renderování. Jedním ze způsobů, jak toho dosáhnout, je stisknutím klávesy Esc vyvolat panel Console a poté pomocí nabídky otevřít panel Rendering. V panelu vykreslování nastavte příznak Emulovat CSS média a vyberte Tisk.
Emulace tisku v Chrome
Více o testování tištěných verzí webových stránek si můžete přečíst na StackOverflow.
3. Absolutní jednotky měření Absolutní jednotky měření nejsou příliš vhodné pro obrazovkové verze stránek, ale pro tisk jsou přesně to, co potřebujete. V tiskových stylech je to zcela bezpečné, navíc se doporučuje používat absolutní jednotky měření jako cm, mm, in, pt nebo pc.Sekce (okraj-dole: 2 cm; )
4. Vlastnosti stránky Pravidlo @page můžete použít k řízení vlastností stránky, jako je její velikost, orientace a okraje. To se velmi hodí, řekněme, když potřebujete, aby všechny vytištěné stránky měly stejné okraje.@media print ( @page (okraj: 1 cm; ) )
Pravidlo @page je součástí standardu Paged Media Module, který nabízí spoustu skvělých věcí, jako je výběr první stránky k tisku, přizpůsobení prázdné stránky, polohovací prvky v rozích stránky a . Může být dokonce použit k přípravě knih pro tisk.
Sekce ( page-break-before: always; )
▍Konec stránky po prvku Vlastnost page-break-after umožňuje nastavit vynucený konec stránky po prvku. Pomocí této vlastnosti můžete také zabránit rozbití.H2 ( zalomení stránky za: vždy; )
▍Přerušení stránky uvnitř prvku Vlastnost page-break-inside je velmi užitečná, pokud se potřebujete vyhnout rozdělení prvku mezi dvě stránky.Ul ( page-break-inside: avoid; )
▍Horní a dolní visící řádky Někdy nemusíte vynucovat zalomení stránek, ale chcete ovládat výstup odstavců na hranicích stránky.Pokud se například poslední řádek odstavce na aktuální stránce nevejde, poslední dva řádky tohoto odstavce se vytisknou na další stránku. Je to proto, že vlastnost, která to řídí (vdovy, tj. „horní zavěšené řady“), je ve výchozím nastavení nastavena na 2. Toto lze změnit.
P (vdovy: 4; )
Pokud nastane jiná situace a na aktuální stránku se vejde pouze jeden řádek odstavce, vytiskne se celý odstavec na další stránku. Vlastnost zodpovědná za spodní závěsné čáry (sirotci) je také standardně nastavena na 2.
P(sirotci: 3;)
Smyslem výše uvedeného kódu je, že aby se celý odstavec nezalomil na další stránku, musí se na aktuální stránku vejít alespoň tři řádky.
Abyste tomu lépe porozuměli, podívejte se na příklad připravený pomocí CodePen. A zde je ladicí verze stejného příkladu, je pohodlnější otestovat.
*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line ( pozadí: průhledné !důležité; barva: #000 !důležité; stínovaný rámeček: žádný !důležitý; stín textu: žádný !důležitý; )
Mimochodem CSS styly pro tisk jsou jednou z mála výjimek, kde je direktiva!important naprosto normální ;)
Tělo > *:not(hlavní) (zobrazit: žádné; )
8. Zobrazování adres odkazů Odkazy, jak se obvykle nacházejí na webových stránkách, jsou při tisku zcela zbytečné, pokud čtenář papírové verze dokumentu neví, kam vedou.Chcete-li zobrazit adresy odkazů po jejich textových reprezentacích, použijte následující styl:
A:after ( content: " (" attr(href) ")"; )
S tímto přístupem bude samozřejmě „rozluštěno“ mnoho nepotřebných věcí. Například relativní odkazy, absolutní odkazy na stejném webu jako tištěná stránka, kotvící odkazy a tak dále. Aby nebyla tištěná stránka nepořádek, bylo by lepší použít něco takového:
A:not():after ( content: " (" attr(href) ")"; )
Vypadá to šíleně, samozřejmě. Takže vysvětlím význam tohoto pravidla v jednoduché angličtině: "U každého odkazu, který má atribut začínající http, ale neobsahuje mywebsite.com, zobrazte hodnotu atributu href."
Abbr:after ( content: " (" attr(title) ")"; )
10. Vynucený tisk pozadí Obvykle prohlížeče při vytváření stránky pro tisk nezobrazují barvu pozadí a obrázky na pozadí, pokud to výslovně neuvádějí. To vše je však někdy potřeba vytisknout. Zde nám pomůže nestandardizovaná vlastnost print-color-adjust, která umožňuje u některých prohlížečů přepsat výchozí nastavení.Záhlaví ( -webkit-print-color-adjust: přesné; print-color-adjust: přesné; )
11. Dotazy na média Pokud píšete dotazy na média, jako jsou následující, mějte na paměti, že pravidla CSS v takových dotazech neovlivní tištěnou verzi stránky.@media screen and (min. šířka: 48em) ( /* pouze obrazovka */ )
proč tomu tak je? Jde o to, že pravidla CSS se použijí pouze v případě, že hodnota min-width je 48 em a pokud je typ média screen . Pokud se zbavíte tohoto mediálního dotazu z klíčové slovo screen , pak bude omezena pouze hodnotou min-width.
@media (min-width: 48em) ( /* všechny typy médií */ )
12. Tisk aktuálních map verze Firefoxu a Chrome umí tisknout mapy, ale například Safari to neumí. Co dělat při tisku karet? Jednou z univerzálních možností je použití statických map místo dynamických.Mapa ( šířka: 400px; výška: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh "); -webkit-print-color-adjust: přesné; print-color-adjust: přesné; )
13. QR kódy Tisk QR kódů obsahujících důležité odkazy může výrazně zlepšit použitelnost papírových verzí webových stránek. Zde je kousek z The Smashing Magazine, kde najdete Užitečné tipy o tomto tématu. Jedním z nich je uvedení jejich adresy ve formě QR kódů na tištěné stránky. V důsledku toho uživatel, aby v prohlížeči otevřel stránku, ze které byl výtisk vytvořen, nebude muset zadávat její úplnou adresu na klávesnici.14. O tisku neoptimalizovaných stránek Při práci na tématu tisk webových stránek jsem objevil výborný nástroj, který umožňuje pohodlně připravit neoptimalizované stránky k tisku. Použití zalomení stránek PrintliminatorNásledující části popisují model formátování stránky používaný v CSS2. K označení uživatelského agenta, kde může nebo by měl provést zalomení stránky, a stránky (vlevo nebo vpravo), na které by měl pokračovat v zobrazování obsahu, se používá pět různých vlastností. Každý konec stránky přeruší zobrazení obsahu v aktuálním bloku stránky a způsobí, že se zbytek stromu dokumentu vykreslí v novém bloku stránky.
Přestávky před a za prvky: "page-break-before", "page-break-after", "page-break-inside" "page-break-before"
Počáteční hodnota: auto
Dědictví: ne
Procentuální přiřazení: N/A
Hodnota: auto | vždy | vyhnout se | vlevo | vpravo | zděděno
Počáteční hodnota: auto
Rozsah použití: prvky na úrovni konstrukce
Dědictví: ne
Procentuální přiřazení: N/A
Zařízení: vizuální, stránkované
Význam: vyhnout se | auto | zděděno
Počáteční hodnota: auto
Rozsah použití: prvky na úrovni konstrukce
Dědictví: ano
Procentuální přiřazení: N/A
Zařízení: vizuální, stránkované
Hodnoty těchto vlastností mají následující význam:
autoNezahájí ani nezabrání přerušení stránky před (po nebo uvnitř) generovaného bloku.
vždyVždy zahájí konec stránky před (po) vygenerovaném bloku.
vyhýbat seZakáže konec stránky před (po nebo uvnitř) generovaného bloku.
vlevo, odjetInicializuje jeden nebo dva konce stránek před (po) generovaném bloku, takže Další strana formátován jako levá stránka.
že joZahájí jeden nebo dva konce stránek před (po) vygenerovaném bloku, takže další stránka je formátována jako pravá stránka.
Potenciální umístění konce stránky je určeno vlastností „page-break-inside“ nadřazeného prvku, vlastností „page-break-after“ předchozího prvku a vlastností „page-break-before“. následný prvek. Pokud jsou hodnoty těchto vlastností jiné než „auto“, pak hodnoty „always“, „left“ a „right“ mají přednost před hodnotou „vyhnout se“. Část o přijatelných koncích stránek poskytuje jasná pravidla pro povolení nebo zakázání konců stránek pomocí těchto vlastností.
Použití pojmenovaných stránek: "page" "page"Význam: | auto
Počáteční hodnota: auto
Rozsah použití: prvky na úrovni konstrukce
Dědictví: ano
Procentuální přiřazení: N/A
Zařízení: vizuální, stránkované
Vlastností "page" lze definovat konkrétní typ stránky, na které bude prvek zobrazen.
V tomto příkladu budou všechny tabulky umístěny podle pravá strana stránky (nazývané „otočené“), které jsou v orientaci na šířku:
TABLE (stránka: otočená; konec stránky před: vpravo)
Efekt vlastnosti "page" je následující: pokud se hodnota vlastnosti "page" bloku stránky, jehož obsah patří do inline úrovně, liší od hodnoty podobné vlastnosti předchozího bloku stránky, jehož obsah také patří do inline úrovně, pak se mezi ně vloží jeden nebo dva konce stránky, načež se výstup vytvoří v pojmenovaném bloku stránky. Viz část níže o vynucení zalomení stránek.
Následující příklad zobrazuje dvě tabulky na stránkách s orientace na šířku(samozřejmě na stejné stránce, pokud se na ni obě vejdou), typ stránky „úzká“ se vůbec nepoužívá, i když je nastaven na prvek DIV.
@stránka úzká (velikost: 9 cm 18 cm)
@stránka otočená (velikost: na šířku)
DIV (stránka: úzká)
TABULKA (stránka: otočená)
použitý v dokumentu
Konce stránek uvnitř prvků: "sirotci", "vdovy" "sirotci"
Význam: | zděděno
Počáteční hodnota: 2
Rozsah použití: prvky na úrovni konstrukce
Dědictví: ano
Procentuální přiřazení: N/A
Zařízení: vizuální, stránkované
Význam: | zděděno
Počáteční hodnota: 2
Rozsah použití: prvky na úrovni konstrukce
Dědictví: ano
Procentuální přiřazení: N/A
Zařízení: vizuální, stránkované
Vlastnost "orphans" určuje minimální počet řádků odstavce, které by měly být ponechány ve spodní části stránky. Vlastnost "widows" určuje minimální počet řádků odstavce, které by měly být ponechány v horní části stránky. Příklady použití těchto vlastností k ovládání zalomení stránek jsou uvedeny níže.
Další informace o formátování odstavců naleznete v části o řádkových blocích.
Přijatelné konce stránekV normálním toku se mohou stránky zalomit na následujících místech:
Nespojitosti uvažovaného typu splňují následující pravidla:
- Pravidlo A: Přerušení (1) je povoleno pouze tehdy, pokud to umožňují hodnoty vlastností „page-break-after“ a „page-break-before“ všech prvků generujících bloky vyskytující se v místě přerušení, což je případ, kdy alespoň jeden z nich je „vždy“, „vlevo“ nebo „vpravo“, nebo jsou všechny „automatické“.
- Pravidlo B: Pokud jsou však všechny tyto vlastnosti nastaveny na „auto“ a vlastnost „page-break-inside“ nejbližšího předka společného všem pojmenovaným prvkům je nastavena na „vyhnout“, pak je zalomení stránky v tomto umístění zakázáno.
- Pravidlo B: Zalomení stránky (2) je povoleno pouze v případě, že počet řádkových bloků mezi zalomením a začátkem koncového zalomeného bloku je roven nebo větší než hodnota vlastnosti „sirotci“ a počet řádkových bloků mezi přerušením a koncem bloku je rovna nebo větší než hodnota vlastnosti "widows" .
- Pravidlo D: Kromě toho jsou konce stránek (2) povoleny pouze tehdy, je-li vlastnost "page-break-inside" nastavena na "auto".
Pokud výše uvedená pravidla neumožňují vložit dostatečný počet zalomení, pak aby nedošlo k vysypání obsahu z bloku stránky, neberou se v úvahu pravidla B a D, což umožňuje vytvářet další zarážky.
Pokud poté není možné dosáhnout dostatečného počtu nespojitostí, pak se pravidla A a B neberou v úvahu při hledání dalších bodů nespojitosti.
V absolutně umístěných blocích nemůže dojít k zalomení stránek.
Vynucené zalomení stránekKonec stránky musí nastat (1), pokud je alespoň jedna ze všech vlastností „page-break-after“ a „page-break-before“ prvků generujících bloky vyskytující se v místě přerušení „always“, „left“ nebo „ že jo".
K přerušení stránky musí dojít také (1), pokud se hodnoty vlastnosti "page" bloků řádků bezprostředně před a po přerušení liší.
"Nejlepší" konce stránekJazyk CSS2 neurčuje, který konec stránky ze sady platných zalomení stránky by měl být použit; CSS2 nebrání uživatelským agentům vkládat konce stránek kamkoli nebo je nepoužívat vůbec. Specifikace CSS2 však důrazně doporučuje, aby se uživatelští agenti řídili následující heuristikou (dokud se neukáže, že si někdy odporují):
- Zalamování stránek by mělo být prováděno co nejméně;
- všechny stránky, které nekončí nucenou přestávkou, by měly být přibližně stejně vysoké;
- v bloku, který má ohraničení, by neměly být žádné zlomy;
- v tabulce by neměly být žádné přestávky;
- Uvnitř pohybujícího se předmětu by neměly být žádné trhliny.
Řekněme, že šablona stylů obsahuje vlastnosti „orphans: 4“ a „widows: 2“ a ve spodní části aktuální stránky je k dispozici 20 řádků (řádkových polí):
- pokud poslední odstavec aktuální stránky neobsahuje více než 20 řádků, musí zůstat na aktuální stránce;
- pokud odstavec obsahuje 21 nebo 22 řádků a druhá část odstavce by neměla porušovat omezení stanovená vlastností "widows", pak by se na základě toho měla jeho druhá část skládat ze dvou řádků;
- pokud má odstavec více než 23 řádků, pak by první část měla obsahovat 20 řádků a druhá část by měla obsahovat všechny ostatní řádky.
Nyní řekněme, že hodnota vlastnosti „orphans“ je „10“, hodnota vlastnosti „widows“ je „20“ a v dolní části aktuální stránky je k dispozici 8 řádků:
- pokud odstavec na konci aktuální stránky neobsahuje více než 8 řádků, musí zůstat na aktuální stránce;
- pokud odstavec obsahuje více než 9 řádků, pak jej nelze rozdělit (protože by to porušilo omezení stanovené vlastností "sirotci"). Proto by se měl přesunout na další stránku jako blok.
Jak se vypořádat s konce stránek při tisku velké HTML tabulky (8)
Mám projekt, který vyžaduje tisk HTML tabulky s mnoha řádky.
Můj problém je v tom, jak se tabulka tiskne na více stránek. Někdy přeřízne řádek na polovinu, takže je nečitelný, protože jedna polovina je na okraji stránky a zbytek je vytištěn v horní části další stránky.
Jediné přijatelné řešení, které mě napadá, je použít složité DIV místo tabulky a v případě potřeby vynutit zalomení stránek... ale než projdu všemi změnami, myslel jsem si, že bych se zde mohl zeptat dříve.
Použijte tyto vlastnosti CSS:
Page-break-after page-break-before
Například:
@media print ( tabulka (page-break-after:always) ) ....
Žádná z odpovědí zde pro mě v Chrome nefungovala. AAverin na GitHubu pro to vytvořil užitečný Javascript a fungovalo to pro mě:
Stačí přidat js do svého kódu a přidat do tabulky třídu splitForPrint a tabulka úhledně rozdělí na více stránek a na každou stránku přidá záhlaví tabulky.
Poznámka: Při použití konce stránky: vždy pro značku vytvoří konec stránky za posledním kouskem tabulky a pokaždé vytvoří zcela prázdnou stránku! Chcete-li to vyřešit, jednoduše jej změňte na page-break-after: auto. Správně se zlomí a nevytvoří další prázdnou stránku.
@media print ( table ( page-break-after:auto ) tr ( page-break-inside:varoid; page-break-after:auto ) td ( page-break-inside:varoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group ) ) ....
Přijatá odpověď pro mě nefungovala ve všech prohlížečích, ale po css mi fungovalo:
Tr ( display: table-row-group; page-break-inside:varoid; page-break-after:auto; )
Struktura html byla:
V mém případě došlo k dalším problémům s thead tr , ale to vyřešilo původní problém s omezením řádků tabulky.
Kvůli problémům se záhlavím jsem skončil s:
#theTable td * ( page-break-inside:avoid; )
To nezabránilo lámání řad; pouze obsah každé buňky.
Skončil jsem u přístupu @vicenteherrera s některými vylepšeními (což může být bootstrap 3).
V podstatě; nemůžeme přerušit tr s nebo td s, protože to nejsou prvky na úrovni bloku. Do každého tedy vložíme div s a na divy aplikujeme naše pravidla page-break-*. Zadruhé přidáme do horní části každého z těchto divů nějaké vycpávky, abychom kompenzovali jakékoli stylingové artefakty.
@media print ( /* vyvarujte se řezání tr"s na polovinu */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Zabalte každý obsah tr a td do prvku div // (todo: přidejte logiku, takže to uděláme pouze při tisku) $("table tbody th, table tbody td").wrapInner(" ");))
Opravy a úpravy přídavků byly nutné pro kompenzaci nějakého jitteru, který byl zaveden (předpokládám z bootstrapu). Nejsem si jistý, zda uvádím nové řešení z ostatních odpovědí na tuto otázku, ale třeba to někomu pomůže.
Nedávno jsem tento problém vyřešil dobrým řešením.
AvoidBreak ( okraj: 2px plné; page-break-inside:avoid; )
Function Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )
Funguje jako kouzlo!
Testoval jsem mnoho řešení a žádné nefungovalo dobře.
Tak jsem zkusil malý trik a funguje to:
chodidlo se stylem: poloha: pevná; dole: 0px; poloha: pevná; dole: 0px; je umístěn na konci poslední stránky, ale pokud je zápatí příliš vysoko, překrývá obsah tabulky.
tfoot only with: display: table-footer-group; nepřekrývá se, ale není na konci poslední stránky...
Položme dvě nohy:
TFOOT.placer ( display: table-footer-group; height: 130px; ) TFOOT.contenter ( display: table-footer-group; position: fixed; bottom: 0px; height: 130px; )
Jedna si vyhrazuje místo na jiných než posledních stránkách, druhá ve vašem osobním zápatí.
Testovací tabulka ( page-break-inside:auto ) tr ( page-break-inside:varoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )
| poznámky |
| X |
| X |
| X |
Přestože žijeme v digitální době, kdy je vše snadno dostupné, stále existuje mnoho lidí, kteří raději čtou dlouhý text z papíru. Je možné, že někteří uživatelé vytisknou text z vašeho webu, aby si jej mohli přečíst mimo počítač.
Možnost vykreslovat obsah vhodný pro tisk existuje již dlouhou dobu. Můžeme to udělat pomocí pravidla @media v šabloně stylů, takto:
@media print ( /* Pravidla stylu */ )
Existuje několik vlastností, které vám umožňují upravit obsah webové stránky tak, aby byla připravena k tisku, a my se budeme zabývat jednou z nich: zalomením stránek.
Co to dělá?Pokud jste pracovali s textové editory, jako Microsoft Word a Pages, měli byste být obeznámeni s nabídkou konce stránky, která vám umožňuje přesunout text na další stránku.
Tento modul dělá totéž a umožňuje vám řídit, jak se obsah webové stránky přenáší stránku po stránce.
Použití zalomení stránkyJako příklad jsme vytvořili demo stránku, kterou vytiskneme. Našli jsme na něm neúspěšný převod, jak můžete vidět níže.
Bude to vypadat lépe, když bude záhlaví a zápatí začínat na další stránce.
K tomu použijeme vlastnost page-break-after a nastavíme ji na vždy, aby se další prvek přerušil na další stránku.
Zalomení stránky ( zalomení stránky po: vždy ;)
Poté můžete tvořit mezi prvky nový prvek s třídou nebo tímto způsobem přiřadit třídu k předchozímu prvku.
Pomocí funkce Eraser můžete pořizovat kompozitní fotografie a poté je dát dohromady, abyste získali pozadí bez doplňků, které nemáte.
Telefon na cestyS Translator bude skvělým nástrojem pro vaše cesty, protože...
Nyní bude na další stránce začínat záhlaví a spodní závěs.
Výše uvedená metoda může být únavná, pokud máte hodně textu. Takže namísto nucení obsahu přejít na další stránku by bylo lepší nastavit minimální práh pro horní a spodní visící čáry.
V typografické praxi se horní a dolní řádky týkají zbývajících slov a krátkých řádků, které se objevují odděleně od zbytku odstavce na jiné stránce.
Pomocí vlastností sirotci (spodní závěsný provázek) a vdovy (horní závěsný provázek) můžeme nastavit minimální práh. V níže uvedeném příkladu určíme, že na konci nebo na začátku odstavce, kde dojde k zalomení stránky, zůstanou alespoň tři řádky.
P (sirotci: 3; vdovy: 3;)
Další zdrojeProbrali jsme základy používání zalomení stránek v tisku pro kopírování webových stránek a doufáme, že vás to inspiruje k přemýšlení o stylech tisku pro váš web, aby váš obsah vypadal dobře na obrazovce i na papíře.
Překlad – Služební místnost
Blok stránky se skládá z oblasti stránky, kde je umístěn obsah, a oblasti okraje obklopující oblast stránky. Pravidlo @page se používá ke změně některých vlastností CSS při tisku dokumentu. Můžete změnit pouze okraje prvku margin a můžete také nastavit konce stránek na určeném místě.
@page ( okraj: 2 palce; )
V pravidle @page můžete nastavit jednotlivá pole dokumentu, například margin-top , margin-right , margin-bottom , margin-left :
2. Konce stránekKonce stránek můžete ovládat pomocí vlastností page-break-before , page-break-after a page-break-inside. Tyto vlastnosti se vztahují na prvky na úrovni bloku, které mají vlastnost position relativní nebo statické .
| Hodnoty: | |
| auto | |
| vždy | Před prvek vždy přidá konec stránky. |
| vyhýbat se | Pokud je to možné, zabraňuje umístění přestávky před prvkem. |
| vlevo, odjet | Přidá jeden nebo dva konce stránek před prvek, takže další stránka bude formátována jako levá stránka. Prvek bude vytištěn počínaje horním okrajem levé stránky, tzn. na stránce vlevo od hřbetu. Při oboustranném tisku se objeví na zadní straně papíru. |
| že jo | Přidá jeden nebo dva konce stránky před prvek. Prvek se vytiskne od horního okraje pravého okraje. Následující stránka bude naformátována jako správná stránka. |
| zdědit |
Syntax:
@media print ( h1 (page-break-before: always;) )
| Hodnoty: | |
| auto | Výchozí hodnota určuje automatické zalomení stránek. |
| vždy | Za prvek vždy přidá konec stránky. |
| vyhýbat se | Zabraňuje přidání přestávky za prvek, pokud je to možné. |
| vlevo, odjet | Přidá jeden nebo dva konce stránek za prvek, takže další stránka bude formátována jako levá stránka. Prvek bude vytištěn počínaje horním okrajem levé stránky, tzn. na stránce vlevo od hřbetu. Při oboustranném tisku se objeví na zadní straně papíru. |
| že jo | Přidá jeden nebo dva konce stránek za prvek, takže další stránka je formátována jako správná stránka. Prvek se vytiskne od horního okraje pravého okraje. |
| zdědit | Zdědí tuto vlastnost od nadřazeného prvku. |
Syntax:
@media print ( zápatí (zalomení stránky: vždy;) )
Vlastnost page-break-inside sděluje prohlížeči, zda se stránka může přerušit uvnitř prvku nebo ne. Ale pokud se ukáže, že prvek je delší než stránka, pak je nevyhnutelná přestávka.