Az oldalblokk az oldalterületből, ahol a tartalom található, és az oldalterületet körülvevő margóból áll. A @page szabály bizonyos CSS-tulajdonságok módosítására szolgál dokumentum nyomtatásakor. Csak a margó elem margóit módosíthatja, illetve a megadott helyen oldaltöréseket is beállíthat.

@oldal ( margó: 2 hüvelyk; )

A @page szabályon belül beállíthat egyedi dokumentummezőket, például margó felső , jobb margó , alsó margó , margó bal :

2. Oldaltörések

Az oldaltöréseket az oldaltörés előtt , az oldaltörés utána és az oldaltörés belül tulajdonságokkal szabályozhatja. Ezek a tulajdonságok azokra a blokkszintű elemekre vonatkoznak, amelyek pozíciótulajdonsága relatív vagy statikus.

oldaltörés előtt
Értékek:
auto
mindig	Mindig oldaltörést ad az elem elé.
elkerül	Lehetőleg megakadályozza, hogy az elem előtt törést helyezzenek el.
balra	Egy vagy két oldaltörést ad egy elem elé, így a következő oldal bal oldali formátumú lesz. Az elemet a bal oldal tetejétől kezdve nyomtatjuk ki, azaz. a gerinctől balra lévő oldalon. Kétoldalas nyomtatáskor a papír hátoldalán fog megjelenni.
jobbra	Egy vagy két oldaltörést ad az elem elé. Az elem a jobb oldali szegély tetejétől kezdődően kerül kinyomtatásra. A következő oldal a megfelelő oldalnak lesz formázva.
örököl

Szintaxis:

@media print ( h1 (oldaltörés előtt: mindig;) )

oldaltörés után
Értékek:
auto	Az alapértelmezett érték az automatikus oldaltöréseket határozza meg.
mindig	Mindig oldaltörést ad az elem után.
elkerül	Lehetőleg megakadályozza, hogy az elem után törést tegyünk.
balra	Egy vagy két oldaltörést ad egy elem után, így a következő oldal bal oldali formátumú lesz. Az elemet a bal oldal tetejétől kezdve nyomtatjuk ki, azaz. a gerinctől balra lévő oldalon. Kétoldalas nyomtatáskor a papír hátoldalán fog megjelenni.
jobbra	Egy vagy két oldaltörést ad egy elem után, hogy a következő oldal a megfelelő oldalként legyen formázva. Az elem a jobb oldali szegély tetejétől kezdődően kerül kinyomtatásra.
örököl	Ezt a tulajdonságot a szülőelemtől örökli.

Szintaxis:

@media print ( lábléc (oldaltörés után: mindig;) )

A page-break-inside tulajdonság megmondja a böngészőnek, hogy az oldal törhet-e egy elemen belül vagy sem. De ha az elemről kiderül oldalnál hosszabb, akkor elkerülhetetlen a szünet.

Bár digitális korban élünk, ahol minden könnyen elérhető, még mindig sokan vannak, akik szívesebben olvasnak hosszú szöveget papírról. Előfordulhat, hogy egyes felhasználók kinyomtatják a szöveget az Ön webhelyéről, hogy a számítógéptől távolabb olvassák.

A tartalom nyomtatásra alkalmas megjelenítésének lehetősége már régóta létezik. Ezt a @media szabály használatával tehetjük meg a stíluslapon, így:

@media print ( /* Stílusszabályok */ }

Számos tulajdonság van, amely lehetővé teszi egy weboldal tartalmának stílusosítását, hogy az nyomtatásra kész legyen, és ezek közül az egyiket ismertetjük: az oldaltöréseket.

Mit csinál?

Ha dolgozott együtt szövegszerkesztők, mint pl Microsoft Wordés Oldalak, ismernie kell az oldaltörés menüt, amely lehetővé teszi a szöveg áthelyezését a következő oldalra.

Ez a modul ugyanezt teszi, lehetővé téve annak szabályozását, hogyan kerüljön át egy weboldal tartalma oldalról oldalra.

Oldaltörés használata

Példaként létrehoztunk egy bemutató oldalt, amelyet ki fogunk nyomtatni. Sikertelen átvitelt találtunk rajta, ahogy az alább látható.

Jobban fog kinézni, ha a fejléc és a lábléc a következő oldalon kezdődik.

Ehhez a page-break-affter tulajdonságot használjuk, és mindig értékre állítjuk, hogy a következő elemet a következő oldalra törjük.

Oldaltörés ( oldaltörés után : mindig ; )

Ezután létrehozhat az elemek között új elem osztállyal, vagy rendeljen osztályt az előző elemhez így.

A radír A funkció segítségével összetett képeket készíthet, majd mindezt összerakhatja, hogy a hátteret a nem használt extrák nélkül kapja meg.

A telefon az utazáshoz

S Fordító nagyszerű eszköz lesz az utazásokhoz, mivel...

Most a fejléc és az alsó függősor a következő oldalon kezdődik.

Felső és alsó függővonalak

A fenti módszer unalmas lehet, ha sok szöveged van. Tehát ahelyett, hogy a tartalmat a következő oldalra kényszerítené, jobb lenne egy minimális küszöbértéket beállítani a felső és az alsó lógó sorokhoz.

A tipográfiai gyakorlatban a felső és alsó sorok a fennmaradó szavakra és rövid sorokra utalnak, amelyek nem kapcsolódnak össze egy másik oldalon lévő bekezdés többi részével.

Az orphans (alsó függő húr) és az özvegyek (felső függő húr) tulajdonságok segítségével beállíthatjuk a minimális küszöböt. Az alábbi példában megadjuk, hogy legalább három sor maradjon annak a bekezdésnek az alján vagy elején, ahol az oldaltörés történik.

P (árvák: 3; özvegyek: 3;)

További források

Áttekintettük az oldaltörések nyomtatási használatának alapjait a webhelyek másolásakor, és reméljük, hogy ez arra ösztönzi Önt, hogy gondolkodjon el a webhelye nyomtatási stílusán, hogy tartalma jól nézzen ki a képernyőn és a papíron egyaránt.

Fordítás – Íróasztal

Ez a tweet megragadta. Hirtelen rájöttem, hogy már nem emlékszem, mikor optimalizáltam a weboldalakat nyomtatásra, vagy akár ellenőriztem is, hogy a nyomtatóra hogyan kerültek ki.

A webfejlesztés során a fő figyelem az oldalak elektronikus változataira összpontosul. Az oldalakat több böngészőben kell ellenőrizni, tesztelni különböző méretű windows... Vannak itt nyomtatók? Vagy megfeledkeztem a nyomtatási stílusokról, mert ritkán készítek magam papírmásolatot az oldalakról. Bárhogy is legyen, úgy éreztem, sürgősen korrigálni kell a helyzetet.

A weboldal nyomtatott változata ugyanolyan létjogosultsággal rendelkezik, mint az elektronikus változat. És ha arra törekszünk, hogy anyagainkat a lehető legjobban hozzáférhetővé tegyük, nem szabad elhanyagolnunk papír hordozó információ. Ezenkívül nem szabad feltételezéseket megfogalmaznia a felhasználókkal és viselkedésükkel kapcsolatban. Az emberek még mindig nyomtatnak weboldalakat nyomtatókon. Gondoljunk csak cikkekre vagy blogbejegyzésekre, recepteket, elérhetőségeket, útmutatást vagy listákat tartalmazó oldalakra. Előbb vagy utóbb valaki minden bizonnyal megpróbál kinyomtatni valamit, amit feltett az internetre.

Haydon Pickering, az „Inclusive Design Patterns” című könyv szerzője ezt mondja erről: „Régóta nem használok otthoni nyomtatókat. A lényeg itt az, hogy az az érzésem, hogy a nyomtatás megkezdése után körülbelül tíz perccel eltörnek. De nem vagyok minden."

Ha most észreveszi, hogy hozzám hasonlóan Ön sem fordított elég figyelmet a nyomtatási stílusokra, remélem, történetem jó szolgálatot tesz majd, és segít gyorsan felfrissíteni az emlékezetét. És ha még soha nem optimalizálta a weboldalakat nyomtatókra, a hasznos CSS-trükkök kis gyűjteménye segít a kezdésben.

1. CSS-stílusok használata a nyomtatáshoz

A legjobb módja annak, hogy nyomtatási stílusokat helyezzen el az oldalon, ha deklarál egy @media szabályt a fő CSS-fájlban.

Törzs ( betűméret: 18 képpont; ) @media print ( /* a nyomtatási stílusok ide kerülnek */ törzs ( betűméret: 28 képpont; ) )
Alternatív megoldásként a nyomtatási stílusokat külön fájlba helyezheti, és belefoglalhatja HTML-be, de ennél a megközelítésnél további kérésre lesz szüksége az oldal betöltésekor.

2. Tesztelés

Hogyan kell értékelni megjelenés nyomtatásra előkészített weboldal? Mindenki számára világos, hogy minden stílusváltás után papírra vetni nem legjobb megoldás. Szerencsére a böngésző képességei elégségesek az oldalak nyomtatott verzióinak „papírmentes” ellenőrzéséhez.

A böngészőtől függően exportálhatja az oldalt PDF formátumba, használhatja az előnézeti funkciót, vagy akár közvetlenül a webböngészőben is hibakeresheti az oldalt.

Nyissa meg a nyomtatási stílusok hibakereséséhez a Firefoxban Fejlesztői panel a billentyűkombináció segítségével Shift + F2 vagy a menüparancs végrehajtásával Fejlesztés → Fejlesztési panel. Lépj be parancssor az ablak alján található a következő: média emulátum nyomtatás , a bejegyzés befejezése a gomb megnyomásával Enter. Az aktív lap úgy fog működni, mintha az lenne média típus az lenne nyomtatás, amíg be nem zárja vagy frissíti az oldalt.

Nyomtatási emuláció a Firefoxban

A Chrome is rendelkezik hasonló funkcióval. Nyitott Fejlesztői eszközök, amelyhez MacOS rendszerben használhatja a billentyűparancsot CMD + Opt + I, V Windows - Ctrl + Shift + I, vagy hajtsa végre a menüparancsot További eszközök→ Fejlesztői eszközök. Ezután nyissa meg a render panelt. Ennek egyik módja a gomb megnyomása Esc, jelenítse meg a panelt Konzol, majd a menün keresztül nyissa meg a panelt Rendering. A megjelenítési panelen állítsa be a zászlót CSS Media emulálásaés válassza ki Nyomtatás.

Nyomtatási emuláció a Chrome-ban

A weboldalak nyomtatott verzióinak teszteléséről a StackOverflow oldalon olvashat bővebben.

3. Abszolút mértékegységek

Az abszolút egységek nem nagyon alkalmasak az oldalak képernyős változataira, de a nyomtatáshoz éppen erre van szükség. Nyomtatási stílusokban teljesen biztonságos, ráadásul abszolút mértékegységek használata javasolt, mint a cm, mm, in, pt vagy pc.

Szakasz ( margó-alsó: 2 cm; )

4. Oldal tulajdonságai

A @page szabály segítségével szabályozhatja az oldal tulajdonságait, például méretüket, tájolásukat és margókat. Ez nagyon jól jön például akkor, ha minden nyomtatott oldalnak azonos margókra van szüksége.

@médianyomtatás ( @oldal ( margó: 1 cm; ) )
A @page szabály a Paged Media Module szabvány része, amely sok nagyszerű dolgot kínál, mint például az első nyomtatandó oldal kiválasztása, üres oldalak beállítása, elemek elhelyezése az oldal sarkaiban és . Akár könyvek nyomtatásra való előkészítésére is használható.

5. Oldaltörések kezelése

Mivel a nyomtatott lapok a weboldalakkal ellentétben nem végtelenek, a weboldalak tartalma előbb-utóbb az egyik papírlapon véget ér, és a következőn folytatódik. Öt tulajdonság van az oldaltörések szabályozására.

▍ Oldaltörés az elem előtt

Ha azt szeretné, hogy egy elem mindig az oldal elején legyen, a page-break-before tulajdonság használatával oldaltörést kényszeríthet elé.

szakasz ( oldaltörés előtt: mindig; )

▍ Oldaltörés az elem után

Az oldaltörés utáni tulajdonság lehetővé teszi, hogy kényszerített oldaltörést állítson be egy elem után. Ennek a tulajdonságnak a használatával a törést is megelőzheti.

H2 (oldaltörés után: mindig; )

▍ Oldaltörés egy elemen belül

A page-break-inside tulajdonság akkor hasznos, ha el akarja kerülni, hogy egy elemet két oldal között szétválasszon.

Ul ( oldaltörés belül: kerülje; )

▍Felső és alsó függővonalak

Néha nem kell erőltetnie az oldaltöréseket, de szeretné szabályozni a bekezdések kimenetét az oldalhatárokon.

Például, ha az aktuális oldalon egy bekezdés utolsó sora nem fér el, akkor a bekezdés utolsó két sora a következő oldalra kerül nyomtatásra. Ennek az az oka, hogy az ezt vezérlő tulajdonság (widows, azaz „felső függő sorok”) alapértelmezés szerint 2-re van állítva.

P (özvegyek: 4; )
Ha más helyzet fordul elő, és egy bekezdésnek csak egy sora fér az aktuális oldalra, a teljes bekezdés a következő oldalra kerül nyomtatásra. Az alsó függővonalakért (árvák) felelős tulajdonság is alapértelmezés szerint 2-re van állítva.

P(árvák: 3;)
A fenti kód lényege, hogy ahhoz, hogy a teljes bekezdés ne kerüljön a következő oldalra, legalább három sornak el kell férnie az aktuális oldalon.

Ennek jobb megértéséhez vessen egy pillantást a CodePen segítségével készített példára. És itt van ugyanennek a példának a hibakeresési verziója, kényelmesebb tesztelni.

*, *:előtte, *:utána, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line ( háttér: átlátszó !fontos; szín: #000 !fontos; box-shadow: nincs !fontos: nincs !fontos)
Egyébként a nyomtatáshoz használt CSS stílusok azon kevés kivételek közé tartoznak, ahol a!important direktíva teljesen normális ;)

7. A felesleges tartalom eltávolítása

A tinta pazarlásának elkerülése érdekében az oldal nyomtatott változatából távolítson el mindent, ami felesleges, például hatalmas gyönyörű diákat, reklámot, webhelynavigációs eszközöket és hasonlókat. Ezt úgy tehetjük meg, hogy a display tulajdonságot none értékre állítjuk a felesleges elemekhez. Nagyon valószínű, hogy helyesnek találja, ha csak az oldal fő tartalmát jeleníti meg, és minden mást elrejt:

Body > *:not(main) ( kijelző: nincs; )

8. Linkcímek megjelenítése

A linkek, ahogyan általában a weboldalakon jelennek meg, nyomtatásban teljesen használhatatlanok, hacsak a dokumentum papír változatának olvasója nem tudja, hová vezetnek.

A linkcímek szöveges megjelenítése utáni megjelenítéséhez használja a következő stílust:

A:after ( tartalom: " (" attr(href) ")"; )
Természetesen ezzel a megközelítéssel sok szükségtelen dolog „megfejthető”. Például relatív linkek, abszolút linkek ugyanazon a webhelyen, ahol a nyomtatott oldal található, hivatkozások horgonyokkal stb. Annak érdekében, hogy ne zsúfolja össze a nyomtatott oldalt, jobb lenne valami ilyesmit használni:

A:not():after ( tartalom: " (" attr(href) ")"; )
Őrülten néz ki, persze. Tehát elmagyarázom a jelentését ennek a szabálynak egyszerű angolul: "Jelenítse meg a href attribútum értékét minden olyan hivatkozás mellett, amely http-vel kezdődő attribútummal rendelkezik, de nem tartalmazza a mywebsite.com címet."

9. Dekódolási rövidítések

A szövegben szereplő rövidítéseket a címkében kell elhelyezni , és ezek átiratát szerepeltetni kell a title attribútumban. Ha így formázza a rövidítéseket, a jelentésük nagyon könnyen megjeleníthető a nyomtatott oldalon:

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

10. Kényszerített háttérnyomtatás

Általában, amikor a böngészők megjelenítenek egy oldalt nyomtatásra, általában nem jelenítik meg a háttérszínt és a háttérképeket, hacsak Ön erre kifejezetten nem utasítja őket. Néha azonban mindezt ki kell nyomtatni. Itt segítségünkre lesz a nem szabványosított print-color-adjust tulajdonság, amely lehetővé teszi egyes böngészők alapértelmezett beállításainak felülírását.

Fejléc ( -webkit-print-color-adjust: pontos; print-color-adjust: pontos; )

11. Médialekérdezések

Ha az alábbiakhoz hasonló médialekérdezéseket ír, ne feledje, hogy a CSS-szabályok a következőhöz hasonlóak hasonló kéréseket nem befolyásolja az oldal nyomtatott változatát.

@media képernyő és (min-szélesség: 48em) ( /* csak képernyő */ )
Miért van ez így? A helyzet az, hogy a CSS-szabályok csak akkor kerülnek alkalmazásra, ha a minimális szélesség 48em, és ha a média típusa képernyő . Ha megszabadul ettől a médialekérdezéstől kulcsszó képernyő , akkor csak a minimális szélesség értéke korlátozza.

@media (min-width: 48em) ( /* minden médiatípus */ )

12. Kártyák nyomtatása

Jelenlegi Firefox verziókés a Chrome képes térképeket nyomtatni, de például a Safari ezt nem tudja. Mi a teendő kártyanyomtatáskor? Az egyik univerzális lehetőség a statikus térképek használata a dinamikus térképek helyett.

Térkép ( szélesség: 400 képpont; magasság: 300 képpont; háttérkép: url ("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&maptype=roadmap&shformatre "); -webkit-print-color-adjust: pontos; print-color-adjust: pontos; )

13. QR kódok

A fontos linkeket tartalmazó QR-kódok kinyomtatása nagymértékben javíthatja a weboldalak papíralapú változatainak használhatóságát. Itt található egy darab a The Smashing Magazine-ból, ahol megtalálhatja hasznos tippeket ebben a témában. Az egyik az, hogy a címüket QR-kód formájában nyomtatott oldalakon kell feltüntetni. Ennek eredményeként a felhasználónak ahhoz, hogy a böngészőben meg tudja nyitni azt az oldalt, amelyről a nyomtatás készült, nem kell a teljes címét beírnia a billentyűzeten.

14. A nem optimalizált oldalak nyomtatásáról

A weboldalnyomtatás témáján dolgozva felfedeztem egy kiváló eszközt, amellyel kényelmesen előkészítheti a nem optimalizált oldalakat a nyomtatáshoz. A Printliminator használata

Oldaltörések

A következő szakaszok a CSS2-ben használt oldalformázási modellt írják le. Öt különböző tulajdonságot használnak annak jelzésére, hogy a felhasználói ügynök hol végezhet vagy kell oldaltörést végrehajtania, és melyik oldal (balra vagy jobbra), amelyen továbbra is meg kell jelenítenie a tartalmat. Minden oldaltörés megszakítja az aktuális oldalblokk tartalmának megjelenítését, és a dokumentumfa fennmaradó részét egy új oldalblokkban jeleníti meg.

Törések az elemek előtt és után: "page-break-force", "page-break-after", "page-break-inside"

"oldaltörés előtt"

Kezdeti érték: auto
Öröklés: nem
Százalékos hozzárendelés: N/A

"oldaltörés után"

"oldal-betörés"

Jelentése: kerülje | auto | örökölt
Kezdeti érték: auto
Alkalmazási köre: szerkezeti szintű elemek
Öröklés: igen
Százalékos hozzárendelés: N/A
Eszközök: vizuális, oldalszámos

Ezen tulajdonságok értékei a következő jelentéssel bírnak:

auto

Nem kezdeményez és nem akadályoz meg oldaltörést a generált blokk előtt (után vagy azon belül).

mindig

Mindig oldaltörést kezdeményez a generált blokk előtt (után).

elkerül

Letiltja az oldaltörést a generált blokk előtt (után vagy belül).

balra

Egy vagy két oldaltörést kezdeményez a generált blokk előtt (után), így a következő oldal a bal oldali formátumú lesz.

jobbra

Egy vagy két oldaltörést kezdeményez a generált blokk előtt (után), hogy a következő oldal a megfelelő oldalnak megfelelően legyen formázva.

Az oldaltörés lehetséges helyét a szülőelem "page-break-inside" tulajdonsága, az előző elem "page-break-after" tulajdonsága és a "page-break-before" tulajdonsága határozza meg. következő elem. Ha ezeknek a tulajdonságoknak az értéke nem "auto", akkor az "always", "left" és "right" értékek elsőbbséget élveznek az "elkerülni" értékkel szemben. Az elfogadható oldaltörésekről szóló rész egyértelmű szabályokat tartalmaz az oldaltörések ezen tulajdonságok használatával történő engedélyezésére vagy letiltására.

Elnevezett oldalak használata: "oldal"

"oldal"

Jelentése:<идентификатор>| auto
Kezdeti érték: auto
Alkalmazási köre: szerkezeti szintű elemek
Öröklés: igen
Százalékos hozzárendelés: N/A
Eszközök: vizuális, oldalszámos

A "page" tulajdonság segítségével meghatározható az oldal konkrét típusa, amelyen az elem megjelenik.

Ebben a példában az összes tábla elhelyezése: jobb oldalon oldalak (az úgynevezett "elforgatott"), amelyek fekvő tájolásúak:

TÁBLÁZAT (oldal: elforgatva; oldaltörés előtt: jobbra)

A "page" tulajdonság hatása a következő: ha egy olyan oldalblokk "page" tulajdonságának értéke, amelynek tartalma az inline szinthez tartozik, eltér az előző oldalblokk hasonló tulajdonságának értékétől, melynek tartalma is a sorközi szinthez tartozik, akkor közéjük egy-két oldaltörés kerül be, ami után egy elnevezett lapblokkban készül el a kimenet. Lásd az alábbi részt az oldaltörések kényszerítéséről.

A következő példa két táblázatot jelenít meg a következő oldalakon: fekvő tájolás(természetesen ugyanazon az oldalon, ha mindketten elférnek rajta), a "narrow" oldaltípus egyáltalán nem használatos, pedig DIV elemre van állítva.

@oldal keskeny (méret: 9cm 18cm)
@oldal elforgatva (méret: fekvő)
DIV (oldal: szűk)
TÁBLÁZAT (oldal: elforgatva)

a dokumentumban használt

...

Oldaltörések az elemeken belül: "árvák", "özvegyek"

"árvák"

Jelentése:<целое>| örökölt
Kezdeti érték: 2
Alkalmazási köre: szerkezeti szintű elemek
Öröklés: igen
Százalékos hozzárendelés: N/A
Eszközök: vizuális, oldalszámos

"özvegyek"

Jelentése:<целое>| örökölt
Kezdeti érték: 2
Alkalmazási köre: szerkezeti szintű elemek
Öröklés: igen
Százalékos hozzárendelés: N/A
Eszközök: vizuális, oldalszámos

Az "árvák" tulajdonság megadja a bekezdéssorok minimális számát, amelyet az oldal alján kell hagyni. Az "özvegyek" tulajdonság megadja azoknak a bekezdéssoroknak a minimális számát, amelyeket az oldal tetején kell hagyni. Az alábbiakban példákat mutatunk be ezeknek a tulajdonságoknak az oldaltörések szabályozására való használatára.

A bekezdések formázásával kapcsolatos további információkért tekintse meg a sorblokkokról szóló részt.

Elfogadható oldaltörések

Normál folyamatban oldaltörések a következő helyeken fordulhatnak elő:

A szerkezeti blokkok közötti függőleges margóknak fenntartott térben. Ha ezen a helyen oldaltörés történik, akkor a megfelelő „margin-top” és „margin-bottom” tulajdonságok számított értéke „0” lesz.
Lineáris blokkok között egy szerkezeti szintű blokkon belül.

A vizsgált típusú megszakítások megfelelnek a következő szabályoknak:

A szabály: A törés (1) csak akkor megengedett, ha a törés helyén előforduló összes blokkot generáló elem "page-break-after" és "page-break-before" tulajdonságának értéke lehetővé teszi, hogy előforduljon, ami ez az a helyzet, amikor legalább az egyik „mindig”, „bal” vagy „jobb”, vagy mindegyik „automatikus”.
B szabály: Ha azonban ezeknek a tulajdonságoknak mindegyike "auto"-ra van állítva, és a legközelebbi ős "page-break-inside" tulajdonsága, amely minden megnevezett elemre közös, "elkerülni" értékre van állítva, akkor az adott helyen az oldaltörés tiltott.
B szabály: Az oldaltörés (2) csak akkor megengedett, ha a törés és a befejező törésblokk eleje közötti sorblokkok száma egyenlő vagy nagyobb, mint az "orphans" tulajdonság értéke, és a sorblokkok száma a törés és a blokk vége között egyenlő vagy nagyobb, mint a "widows" tulajdonság értéke .
D szabály: Ezenkívül az oldaltörések (2) csak akkor engedélyezettek, ha a "page-break-inside" tulajdonság "auto"-ra van állítva.

Ha a fenti szabályok nem teszik lehetővé elegendő számú törés beszúrását, akkor annak elkerülése érdekében, hogy a tartalom kicsússzon az oldalblokkból, a B és D szabályokat nem veszik figyelembe, ami lehetővé teszi további törések létrehozását.

Ha ezek után sem sikerül elegendő számú megszakadást elérni, akkor az A és B szabályokat nem veszik figyelembe a további megszakítási pontok keresésekor.

Oldaltörés nem fordulhat elő abszolút pozicionált blokkokban.

Kényszerített oldaltörések

Oldaltörésnek meg kell történnie (1), ha a törés helyén előforduló blokkokat generáló elemek összes "page-break-after" és "page-break-before" tulajdonsága közül legalább egy "mindig", "left" vagy " jobbra".

Oldaltörésnek akkor is meg kell történnie (1), ha a törés előtti és utáni sorblokkok "page" tulajdonságának értéke eltérő.

"Legjobb" oldaltörések

A CSS2 nyelv nem határozza meg, hogy az érvényes oldaltörések halmazából melyik oldaltörést kell használni; A CSS2 nem akadályozza meg a felhasználói ügynököket abban, hogy oldaltöréseket szúrjanak be bárhová, vagy ne használják azokat. A CSS2 specifikáció azonban azt javasolja, hogy a felhasználói ügynökök kövessék a következő heurisztikákat (amíg ki nem derül, hogy néha ellentmondanak egymásnak):

Az oldaltöréseket a lehető legritkábban kell végezni;
minden oldalnak, amely nem végződik kényszerű töréssel, megközelítőleg azonos magasságúnak kell lennie;
ne legyenek törések egy szegéllyel rendelkező blokkon belül;
az asztalon belül ne legyenek szünetek;
A mozgó tárgy belsejében nem lehetnek törések.

Tegyük fel, hogy a stíluslap tartalmazza az "orphans: 4" és "widows: 2" tulajdonságokat, és 20 sor (sordoboz) érhető el az aktuális oldal alján:

ha az aktuális oldal utolsó bekezdése legfeljebb 20 sort tartalmaz, akkor az aktuális oldalon kell maradnia;
ha egy bekezdés 21 vagy 22 sort tartalmaz, és a bekezdés második része nem sértheti az "özvegyek" tulajdonság által meghatározott korlátozásokat, akkor ennek értelmében a második része két sorból álljon;
ha egy bekezdés több mint 23 sorból áll, akkor az első rész 20 sorból álljon, a második rész pedig az összes többi sort.

Tegyük fel, hogy az "árvák" tulajdonság értéke "10", az "özvegyek" értéke "20", és az aktuális oldal alján 8 sor áll rendelkezésre:

ha az aktuális oldal végén lévő bekezdés legfeljebb 8 sort tartalmaz, akkor az aktuális oldalon kell maradnia;
ha egy bekezdés több mint 9 sorból áll, akkor nem osztható (mivel ez sértené az "árvák" tulajdonság által meghatározott korlátozást). Ezért blokkként kell áthelyezni a következő oldalra.

Választás