Možnosti konce stránky konec stránky po. Html - stránky - zalomení stránky poté, co nefunguje



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ž jsem prošel všemi změnami, řekl jsem si, že bych se mohl zeptat dříve.

Použijte tyto vlastnosti CSS:

Page-break-after page-break-before

Například:

....

Žá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čí do kódu přidat js 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 bitem tabulky, pokaždé, když vytvoří zcela prázdnou stránku! Chcete-li tento problém vyřešit, změňte jej na page-break-after: auto. Správně se rozbije a nevytvoří další prázdnou stránku.

....

Přijatá odpověď mi nefungovala ve všech prohlížečích, ale poté, co mi css 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 obsahující řádky tabulky.

Kvůli problémům s hlavičkou 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 @vicnteherrera s některými vylepšeními (což jsou pravděpodobně 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 aplikujeme naše pravidla page-break-* na div . Zadruhé přidáme do horní části každého z těchto divů nějaké vycpávky, abychom kompenzovali jakékoli stylingové artefakty.

Opravy a úpravy vycpávek byly nutné pro kompenzaci nějakého chvění, které bylo zavedeno (z bootstrapu, myslím). 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 pěkný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; vejde se na konec poslední stránky, ale pokud je zápatí příliš vysoko, bude se překrývat s obsahem tabulky.

noha pouze s: zobrazení: skupina-zápatí stolu; 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; ) zde váš dlouhý text nebo vysoký obrázek

Jeden si rezervuje místo poslední stránky, druhý je ve vašem osobním zápatí.

test

nadpis
poznámky
X
X
X



Tento tweet mě dostal. Najednou jsem si uvědomil, že si ani nepamatuji, kdy jsem optimalizoval webové stránky pro tisk nebo alespoň zkontroloval, jak byly vytištěny na tiskárně.

Těžiště vývoje webu je na elektronické verze stránky. Stránky je třeba kontrolovat ve více prohlížečích, testovat na nich různé velikosti windows ... Tady záleží na tiskárnách. 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ť už to bylo cokoli, cítil jsem, že situace musí být naléhavě napravena.

Tištěná verze webové stránky má stejné právo na existenci jako elektronická. A pokud se snažíme, aby naše materiály byly co nejpřístupnější, nezanedbávejte papírová média. Také si nevytvářejte 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í údaje, pokyny nebo seznamy. Dříve nebo později se někdo určitě pokusí vytisknout něco z toho, co jste zveřejnili na internetu.

Haydon Pickering, autor Inclusive Design Patterns, k tomu říká: „Už dlouho nepoužívám domácí tiskárny. 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 poslouží. dobrá služba 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ů CSS pro tisk

Nejlepší způsob, jak přidat styly tisku na stránku, je deklarovat pravidlo @media v hlavním souboru CSS.

Body ( font-size: 18px; ) @media print ( /* styly tisku jsou zde */ body ( font-size: 28px; ) )
Případně můžete styly pro tisk vyjmout v samostatném souboru a zahrnout jej do HTML, ale tento přístup bude vyžadovat další požadavek při načítání stránky.

2. Testování

Jak hodnotit vzhled webová stránka připravena k tisku? Každému je jasné, že dát to na papír po každé změně stylu ne nejlepší řešení. Na „bezpapírové“ ověřování tištěných verzí stránek naštěstí možnosti prohlížečů zcela stačí.

V závislosti na prohlížeči můžete stránku exportovat do PDF, použijte funkci náhled nebo dokonce ladit stránku přímo ve vašem webovém prohlížeči.

Chcete-li ladit styly tisku ve Firefoxu, otevřete Panel vývojáře pomocí kombinace kláves Shift+F2 nebo provedením příkazu nabídky Vývoj → Panel vývoje. Vepište příkazový řádek, umístěné ve spodní části okna, následující: media emulate print , zadání dokončete stisknutím Vstupte. Aktivní karta se bude chovat, jako by měla typ média bych vytisknout, dokud stránku nezavřete nebo neobnovíte.

Emulace tisku ve Firefoxu

Tuto funkci má také Chrome. Otevřeno Vývojářské nástroje, pro který v MacOS můžete použít klávesovou zkratku cmd+opt+i, v Windows - Ctrl+Shift+I nebo spusťte 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 stisknout klávesu Esc, zobrazovací panel Řídicí panel a poté pomocí nabídky otevřete panel Vykreslování. V panelu vykreslování nastavte příznak Emulovat média CSS a vybrat si vytisknout.


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í měrné jednotky nejsou příliš vhodné pro obrazovkové verze stránek, ale pro tisk jsou přesně to, co potřebujete. Použití stylů tisku je naprosto bezpečné, navíc se doporučuje používat absolutní jednotky jako cm , mm , in , pt nebo pc .

Sekce (okraj-dole: 2 cm; )

4. Vlastnosti stránky

Pomocí pravidla @page můžete ovládat vlastnosti stránky, jako je její velikost, orientace a okraje. To se velmi hodí, řekněme, když je nutné, 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, nastavení prázdné stránky, umístění prvků v rozích stránky a . Může být dokonce použit k přípravě knih pro tisk.

5. Správa zalomení stránek

Vzhledem k tomu, že tištěné listy na rozdíl od webových stránek nejsou nekonečné, obsah webových stránek se dříve nebo později odlomí na jednom listu papíru a pokračuje na dalším. Existuje pět vlastností pro ovládání zalomení stránek.

▍Konec stránky před prvkem

Pokud chcete, aby byl prvek vždy na začátku stránky, můžete před ním vynutit konec stránky pomocí vlastnosti page-break-before.

Sekce ( page-break-before: always; )

▍Konec stránky po prvku

Vlastnost page-break-after umožňuje vynutit zalomení stránky po prvku. Pomocí této vlastnosti můžete také zakázat mezeru.

H2 ( zalomení stránky za: vždy; )

▍Konec stránky v prvku

Vlastnost page-break-inside se hodí, pokud se chcete vyhnout rozdělení prvku mezi dvě stránky.

Ul ( page-break-inside: avoid; )

▍Horní a spodní závěsné šňůrky

Někdy nemusíte vynucovat zalomení stránek, ale chcete mít pod kontrolou, jak se odstavce na okrajích stránky zobrazí.

Pokud se například poslední řádek odstavce na aktuální stránce nevejde, další stránka vytiskne poslední dva řádky tohoto odstavce. Je to proto, že vlastnost, kterou to ovládá (widows , tj. "horní visící čáry"), je ve výchozím nastavení nastavena na 2. To 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 odpovědná za spodní sirotky je také standardně nastavena na 2.

P ( sirotci: 3; )
Smyslem výše uvedeného kódu je, že aby se odstavec nezalomil celý 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ší ji 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 tisku jsou jednou z mála výjimek, kde je direktiva !important naprosto v pořádku ;)

7. Odstraňte nežádoucí obsah

Abyste neplýtvali inkoustem, měli byste z tištěné verze stránky odstranit vše nepotřebné, jako jsou obrovské krásné diapozitivy, reklama, navigační nástroje na webu a podobně. Můžete to udělat nastavením vlastnosti display na none. nepotřebné prvky. Je možné, že zjistíte, že je správné zobrazit pouze hlavní obsah stránky a skrýt vše ostatní:

Tělo > *:not(hlavní) (zobrazit: žádné; )

8. Výstup URL odkazů

Odkazy v podobě, v jaké se obvykle nacházejí na webových stránkách, jsou v tisku zcela zbytečné, pokud čtenář papírové verze dokumentu neví, kam vedou.

Chcete-li zobrazit adresy URL odkazů po jejich textových reprezentacích, stačí použít následující styl:

A:after ( content: " (" attr(href) ")"; )
Samozřejmě s tímto přístupem bude „dekódováno“ mnoho nadbytečných věcí. Například relativní odkazy, absolutní odkazy na stejném webu jako tištěná stránka, odkazy s kotvami a tak dále. Aby nedošlo k ucpání vytištěné stránky, bylo by lepší použít něco takového:

A:not():after ( content: " (" attr(href) ")"; )
Určitě to vypadá šíleně. Proto vysvětlím význam tohoto pravidla srozumitelně: „U každého odkazu, který má atribut začínající http, ale neobsahuje mywebsite.com, zobrazujte hodnotu atributu href.

9. Vysvětlení zkratek

Zkratky v textu by měly být umístěny v tagu a jejich přepisy musí být zahrnuty v atributu title. Pokud zkratky naformátujete tímto způsobem, jejich význam se velmi snadno zobrazí na tištěné stránce:

Abbr:after ( content: " (" attr(title) ")"; )

10. Vynutit tisk na pozadí

Prohlížeče obvykle nevykreslují barvy pozadí a obrázky na pozadí, když vykreslují stránku pro tisk, pokud jim to není výslovně řečeno. To vše je však někdy potřeba vytisknout. Zde se hodí 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. Mediální dotazy

Pokud píšete dotazy na média, jako je ten, který je zobrazen níže, mějte na paměti, že pravidla CSS v takových dotazech neovlivní tištěnou verzi stránky.

@media screen and (min. šířka: 48 em) ( /* pouze obrazovka */ )
Proč je to tak? Jde o to, že pravidla CSS platí pouze v případě, že hodnota min-width je 48 em a pokud je typ média screen . Pokud se zbavíme klíčového slova v tomto mediálním dotazu obrazovka slova, pak bude omezena pouze hodnotou min-width .

@media (min-width: 48em) ( /* všechny typy médií */ )

12. Tisk karet

Aktuální verze Firefoxu a Chrome umí tisknout mapy, ale například Safari ne. A co při tisku karet? Jeden z univerzální možnosti- používat statické mapy 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 materiál v The Smashing Magazine, kde můžete najít užitečné rady na toto téma. 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, nemusí zadávat její úplnou adresu na klávesnici.

14. O tisku neoptimalizovaných stránek

Při práci na téma tisku webových stránek jsem objevil skvělý nástroj, který vám umožní pohodlně připravit neoptimalizované stránky k tisku. S PrintLiminator

Přestože žijeme v digitální době, kdy je vše snadno dostupné, stále existuje mnoho lidí, kteří dávají přednost čtení dlouhého textu z papíru. Je možné, že si někteří uživatelé vytisknou text z vašeho webu, aby jej nečetli na počítači.

Schopnost vytvořit 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 styl obsahu webové stránky, aby bylo možné ji vytisknout, a my se budeme zabývat jednou z nich: zalomením stránky.

Co to dělá?

Pokud jste pracovali s textové editory, jako Microsoft Word a Pages, měli byste znát nabídku konce stránky, která vám umožňuje zalomit 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ánky

Vytvořili jsme například ukázkovou stránku, kterou vytiskneme. Našli jsme na něm špatný převod, jak můžete vidět níže.

Bude to vypadat lépe, když nadpis a spodní závěsný řádek začínají na další stránce.

K tomu použijeme vlastnost page-break-after a nastavíme ji na vždy, abychom přinutili další prvek přejít na další stránku.

Zalomení stránky ( zalomení stránky po: vždy ;)

Poté můžete vytvořit nový prvek s třídou mezi prvky nebo tímto způsobem přiřadit třídu k předchozímu prvku.

s Guma můžete pořídit kompozity z fotografie, pak to všechno dát dohromady, abyste získali pozadí bez doplňků, které nemáte.

Telefon na cesty

S Překladatel bude skvělým nástrojem pro vaše cesty, protože...

Nyní bude záhlaví a spodní závěsný řádek začínat na další stránce.

Horní a spodní závěsné šňůrky

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 dolní osamocené řádky.

V typografické praxi se horní a spodní převislé řádky týkají zbývajících slov a krátkých řádků, které se zdají být odtržené od zbytku odstavce na jiné stránce.

Pomocí vlastností sirotci (dolní sirotek) a vdovy (horní sirotek) můžeme nastavit minimální práh. V níže uvedeném příkladu určíme, že ve spodní části nebo na začátku odstavce, kde dojde k zalomení stránky, zůstanou alespoň tři řádky.

P ( sirotci : 3 ; vdovy : 3 ; )

Další zdroje

Probrali jsme základy používání tiskového konce stránky pro text na vašem webu a doufáme, že vás to inspiruje k zamyšlení nad styly tisku pro váš web, aby váš obsah vypadal dobře na obrazovce i na papíře.

Překlad - Stůl

Konce stránek

Ná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 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 rámečku aktuální stránky a způsobí, že se zbytek stromu dokumentu vykreslí v novém rámečku 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
Procento úkolu: N/A

"page-break-after"

Hodnota: auto | vždy | vyhnout se | vlevo | vpravo | zděděno
Počáteční hodnota: auto
Rozsah: prvky konstrukční úrovně
dědictví: ne
Procento úkolu: N/A
Zařízení: vizuální formátování, stránkování

"page-break-inside"

Význam: vyhnout se | auto | zděděno
Počáteční hodnota: auto
Rozsah: prvky konstrukční úrovně
dědictví: ano
Procento úkolu: N/A
Zařízení: vizuální formátování, stránkování

Hodnoty těchto vlastností mají následující význam:

auto

Nezahájí ani nezakáže konec stránky před (po nebo uvnitř) generovaného bloku.

vždy

Vždy zahájí konec stránky před (po) vygenerovaném bloku.

vyhýbat se

Zruší konec stránky před (po nebo uvnitř) generovaného bloku.

vlevo, odjet

Inicializuje jeden nebo dva konce stránek před (za) vygenerovaným blokem, takže další stránka je formátována jako levá stránka.

že jo

Zahájí jeden nebo dva konce stránek před (po) vygenerovaném bloku, takže další stránka je naformátována jako správná 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“ prvku následný prvek. Pokud mají tyto vlastnosti jiné hodnoty než „auto“, pak hodnoty „always“, „left“ a „right“ mají přednost před hodnotou „aoid“. Část o přijatelných koncích stránek poskytuje jasná pravidla pro spouštění nebo deaktivaci konců stránek pomocí těchto vlastností.

Použití pojmenovaných stránek: "page"
"strana"

Význam:<идентификатор>| auto
Počáteční hodnota: auto
Rozsah: prvky konstrukční úrovně
dědictví: ano
Procento úkolu: N/A
Zařízení: vizuální formátování, stránkování

Vlastností "page" lze definovat konkrétní typ stránky, na kterém bude prvek zobrazen.

V tomto příkladu budou všechny tabulky umístěny na pravou stranu stránky (nazývané „otočené“), která je orientována 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 odpovídající vlastnosti předchozího bloku stránky, jehož obsah rovněž patří na inline úroveň, 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 o vynucených zalomení stránek níže.

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 nepoužívá vůbec, přestože 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: prvky konstrukční úrovně
dědictví: ano
Procento úkolu: N/A
Zařízení: vizuální formátování, stránkování

"vdovy"

Význam:<целое>| zděděno
Počáteční hodnota: 2
Rozsah: prvky konstrukční úrovně
dědictví: ano
Procento úkolu: N/A
Zařízení: vizuální formátování, stránkování

Vlastnost "orphans" určuje minimální počet řádků odstavce, který musí zůstat na konci stránky. Vlastnost "widows" určuje minimální počet řádků odstavce, které musí 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 polích.

Povolené konce stránek

V normálním toku může dojít k přerušení stránky na následujících místech:

  1. V prostoru vyhrazeném pro vertikální okraje mezi konstrukčními bloky. Pokud na tomto místě dojde k přerušení stránky, vypočítané hodnoty odpovídajících vlastností „margin-top“ a „margin-bottom“ se nastaví na „0“.
  2. Mezi řádkovými rámečky v rámečku na úrovni struktury.

Nespojitosti uvažovaného typu splňují následující pravidla:

  • Pravidlo A: Přerušení (1) je povoleno pouze v případě, že to umožňují hodnoty vlastností „page-break-after“ a „page-break-before“ všech prvků pro vytváření bloku, které se vyskytují v bodě přerušení, což nastane když alespoň jeden z nich je „vždy“, „vlevo“ nebo „vpravo“ nebo jsou všechny současně „automatické“.
  • Pravidlo B: Pokud jsou však všechny tyto vlastnosti nastaveny na „auto“ a vlastnost „page-break-inside“ nejbližšího společného předka všech pojmenovaných prvků je nastavena na „vyvarovat“, pak není zalomení stránky povoleno na to umístění.
  • Pravidlo B: Zalomení stránky (2) je povoleno pouze v případě, že počet vložených rámečků mezi zalomením a začátkem posledního bloku bloku je roven nebo větší než hodnota vlastnosti „sirotci“ a počet vložených rámečků mezi zlomem a koncem rámečku je rovna nebo větší než hodnota vlastnosti "widows" .
  • Pravidlo D: Kromě toho je zalomení stránky (2) povoleno pouze tehdy, je-li vlastnost "page-break-inside" nastavena na "auto".

Pokud výše uvedená pravidla neumožňují vložení dostatečného množství zalomení, pravidla B a D jsou ignorována, aby se zabránilo vytékání obsahu z rámce stránky, což umožňuje vytvoření více zalomení.

Pokud poté není možné dosáhnout dostatečného počtu přestávek, pak se při hledání dalších přestávek neberou v úvahu pravidla A a B.

V absolutně umístěných blocích nemůže dojít k zalomení stránek.

Vynucené zalomení stránek

K přerušení stránky musí dojít (1), pokud je alespoň jedna ze všech vlastností „page-break-after“ a „page-break-before“ prvků pro vytváření bloku nalezených v místě přerušení „always“, „left“ , nebo „správně“.

Zalomení stránky by také mělo nastat (1), pokud se hodnoty vlastnosti "page" řádků bezprostředně před a po zalomení liší.

Konce stránek „Nejlepší“.

Jazyk CSS2 neurčuje, který konec stránky ze sady povolený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 uživatelští agenti dodržovali následující heuristiky (pokud se někdy neukáže, že si vzájemně odporují):

  • zalomení stránek by se mělo provádět co nejméně často;
  • všechny stránky, které nekončí nucenou přestávkou, by měly být přibližně stejně vysoké;
  • uvnitř bloku, který má ohraničení, by neměly být žádné mezery;
  • v tabulce by neměly být žádné mezery;
  • uvnitř přemisťovaného předmětu by neměly být žádné zlomy.

Předpokládejme, že šablona stylů obsahuje vlastnosti "orphans: 4" a "widows: 2" a v dolní čá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 nesmí porušovat omezení stanovená vlastností "vdovy", musí se z tohoto důvodu jeho druhá část skládat ze dvou řádků;
  • pokud má odstavec více než 23 řádků, pak by jeho první část měla obsahovat 20 řádků a druhá část by měla obsahovat všechny ostatní řádky.

Nyní předpokládejme, ž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ů, pak musí zůstat na aktuální stránce;
  • pokud odstavec obsahuje více než 9 řádků, pak jej nelze rozdělit (protože tím dojde k porušení omezení stanoveného vlastností "sirotci"). Proto by se měl přesunout na další stránku jako blok.