Blok stranice sastoji se od područja stranice gdje se nalazi sadržaj i područja margine koje okružuje područje stranice. Pravilo @page se koristi za promjenu nekih CSS svojstava prilikom štampanja dokumenta. Možete promijeniti samo margine elementa margine, a također možete postaviti prijelome stranica na navedenoj lokaciji.

@stranica ( margina: 2in; )

Možete postaviti pojedinačna polja dokumenta unutar pravila @page, kao što su margin-top , margin-right , margin-bottom , margin-left :

2. Prelomi stranica

Možete kontrolirati prijelome stranice koristeći svojstva prijeloma stranice prije, prijelom stranice nakon i prelom stranice unutar. Ova svojstva se primjenjuju na elemente na razini bloka koji imaju svojstvo položaja relativno ili statično.

stranica-prelom-prije
vrijednosti:
auto
uvijek	Uvijek dodaje prijelom stranice prije elementa.
izbjegavati	Sprečava postavljanje pauze ispred elementa, ako je moguće.
lijevo	Dodaje jedan ili dva prijeloma stranice prije elementa tako da je sljedeća stranica formatirana kao lijeva stranica. Element će se štampati počevši od vrha lijeve strane, tj. na stranici lijevo od kičme. Kada se štampa dvostrano, pojaviće se na poleđini papira.
u pravu	Dodaje jedan ili dva prijeloma stranice prije elementa. Element će se štampati počevši od vrha desnog ruba. Sljedeća stranica će biti formatirana kao desna stranica.
naslijediti

sintaksa:

@media print ( h1 (prelom stranice: uvijek;) )

stranica-prijelom-poslije
vrijednosti:
auto	Zadana vrijednost specificira automatske prijelome stranica.
uvijek	Uvijek dodaje prijelom stranice nakon elementa.
izbjegavati	Sprečava dodavanje prekida nakon elementa, ako je moguće.
lijevo	Dodaje jedan ili dva prijeloma stranice nakon elementa tako da je sljedeća stranica formatirana kao lijeva stranica. Element će se štampati počevši od vrha lijeve strane, tj. na stranici lijevo od kičme. Kada se štampa dvostrano, pojaviće se na poleđini papira.
u pravu	Dodaje jedan ili dva prijeloma stranice nakon elementa tako da je sljedeća stranica formatirana kao prava stranica. Element će se štampati počevši od vrha desnog ruba.
naslijediti	Nasljeđuje ovo svojstvo od roditeljskog elementa.

sintaksa:

@media print (podnožje (prelom stranice: uvijek;) )

Svojstvo page-break-inside govori pretraživaču da li se stranica može prekinuti unutar elementa ili ne. Ali ako se ispostavi da je element duže od stranice, onda je pauza neizbježna.

Iako živimo u digitalnom dobu u kojem se svemu može lako pristupiti, još uvijek ima mnogo ljudi koji radije čitaju dug tekst s papira. Postoji mogućnost da će neki korisnici odštampati tekst sa vašeg sajta kako bi ga pročitali sa računara.

Mogućnost prikazivanja sadržaja pogodnog za štampanje postoji već dugo vremena. To možemo učiniti korištenjem pravila @media u tablici stilova, ovako:

@media print ( /* Pravila stila */ }

Postoji nekoliko svojstava koja vam omogućuju stiliziranje sadržaja web stranice kako biste je učinili spremnom za štampanje, a mi ćemo pokriti jedno od njih: prijelomi stranica.

šta to radi?

Ako ste radili sa uređivači teksta, kao što je Microsoft Word i Pages, trebali biste biti upoznati sa menijem prijeloma stranice, koji vam omogućava da premjestite tekst na sljedeću stranicu.

Ovaj modul radi istu stvar, omogućavajući vam da kontrolirate kako se sadržaj web stranice prenosi, stranicu po stranicu.

Korištenje prijeloma stranice

Kao primjer, napravili smo demo stranicu koju ćemo odštampati. Na njemu smo pronašli neuspjeli prijenos, kao što možete vidjeti u nastavku.

Bolje će izgledati ako zaglavlje i podnožje počnu na sljedećoj stranici.

Da bismo to učinili, koristimo svojstvo page-break-after i postavljamo ga na uvijek da prisilimo sljedeći element da pređe na sljedeću stranicu.

Prijelom stranice (prijelom stranice: uvijek ;)

Zatim možete kreirati između elemenata novi element sa klasom, ili na ovaj način dodijelite klasu prethodnom elementu.

Sa gumica Funkcija, možete snimiti kompozitne fotografije, a zatim sve to spojiti kako biste dobili pozadinu bez dodataka koje nemate.

Telefon za putovanje sa

S Translator će biti odličan alat za vaša putovanja kao...

Sada će zaglavlje i donji viseći red početi na sljedećoj stranici.

Gornje i donje viseće linije

Gornja metoda može biti zamorna ako imate puno teksta. Dakle, umjesto prisiljavanja sadržaja da ide na sljedeću stranicu, bilo bi bolje postaviti minimalni prag za gornje i donje viseće linije.

U tipografskoj praksi, gornji i donji redovi se odnose na preostale riječi i kratke redove koji se pojavljuju odvojeno od ostatka pasusa na drugoj stranici.

Koristeći svojstva siročad (donji viseći niz) i udovice (gornji viseći niz) možemo postaviti minimalni prag. U primjeru ispod navodimo da najmanje tri reda ostaju na dnu ili na početku pasusa gdje se javlja prijelom stranice.

P (siročad: 3; udovice: 3;)

Dodatni izvori

Pokrili smo osnove korištenja prijeloma stranica u štampi za kopiju web stranice i nadamo se da će vas to inspirirati da razmislite o stilovima ispisa za vašu web stranicu tako da vaš sadržaj izgleda dobro i na ekranu i na papiru.

Prevod – Sto

Ovaj tvit me je navukao. Odjednom sam shvatio da više ne mogu da se setim kada sam optimizovao web stranice za štampanje ili čak proveravao kako se izlaze na štampač.

Glavna pažnja prilikom izrade web stranica je usmjerena na elektronske verzije web stranica. Stranice se moraju provjeriti u više pretraživača, testirati na njima različite veličine windows... Ima li ovde štampača? Ili sam možda zaboravio na stilove štampe jer rijetko sam pravim papirne kopije stranica. Kako god bilo, smatrao sam da je situacija hitno potrebna.

Štampana verzija web stranice ima isto pravo na postojanje kao i elektronska verzija. I, ako nastojimo da naše materijale učinimo što dostupnijim, ne trebamo zanemariti papirni mediji informacije. Osim toga, ne biste trebali praviti pretpostavke o korisnicima i njihovom ponašanju. Ljudi i dalje štampaju web stranice na štampačima. Samo pomislite na članke ili postove na blogu, stranice s receptima, kontakt informacije, upute ili popise. Prije ili kasnije, neko će sigurno pokušati da odštampa nešto što ste objavili na internetu.

Evo šta o tome kaže Haydon Pickering, autor knjige “Inclusive Design Patterns”: “Dugo nisam koristio kućne štampače. Poenta je da imam osjećaj da se lome desetak minuta nakon što počnete da štampate. Ali ja nisam sve.”

Ako sada shvatite da, poput mene, niste obraćali dovoljno pažnje na stilove štampe, nadam se da će vam moja priča dobro poslužiti i pomoći vam da brzo osvježite pamćenje. A ako nikada niste optimizirali web stranice za štampače, moja mala kolekcija korisnih CSS trikova pomoći će vam da počnete.

1. Korišćenje CSS stilova za štampanje

Najbolji način da uključite stilove štampanja na svoju stranicu je da proglasite @media pravilo u glavnom CSS datoteci.

Body (font-size: 18px; ) @media print ( /* stilovi štampanja će ići ovdje */ body (font-size: 28px; ) )
Alternativno, možete staviti stilove štampanja u zasebnu datoteku i uključiti ih u HTML, ali sa ovim pristupom biće vam potreban dodatni zahtev prilikom učitavanja stranice.

2. Testiranje

Kako procijeniti izgled web stranica pripremljena za štampu? Svakome je jasno da stavljanje na papir nakon svake promjene stila nije najbolje rješenje. Na sreću, mogućnosti pretraživača su sasvim dovoljne za „bezpapirnu” proveru štampanih verzija stranica.

Ovisno o vašem pretraživaču, možete izvesti stranicu u PDF, koristiti funkciju pregleda ili čak otkloniti greške na stranici direktno u vašem web pregledniku.

Da biste otklonili greške u stilovima štampanja u Firefoxu, otvorite Developer Panel koristeći kombinaciju tastera Shift + F2 ili izvršavanjem naredbe menija Razvoj → Razvojni panel. Uđi komandna linija koji se nalazi na dnu prozora, sledeće: medij emulira print , završavajući unos pritiskom na Enter. Aktivna kartica će se ponašati kao da je za nju tip medija to bi bilo print, dok ne zatvorite ili osvježite stranicu.

Emulacija štampanja u Firefoxu

Chrome također ima sličnu funkciju. Otvori Alati za programere, za koji u MacOS-u možete koristiti prečicu na tastaturi CMD + Opt + I, V Windows – Ctrl + Shift + I, ili izvršite naredbu menija Dodatni alati→ Alati za programere. Nakon toga otvorite render panel. Jedan od načina da to učinite je da pritisnete tipku Esc, prikažite panel Konzola, a zatim kroz meni otvorite panel Rendering. U render panelu postavite zastavicu Emulirajte CSS medije i odaberite Print.

Emulacija štampanja u Chromeu

Više o testiranju štampanih verzija web stranica možete pročitati na StackOverflow.

3. Apsolutne mjerne jedinice

Apsolutne mjerne jedinice nisu baš pogodne za ekranske verzije stranica, ali za štampanje su upravo ono što vam treba. U stilovima štampe potpuno je siguran, štaviše, preporučuje se korištenje apsolutnih mjernih jedinica, poput cm, mm, in, pt ili pc.

Presjek ( margina-dno: 2 cm; )

4. Svojstva stranice

Možete koristiti pravilo @page za kontrolu svojstava stranice, kao što su njihova veličina, orijentacija i margine. Ovo je vrlo zgodno, recimo, kada trebate da sve odštampane stranice imaju iste margine.

@media print ( @stranica ( margina: 1cm; ) )
Pravilo @page je dio standarda Paged Media Module, koji nudi mnogo zanimljivih stvari poput odabira prve stranice za štampanje, postavljanja praznih stranica, pozicioniranja elemenata u uglovima stranice i . Može se čak koristiti i za pripremu knjiga za štampu.

5. Upravljanje prekidima stranica

Kako štampani listovi, za razliku od web stranica, nisu beskonačni, sadržaj web stranica prije ili kasnije završava na jednom listu papira i nastavlja se na sljedećem. Postoji pet svojstava za kontrolu prijeloma stranica.

▍ Prijelom stranice prije elementa

Ako želite da element uvijek bude na početku stranice, možete prisiliti prijelom stranice prije njega koristeći svojstvo page-break-before.

Odjeljak (prelom stranice-prije: uvijek;)

▍ Prijelom stranice nakon elementa

Svojstvo page-break-after omogućava vam da postavite prisilni prijelom stranice nakon elementa. Koristeći ovo svojstvo, također možete spriječiti lomljenje.

H2 (prelom stranice-poslije: uvijek; )

▍ Prijelom stranice unutar elementa

Svojstvo page-break-inside je zgodno kada želite izbjeći podjelu elementa između dvije stranice.

Ul (page-break-inside: izbjegavajte; )

▍ Gornje i donje viseće linije

Ponekad ne morate forsirati prijelome stranica, ali želite kontrolirati izlaz pasusa na granicama stranice.

Na primjer, ako posljednji red pasusa na trenutnoj stranici ne stane, posljednja dva reda tog pasusa će biti odštampana na sljedećoj stranici. To je zato što je svojstvo koje kontrolira ovo (udovice, tj. "gornji viseći redovi") postavljeno na 2 prema zadanim postavkama.

P ( udovice: 4; )
Ako se dogodi druga situacija i samo jedan red pasusa stane na trenutnu stranicu, cijeli pasus će biti odštampan na sljedećoj stranici. Svojstvo odgovorno za donje viseće linije (siročad) je također postavljeno na 2 po defaultu.

P(siročad: 3;)
Poenta gornjeg koda je da kako se cijeli pasus ne bi premotao na sljedeću stranicu, najmanje tri reda moraju stati na tekuću stranicu.

Da biste ovo bolje razumjeli, pogledajte primjer pripremljen pomoću CodePen-a. A evo i debug verzije istog primjera, prikladnije je testirati.

*, *:prije, *:poslije, *:prvo slovo, p:prvi red, div:prvi red, blok citat:prvi red, li:prvi red (pozadina: prozirna !važno; boja: #000 !important-shadow: none !important: none !important)
Inače, CSS stilovi za štampanje su jedan od retkih izuzetaka gde je direktiva!important apsolutno normalna ;)

7. Uklanjanje nepotrebnog sadržaja

Da ne biste trošili mastilo, trebalo bi da uklonite sve nepotrebno sa štampane verzije stranice, poput ogromnih lepih slajdova, reklama, alata za navigaciju sajta i slično. Ovo se može učiniti postavljanjem svojstva prikaza na ništa za nepotrebne elemente. Sasvim je moguće da ćete naći za pravo da prikažete samo glavni sadržaj stranice i sakrijete sve ostalo:

Tijelo > *:ne(glavno) (prikaz: nema; )

8. Prikaz adresa linkova

Veze, kako se obično pojavljuju na web stranicama, potpuno su beskorisne u štampi osim ako čitalac papirne verzije dokumenta ne zna kuda vode.

Da biste prikazali adrese veza nakon njihovog tekstualnog prikaza, samo koristite sljedeći stil:

O: poslije ( sadržaj: " (" attr(href) ")"; )
Naravno, ovakvim pristupom će se „dešifrovati“ mnogo nepotrebnih stvari. Na primjer, relativne veze, apsolutne veze na istom sajtu gde se nalazi štampana stranica, veze sa sidrima i tako dalje. Kako ne biste zatrpali ispisanu stranicu, bilo bi bolje koristiti nešto poput ovoga:

A:not():after ( sadržaj: " (" attr(href) ")"; )
Izgleda ludo, naravno. Pa ću objasniti značenje ovog pravila na običnom engleskom: "Prikaži vrijednost atributa href pored svake veze koja ima atribut koji počinje s http, ali ne sadrži mywebsite.com."

9. Dekodiranje skraćenica

Skraćenice u tekstu se moraju staviti u tag , a njihovi transkripti moraju biti uključeni u atribut title. Ako kratice formatirate na ovaj način, njihova se značenja vrlo lako mogu prikazati na odštampanoj stranici:

Abbr:after ( sadržaj: " (" attr(title) ")"; )

10. Prisilno pozadinsko štampanje

Obično, kada pretraživači prikazuju stranicu za štampanje, oni ne prikazuju boju pozadine i pozadinske slike osim ako im to izričito ne kažete. Međutim, ponekad je sve ovo potrebno odštampati. Ovdje će nam pomoći nestandardizirano svojstvo print-color-adjust, koje vam omogućava da poništite zadane postavke za neke pretraživače.

Zaglavlje ( -webkit-print-color-adjust: točno; print-color-adjust: točno; )

11. Medijski upiti

Ako pišete medijske upite kao što je sljedeće, imajte na umu da CSS vlada sličnih zahtjeva neće uticati na štampanu verziju stranice.

@medijski ekran i (min. širina: 48em) ( /* samo ekran */ )
Zašto je to tako? Stvar je u tome da se CSS pravila primjenjuju samo ako je vrijednost min-width 48em i ako je tip medija screen . Ako se riješite ovog medijskog upita od ključna riječ screen , tada će biti ograničen samo vrijednošću min-width.

@media (minimalna širina: 48em) ( /* svi tipovi medija */ )

12. Štampanje kartica

Current Firefox verzije i Chrome može štampati mape, ali, na primjer, Safari to ne može. Šta raditi prilikom štampanja kartica? Jedna od univerzalnih opcija je korištenje statičkih mapa umjesto dinamičkih.

Karta ( širina: 400px; visina: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format_resh&visual "); -webkit-print-color-adjust: točno; print-color-adjust: točno; )

13. QR kodovi

Ispis QR kodova koji sadrže važne linkove može uvelike poboljšati upotrebljivost papirnatih verzija web stranica. Evo članka iz The Smashing Magazina gdje možete pronaći korisni savjeti na ovu temu. Jedan od njih je da se njihove adrese uvrste u obliku QR kodova na štampane stranice. Kao rezultat toga, korisnik, da bi otvorio stranicu sa koje je ispisan u pretraživaču, neće morati da ukuca svoju punu adresu na tastaturi.

14. O štampanju neoptimiziranih stranica

Radeći na temi štampanja web stranica, otkrio sam odličan alat koji vam omogućava da na praktičan način pripremite neoptimizirane stranice za štampanje. Koristeći Printliminator

Prelomi stranica

Sljedeći odjeljci opisuju model formatiranja stranice koji se koristi u CSS2. Pet različitih svojstava se koristi da naznače korisničkom agentu gdje može ili treba izvršiti prijelom stranice i stranicu (lijevu ili desnu) na kojoj treba nastaviti da prikazuje sadržaj. Svaki prijelom stranice prekida prikaz sadržaja u trenutnom bloku stranice i uzrokuje da se ostatak stabla dokumenta prikaže u novom bloku stranice.

Prelomi prije i poslije elemenata: "page-break-before", "page-break-after", "page-break-inside"

"prelom stranice-prije"

Početna vrijednost: auto
Nasljeđe: br
Procentualna dodjela: N/A

"page-break-after"

"prelom stranice unutra"

Značenje: izbjegavati | auto | naslijeđeno
Početna vrijednost: auto
Područje primjene: elementi konstruktivnog nivoa
Nasljeđe: da
Procentualna dodjela: N/A
Uređaji: vizuelni, paginirani

Vrijednosti ovih svojstava imaju sljedeće značenje:

auto

Ne pokreće niti sprečava prelom stranice prije (nakon ili unutar) generiranog bloka.

uvijek

Uvijek inicira prijelom stranice prije (nakon) generiranog bloka.

izbjegavati

Onemogućuje prijelom stranice prije (nakon ili unutar) generiranog bloka.

lijevo

Pokreće jedan ili dva prijeloma stranice prije (nakon) generiranog bloka, tako da je sljedeća stranica formatirana kao lijeva stranica.

u pravu

Pokreće jedan ili dva prijeloma stranice prije (nakon) generiranog bloka, tako da je sljedeća stranica formatirana kao prava stranica.

Potencijalna lokacija prijeloma stranice određena je svojstvom "page-break-inside" roditeljskog elementa, svojstvom "page-break-after" prethodnog elementa i svojstvom "page-break-before". naknadni element. Ako su vrijednosti ovih svojstava različite od "auto", tada vrijednosti "uvijek", "lijevo" i "desno" imaju prednost nad vrijednošću "izbjegavati". Odjeljak o prihvatljivim prijelomima stranica pruža jasna pravila za omogućavanje ili onemogućavanje prijeloma stranica pomoću ovih svojstava.

Korištenje imenovanih stranica: "stranica"

"stranica"

Značenje:<идентификатор>| auto
Početna vrijednost: auto
Područje primjene: elementi konstruktivnog nivoa
Nasljeđe: da
Procentualna dodjela: N/A
Uređaji: vizuelni, paginirani

Svojstvo "stranica" može se koristiti za definiranje specifičnog tipa stranice na kojoj će se element prikazati.

U ovom primjeru, sve tabele će biti postavljene po desnu stranu stranice (zvane "rotirane") koje su u pejzažnoj orijentaciji:

TABELA (stranica: rotirana; prijelom stranice-prije: desno)

Učinak svojstva "page" je sljedeći: ako se vrijednost svojstva "page" bloka stranice, čiji sadržaj pripada inline nivou, razlikuje od vrijednosti sličnog svojstva prethodnog bloka stranice, čiji sadržaj takođe pripada inline nivou, onda se između njih ubacuju jedan ili dva preloma stranica, nakon čega se izlaz proizvodi u bloku stranice sa imenom. Pogledajte odjeljak ispod o prisiljavanju prijeloma stranica.

Sljedeći primjer prikazuje dvije tabele na stranicama sa pejzažna orijentacija(na istoj stranici, naravno, ako oboje stanu na nju), tip "uske" stranice se uopće ne koristi, iako je postavljen za DIV element.

@strana uska (veličina: 9cm 18cm)
@stranica je rotirana (veličina: pejzaž)
DIV (stranica: uska)
TABELA (stranica: rotirana)

korišteno u dokumentu

...

Prelomi stranica unutar elemenata: "siročad", "udovice"

"siročad"

Značenje:<целое>| naslijeđeno
Početna vrijednost: 2
Područje primjene: elementi konstruktivnog nivoa
Nasljeđe: da
Procentualna dodjela: N/A
Uređaji: vizuelni, paginirani

"udovice"

Značenje:<целое>| naslijeđeno
Početna vrijednost: 2
Područje primjene: elementi konstruktivnog nivoa
Nasljeđe: da
Procentualna dodjela: N/A
Uređaji: vizuelni, paginirani

Svojstvo "orphans" specificira minimalni broj redova pasusa koji treba ostaviti na dnu stranice. Svojstvo "widows" specificira minimalni broj redova pasusa koji treba ostaviti na vrhu stranice. Primjeri korištenja ovih svojstava za kontrolu prijeloma stranica su dati u nastavku.

Za više informacija o oblikovanju pasusa, pogledajte odjeljak o blokovima linija.

Prihvatljivi prijelomi stranica

U normalnom toku, prijelomi stranica mogu se pojaviti na sljedećim mjestima:

U prostoru rezerviranom za vertikalne margine između blokova konstrukcija. Ako dođe do prijeloma stranice na ovoj lokaciji, tada se izračunate vrijednosti odgovarajućih svojstava "margin-top" i "margin-bottom" postavljaju na "0".
Između linearnih blokova unutar bloka strukturnog nivoa.

Diskontinuiteti tipa koji se razmatra zadovoljavaju sljedeća pravila:

Pravilo A: Prekid (1) je dozvoljen samo ako vrijednosti svojstava "page-break-after" i "page-break-before" svih elemenata koji generiraju blokove koji se javljaju na lokaciji prekida dozvoljavaju da se dogodi, što je slučaj kada je barem jedan od njih "uvijek", "lijevo" ili "desno", ili su svi "automatski".
Pravilo B: Međutim, ako su sva ova svojstva postavljena na "auto" i svojstvo "page-break-inside" najbližeg pretka zajedničko svim imenovanim elementima je postavljeno na "aoid", tada je prijelom stranice na toj lokaciji zabranjeno.
Pravilo B: Prijelom stranice (2) je dozvoljen samo ako je broj blokova reda između prijeloma i početka završnog bloka prekida jednak ili veći od vrijednosti svojstva "siročad" i broja blokova reda između prekida i kraja bloka jednaka je ili veća od vrijednosti svojstva "widows".
Pravilo D: Štaviše, prijelomi stranica (2) su dozvoljeni samo ako je svojstvo "page-break-inside" postavljeno na "auto".

Ako vam gornja pravila ne dozvoljavaju da unesete dovoljan broj prijeloma, tada se, kako bi se izbjeglo izlivanje sadržaja iz bloka stranice, pravila B i D ne uzimaju u obzir, što vam omogućava da kreirate dodatne prekide.

Ako ni nakon toga nije moguće postići dovoljan broj diskontinuiteta, tada se pravila A i B ne uzimaju u obzir za traženje dodatnih tačaka diskontinuiteta.

Prelomi stranica se ne mogu pojaviti u apsolutno pozicioniranim blokovima.

Prisilni prelomi stranica

Prijelom stranice mora se dogoditi (1) ako je barem jedno od svih svojstava "page-break-after" i "page-break-before" elemenata koji generiraju blokove koji se javljaju na lokaciji prijeloma "uvijek", "lijevo" ili " desno".

Prijelom stranice također se mora dogoditi (1) ako su vrijednosti svojstva "stranica" blokova reda neposredno prije i nakon prijeloma različite.

"Najbolji" prelomi stranica

CSS2 jezik ne specificira koji prijelom stranice iz skupa važećih prijeloma stranica treba koristiti; CSS2 ne sprečava korisničke agente da umetnu prelome stranica bilo gde ili da ih uopšte ne koriste. Ali CSS2 specifikacija snažno preporučuje da korisnički agenti slijede sljedeću heuristiku (sve dok se ne ispostavi da su ponekad u suprotnosti):

Prelomi stranica treba da se rade što je rjeđe moguće;
sve stranice koje se ne završavaju prinudnim prekidom trebaju biti približno iste visine;
ne bi trebalo biti prekida unutar bloka koji ima ivicu;
unutar tabele ne bi trebalo biti prekida;
Unutar objekta koji se kreće ne bi trebalo biti lomova.

Recimo da lista stilova sadrži svojstva "siročad: 4" i "udovice: 2", a na dnu trenutne stranice je dostupno 20 linija (okviri linija):

ako zadnji pasus trenutne stranice ne sadrži više od 20 redova, onda mora ostati na trenutnoj stranici;
ako paragraf sadrži 21 ili 22 reda, a drugi dio pasusa ne smije kršiti ograničenja postavljena svojstvom "udovice", onda se, na osnovu toga, njegov drugi dio mora sastojati od dva reda;
ako pasus ima više od 23 reda, onda prvi dio treba da se sastoji od 20 redova, a drugi dio treba da uključuje sve ostale redove.

Sada recimo da je vrijednost svojstva "orphans" "10", vrijednost svojstva "widows" je "20", a na dnu trenutne stranice ima 8 dostupnih redova:

ako pasus na kraju trenutne stranice ne sadrži više od 8 redova, onda mora ostati na trenutnoj stranici;
ako paragraf sadrži više od 9 redova, onda se ne može podijeliti (pošto bi se time prekršilo ograničenje postavljeno svojstvom "orphans"). Stoga ga treba premjestiti na sljedeću stranicu kao blok.

Izbor