Tato stránka má za cíl testovat vlastnosti break-after a break-inside. Kvůli tomu v ní mohou být občas nesmyslné texty určené pouze k tomu, aby se obsah stránky dostatečně natáhnul. Ze stejného důvodu mohou mít prvky divné (příliš velké) rozměry. Občas bude text zbytečně natahován. Se stránkou pracuju tak, že si ji zobrazuji v prohlížeči a potom dávám pokyn tisknout.
Toto je odstavec, který následuje za nadpisem, který má nastaveno page-break-after: avoid. To by mělo způsobit, že se při tisku bude držet nadpis společně s následujícím textem, přestože by normálně zůstal na konci stránky. V roce 2022 nevidím, že by to fungovalo.
Z důvodů čistoty dalšího pokusu nemám nastaveno page-break-after:avoid pro žádné další nadpisy druhé úrovně v této stránce.
Tento konkrétní odstavec má nastaveno page-break-inside: avoid;. Cílem je, aby se nerozděloval mezi stránky. To funguje. Kdyby to nastavené neměl, na stránce by ještě byly asi 3 řádky textu. Je potřeba, aby byl text delší, jinak efekt nebude vidět. Zrovna pro odstavce není rozumné tuhle vlastnost takhle nastavovat, protože u odstavců je normální, že se můžou lámat mezi stránky a nikomu to nevadí.
Vlastnosti orphans a widows by měly dovolovat nastavení, kolik je minimální počet řádek odstavce, které se ještě budou tisknout na předchozí (orphans) nebo nové (widows) stránce. Tento konkrétní odstavec má nastaveno orphans: 3; widows: 3.
To funguje hezky. Normálně by tato stránka začínala jen dvěma řádky minulého odstavce. Ale protože má zadáno widows: 3, vynutí si ještě třetí řádek, který vezme z předchozí stránky. Ostavec samozřejmě musí mít dostatečný počet řádků.
Page-break-after a page-break-inside jsou specifické verze vlastností break-after a break-inside. Specifické pro tisk, tj. měly by fungovat úplně stejně. Samotné se dají použít ještě u sloupcového layoutu column-count, stejně jako orphans a widows.
Tato stránka má nastaveno contenteditable, aby se dal přidávat a ubírat text pro lepší testování funkčnosti.
Pro detailní porozumění příkladu si zobrazte zdroj. Příklad se vztahuje ke stránce tisk HTML stránek pomocí CSS.