Prijelom html stranice za ispis. Prijelom stranice za ispis pomoću CSS3. O ispisu neoptimiziranih stranica

Blok stranice sastoji se od područja stranice koje sadrži sadržaj i područja margine koje okružuje područje stranice. Pravilo @page koristi se za promjenu nekih css svojstava prilikom ispisa dokumenta. Možete promijeniti samo marginu elementa, a također možete postaviti prijelome stranica na određenom mjestu.

@stranica (margina: 2in;)

Moguće je definirati pojedinačne margine dokumenta unutar pravila @page, kao što su margin-top, margin-right, margin-bottom, margin-left:

2. Prijelomi stranica

Prijelome stranice možete kontrolirati pomoću svojstava prijeloma stranice prije, prijeloma stranice poslije i prijeloma stranice unutar. Ova svojstva se primjenjuju na blok elemente za koje je svojstvo položaja postavljeno na relativno ili statičko.

stranica-prijelom-prije
vrijednosti:
auto
stalno	Uvijek dodaje prijelom stranice prije elementa.
Izbjegavajte	Poništava postavljanje prijeloma ispred elementa, ako je moguće.
lijevo	Dodaje jedan ili dva prijeloma stranice prije elementa tako da je sljedeća stranica oblikovana kao lijeva stranica. Element će se ispisivati počevši od vrha lijeve stranice, tj. na stranici lijevo od kralježnice. Za obostrani ispis, ispisuje se na poleđini lista papira.
pravo	Dodaje jedan ili dva prijeloma stranice prije elementa. Element će se ispisivati počevši od vrha desnog ruba. Sljedeća stranica će biti oblikovana kao desna stranica.
naslijediti

Sintaksa:

@medijski ispis (h1 (prijelom stranice: uvijek;))

stranica-prijelom-poslije
vrijednosti:
auto	Zadano je postavljanje automatskih prijeloma stranica.
stalno	Uvijek dodaje prijelom stranice nakon elementa.
Izbjegavajte	Poništava dodavanje prekida nakon elementa, ako je moguće.
lijevo	Dodaje jedan ili dva prijeloma stranice nakon elementa tako da je sljedeća stranica oblikovana kao lijeva stranica. Element će se ispisivati počevši od vrha lijeve stranice, tj. na stranici lijevo od kralježnice. Za obostrani ispis, ispisuje se na poleđini lista papira.
pravo	Dodaje jedan ili dva prijeloma stranice nakon elementa tako da je sljedeća stranica oblikovana kao prava stranica. Element će se ispisivati počevši od vrha desnog ruba.
naslijediti	Nasljeđuje ovo svojstvo od roditeljskog elementa.

Sintaksa:

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

Svojstvo page-break-inside govori pregledniku može li se stranica prekinuti unutar elementa ili ne. Ali ako je element duži od stranice, prekid je neizbježan.

Kako se nositi s prijelomima stranica pri ispisu velike HTML tablice (8)

Imam projekt koji zahtijeva ispis HTML tablice s mnogo redaka.

Moj problem je kako se tablica ispisuje na više stranica. Ponekad reže red na pola, čineći ga nečitljivim jer se jedna polovica nalazi na rubu stranice, a ostatak se ispisuje na vrhu sljedeće stranice.

Jedino uvjerljivo rješenje koje se mogu sjetiti je korištenje složenih DIV-ova umjesto tablice i prisiljavanje prijeloma stranica ako je potrebno... ali prije nego što prođem kroz sve promjene, mislio sam da bih mogao pitati ovdje ranije.

Koristite ova CSS svojstva:

Stranica-prijelom-poslije prijeloma stranice-prije

Na primjer:

....

Nijedan od ovdje navedenih odgovora mi nije uspio u Chromeu. AAverin na GitHubu je stvorio neki korisni Javascript za ovo i meni je uspio:

Samo dodajte js svom kodu i dodajte klasu splitForPrint u tablicu i ona će uredno podijeliti tablicu na više stranica i dodati zaglavlje tablice na svaku stranicu.

Napomena: kada koristite prijelom stranice: uvijek za oznaku, stvara prijelom stranice nakon posljednjeg bita tablice, stvarajući svaki put potpuno praznu stranicu! Da biste to popravili, samo ga promijenite u page-break-after: auto. Pokvarit će se ispravno i neće stvoriti dodatnu praznu stranicu.

....

Prihvaćeni odgovor nije radio za mene u svim preglednicima, ali nakon što je css zapravo radio za mene:

Tr (prikaz: tablica-red-grupa; stranica-prelom-unutar: izbjegavati; prijelom-stranice-poslije: auto;)

html struktura je bila:

...

U mom slučaju, bilo je dodatnih problema s thead tr, ali to je riješilo izvorni problem držanja redova tablice.

Zbog problema sa zaglavljem, na kraju sam dobio:

#theTable td * (page-break-inside: izbjegavajte;)

To nije spriječilo da se redovi slome; samo sadržaj svake ćelije.

Završio sam s @vicenteherrerinim pristupom, s nekim ugađanjima (što je možda bootstrap 3).

U osnovi; ne možemo razbiti tr s ili td s jer oni nisu elementi na razini bloka. Stoga stavljamo div u svaki od njih i primjenjujemo naša pravila za prelom stranice na divove. Drugo, na vrh svakog od ovih div-ova dodajemo nešto ispod kako bismo nadoknadili sve stilske artefakte.

Izmjene i prilagodbe dopuna su bile potrebne kako bi se kompenzirao dio podrhtavanja koji je bio uveden (iz bootstrapa, pretpostavljam). Nisam siguran predstavljam li novo rješenje iz drugih odgovora na ovo pitanje, ali možda nekome pomogne.

Nedavno sam riješio ovaj problem lijepim rješenjem.

IzbjegavajteBreak (obrub: 2px čvrsta; page-break-inside: izbjegavajte;)

Funkcija Ispis () ($ (". TableToPrint td, .tableToPrint th"). Svaka (funkcija () ($ (ovo) .css ("width", $ (ovo) .width () + "px"))) ; $ (". tableToPrint tr"). wrap ("

"); window.print ();)

Djeluje kao šarm!

Testirao sam mnoga rješenja i nijedno nije dobro funkcioniralo.

Isprobao sam mali trik i uspio je:

tfoot sa stilom: položaj: fiksni; dno: 0px; položaj: fiksni; dno: 0px; stane na dno zadnje stranice, ali ako je podnožje previsoko, preklapa se sa sadržajem tablice.

tfoot samo sa: display: table-footer-group; ne preklapa se, ali nije na dnu zadnje stranice...

Stavimo dvije noge:

TFOOT.placer (zaslon: table-footer-group; visina: 130px;) TFOOT.contenter (zaslon: table-footer-group; pozicija: fiksna; dno: 0px; visina: 130px;) vaš dugi tekst ili visoka slika ovdje

Jedna rezervira prostor na stranicama bez stražnje strane, a druga u vašem osobnom podnožju.

Test

naslov
bilješke
x
x
x

Iako živimo u digitalnom dobu u kojem se svemu može lako pristupiti, još uvijek ima mnogo ljudi koji radije čitaju dugi tekst s papira. Postoji šansa da će neki korisnici ispisati tekst s vaše stranice kako bi ga mogli čitati izvan računala.

Mogućnost prikazivanja sadržaja prikladnog za ispis postoji već dugo vremena. To možemo učiniti pomoću pravila @media u tablici stilova na sljedeći način:

@medijski ispis ( / * Pravila stila * / }

Postoji nekoliko svojstava koja vam omogućuju stiliziranje sadržaja web stranice kako biste je učinili ispisljivom, a mi ćemo pokriti jedno: prijelom stranice.

Što to radi?

Ako ste radili s uređivačima teksta kao što su Microsoft Word i Pages, trebali biste biti upoznati s izbornikom prijeloma stranice koji vam omogućuje prelamanje teksta na sljedećoj stranici.

Ovaj modul čini isto, omogućujući vam da kontrolirate kako je sadržaj web stranice omotan, stranicu po stranicu.

Korištenje prijeloma stranice

Kao primjer, napravili smo demo stranicu koju ćemo ispisati. Pronašli smo loš prijenos na njemu, kao što možete vidjeti u nastavku.

Bolje će izgledati ako naslov i napušteni red počnu na sljedećoj stranici.

Da bismo to učinili, koristimo svojstvo page-break-after i postavljamo ga na uvijek kako bismo prisilili sljedeći element da ide na sljedeću stranicu.

Prijelom stranice (prijelom stranice: uvijek;)

Zatim možete stvoriti novi element s klasom između elemenata ili na ovaj način dodijeliti klasu prethodnom elementu.

Uz Gumica za brisanje značajka, možete snimiti složene fotografije, a zatim sve to spojiti kako biste dobili pozadinu bez dodataka koje nemate.

Telefon za putovanje s

S Prevoditelj bit će izvrstan alat za vaša putovanja kao...

Sada će naslov i donji otvor početi na sljedećoj stranici.

Gornje i donje viseće linije

Gornja metoda može biti zamorna ako imate puno teksta. Dakle, umjesto da prisiljavate sadržaj da ide na sljedeću stranicu, bolje je postaviti minimalni prag za gornju i donju siročad.

U tipografskoj praksi, gornji i donji ukrasi odnose se na ostatke riječi i kratke retke koji se čine otkinutim od ostatka odlomka na drugoj stranici.

Koristeći svojstva siročad (donja siročad) i udovice (gornja siročad) možemo postaviti minimalni prag. U donjem primjeru navodimo da najmanje tri retka ostanu na dnu ili na početku odlomka gdje se događa prijelom stranice.

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

Dodatni izvori

Pokrili smo osnove korištenja prijeloma stranice za ispis za tekst na vašoj web-lokaciji i nadamo se da će vas to potaknuti da razmislite o stilovima za ispis vaše web stranice kako bi vaš sadržaj izgledao dobro i na ekranu i na papiru.

Prijevod - Dužnost

Prijelomi stranica

Sljedeći odjeljci opisuju model oblikovanja stranice koji se koristi u CSS2. Pet različitih svojstava koristi se da se korisničkom agentu kaže gdje može ili treba razbiti stranicu i stranicu (lijevu ili desnu) na kojoj bi trebao nastaviti prikazivati sadržaj. Svaki prijelom stranice prekida prikaz sadržaja u okviru trenutne stranice i uzrokuje da se ostatak stabla dokumenta prikaže u novom okviru stranice.

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

"prijelom stranice"

Početna vrijednost: auto
Nasljedstvo: br
Dodjela postotaka: N / A

"stranica-prijelom-poslije"

"prelom stranice unutar"

Vrijednost: izbjegavati | auto | naslijeđeno
Početna vrijednost: auto
Opseg: elementi strukturne razine
Nasljedstvo: da
Dodjela postotaka: N / A
Uređaji: vizualno oblikovanje, paginirano

Vrijednosti ovih svojstava imaju sljedeća značenja:

auto

Ne pokreće ili ne dopušta prijelom stranice prije (nakon ili unutar) generiranog bloka.

stalno

Uvijek pokreće prijelom stranice prije (nakon) generiranog bloka.

Izbjegavajte

Poništava 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.

pravo

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" svojstva 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 pokretanje ili nedopuštanje prijeloma stranica pomoću ovih svojstava.

Korištenje imenovanih stranica: "stranica"

"stranica"

Značenje:<идентификатор>| auto
Početna vrijednost: auto
Opseg: elementi strukturne razine
Nasljedstvo: da
Dodjela postotaka: N / A
Uređaji: vizualno oblikovanje, paginirano

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

U ovom primjeru, sve će tablice biti smještene na desnoj strani stranice (nazvane "rotirane"), koja je u pejzažnoj orijentaciji:

TABLICA (stranica: zarotirana; prijelom stranice-prije: desno)

Radnja svojstva "stranica" je sljedeća: ako se vrijednost svojstva "stranica" bloka stranice, čiji sadržaj pripada inline razini, razlikuje od vrijednosti sličnog svojstva prethodnog bloka stranice, čiji sadržaj također pripada inline razini, tada se između njih ubacuju jedan ili dva prijeloma stranice, nakon čega se vrši izlaz u imenovanom bloku stranice. Pogledajte odjeljak u nastavku o prisilnim prijelomima stranica.

U sljedećem primjeru, dvije su tablice prikazane na pejzažnim stranicama (naravno na istoj stranici ako obje stanu na nju), tip stranice "uzak" uopće se ne koristi, iako je postavljen za DIV element.

@ stranica uska (veličina: 9 cm 18 cm)
@stranica zakrenuta (veličina: pejzaž)
DIV (stranica: uska)
TABLICA (stranica: zarotirana)

korišteno u dokumentu

...

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

"siročad"

Značenje:<целое>| naslijeđeno
Početna vrijednost: 2
Opseg: elementi strukturne razine
Nasljedstvo: da
Dodjela postotaka: N / A
Uređaji: vizualno oblikovanje, paginirano

"udovice"

Značenje:<целое>| naslijeđeno
Početna vrijednost: 2
Opseg: elementi strukturne razine
Nasljedstvo: da
Dodjela postotaka: N / A
Uređaji: vizualno oblikovanje, paginirano

Svojstvo siročad određuje minimalni broj redaka odlomka koji treba ostaviti na dnu stranice. Svojstvo "widows" određuje minimalni broj redaka odlomka koji treba ostaviti na vrhu stranice. Primjeri korištenja ovih svojstava za kontrolu prijeloma stranica navedeni su u nastavku.

Za više informacija o oblikovanju pasusa pogledajte odjeljak o okvirima za retke.

Prihvatljivi prijelomi stranica

U normalnom toku, prijelom stranice može biti na sljedećim mjestima:

U prostoru rezerviranom za okomite margine između građevnih blokova. Ako se u ovom trenutku dogodi prijelom stranice, tada se izračunate vrijednosti odgovarajućih svojstava "margin-top" i "margin-bottom" postavljaju na "0".
Između blokova linija unutar bloka strukturne razine.

Diskontinuiteti razmatranog tipa zadovoljavaju sljedeća pravila:

Pravilo A: Prijelom (1) je dopušten samo ako je dopušteno pojavljivanje vrijednosti svojstava "page-break-after" i "page-break-before" svih elemenata koji pokreću blokove koji se pojavljuju na prekidu, što se događa kada je barem jedan od njih "uvijek", "lijevo" ili "desno", ili su svi istovremeno "automatski".
Pravilo B: Međutim, ako su sva ova svojstva postavljena na "auto" i svojstvo "page-break-inside" najbližeg zajedničkog pretka svih imenovanih elemenata postavljeno je na "aoid", tada je prijelom stranice u tom trenutku zabranjeno.
Pravilo B: Prijelom stranice (2) dopušten je samo ako je broj okvira reda između prijeloma i početka završnog bloka jednak ili veći od svojstva "siročad" i broja umetnutih okvira između prijeloma i kraj bloka jednak je ili veći od vrijednosti svojstva "widows" ...
Pravilo D: Štoviše, prijelom stranice (2) dopušten je samo ako je svojstvo "page-break-inside" postavljeno na "auto".

Ako vam gornja pravila ne dopuštaju da umetnete dovoljno prijeloma, tada se pravila B i D zanemaruju kako bi se spriječilo istjecanje sadržaja iz bloka stranice, što vam omogućuje stvaranje dodatnih prijeloma.

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

Prijelomi stranica ne mogu se napraviti u apsolutno pozicioniranim blokovima.

Prisilni prijelomi stranice

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 u točki prijeloma "uvijek", "lijevo ", ili "desno".

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

"Najbolji" prijelomi stranica

CSS2 ne specificira koji prijelom stranice treba koristiti iz skupa dopuštenih prijeloma; CSS2 ne sprječava korisničke agente da umetnu prijelome stranica bilo gdje ili da ih uopće ne koriste. Ali specifikacija CSS2 snažno preporučuje da se korisnički agenti pridržavaju sljedeće heuristike (sve dok se ne učini da su ponekad u suprotnosti):

prijelome stranica treba raditi što je rjeđe moguće;
sve stranice koje ne završavaju prisilnim prekidom trebaju biti približno iste visine;
unutar bloka koji ima obrub ne bi trebalo biti prekida;
unutar stola ne bi trebalo biti prekida;
unutar pomaknutog objekta ne smije biti praznina.

Pretpostavimo da vaš stilski list sadrži svojstva "siročad: 4" i "udovice: 2" i da je na dnu trenutne stranice dostupno 20 redaka (okviri reda):

ako zadnji odlomak trenutne stranice ne sadrži više od 20 redaka, tada mora ostati na trenutnoj stranici;
ako paragraf sadrži 21 ili 22 retka, a drugi dio stavka ne bi trebao kršiti ograničenja postavljena svojstvom "udovice", tada bi se, na temelju toga, njegov drugi dio trebao sastojati od dva retka;
ako odlomak sadrži više od 23 retka, tada bi prvi dio trebao biti dugačak 20 redaka, a drugi dio bi trebao uključivati sve ostale retke.

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

ako odlomak na kraju trenutne stranice ne sadrži više od 8 redaka, onda mora ostati na trenutnoj stranici;
ako odlomak sadrži više od 9 redaka, onda se ne može podijeliti (budući da će se time prekršiti ograničenje postavljeno svojstvom "orphans"). Stoga ga treba premjestiti na sljedeću stranicu kao blok.