Prelom strani html za tiskanje. Prelom strani za tiskanje s CSS3. O tiskanju neoptimiziranih strani

Blok strani je sestavljen iz območja strani, ki vsebuje vsebino, in območja robov, ki obdaja območje strani. Pravilo @page se uporablja za spreminjanje nekaterih lastnosti css pri tiskanju dokumenta. Spremenite lahko samo rob elementa, na določeni lokaciji pa lahko nastavite tudi prelome strani.

@stran (margin: 2in;)

V pravilu @page je mogoče določiti posamezne robove dokumenta, kot so margin-top, margin-right, margin-bottom, margin-left:

2. Prelomi strani

Prelome strani lahko nadzirate z lastnostmi page-break-before, page-break-after in page-break-inside. Te lastnosti veljajo za blokovne elemente, za katere je lastnost položaja nastavljena na relativno ali statično.

stran-prelom-pred
Vrednote:
avto
nenehno	Pred elementom vedno doda prelom strani.
izogibati se	Če je mogoče, prekliče postavitev preloma pred elementom.
levo	Pred elementom doda en ali dva preloma strani, tako da je naslednja stran oblikovana kot leva stran. Element bo natisnjen od vrha leve strani, t.j. na strani levo od hrbtenice. Za obojestransko tiskanje bo izpisano na hrbtni strani lista papirja.
prav	Pred elementom doda en ali dva preloma strani. Element bo natisnjen z začetkom na vrhu desnega roba. Naslednja stran bo oblikovana kot desna stran.
podedovati

sintaksa:

@media print (h1 (prelom strani-pred: vedno;))

stran-prelom-po
Vrednote:
avto	Privzeto je nastavitev samodejnih prelomov strani.
nenehno	Za elementom vedno doda prelom strani.
izogibati se	Če je mogoče, prekliče dodajanje preloma po elementu.
levo	Za elementom doda en ali dva preloma strani, tako da je naslednja stran oblikovana kot leva stran. Element bo natisnjen od vrha leve strani, t.j. na strani levo od hrbtenice. Za obojestransko tiskanje bo izpisano na hrbtni strani lista papirja.
prav	Za elementom doda en ali dva preloma strani, tako da je naslednja stran oblikovana kot prava stran. Element bo natisnjen z začetkom na vrhu desnega roba.
podedovati	To lastnost podeduje od nadrejenega elementa.

sintaksa:

@media print (noga (prelom strani: vedno;))

Lastnost page-break-inside pove brskalniku, ali se stran lahko zlomi znotraj elementa ali ne. Če pa je element daljši od strani, je prelom neizogiben.

Kako ravnati s prelomi strani pri tiskanju velike tabele HTML (8)

Imam projekt, ki zahteva tiskanje tabele HTML z veliko vrsticami.

Moj problem je, kako je tabela natisnjena na več straneh. Včasih prereže vrstico na pol, zaradi česar je neberljiva, ker je ena polovica na robu strani, ostala pa je natisnjena na vrhu naslednje strani.

Edina verjetna rešitev, ki si jo lahko zamislim, je uporaba kompleksnih DIV-jev namesto tabele in prisilna preloma strani, če je potrebno ... toda preden sem opravil vse spremembe, sem mislil, da bi lahko vprašal tukaj prej.

Uporabite te lastnosti CSS:

Prelom strani-po prelomu strani-pred

Na primer:

....

Noben od odgovorov tukaj ni deloval zame v Chromu. AAverin na GitHubu je za to ustvaril nekaj uporabnega Javascripta in mi je uspelo:

Samo dodajte js svoji kodi in dodajte razred splitForPrint v tabelo in ta bo lepo razdelil tabelo na več strani in vsaki strani dodal glavo tabele.

Opomba: pri uporabi preloma strani: vedno za oznako, ustvari prelom strani po zadnjem delu tabele, pri čemer vsakič ustvari popolnoma prazno stran! Če želite to popraviti, ga preprosto spremenite v page-break-after: auto. Pravilno se bo zlomila in ne bo ustvarila dodatne prazne strani.

....

Sprejeti odgovor mi ni deloval v vseh brskalnikih, potem ko je css dejansko deloval zame:

Tr (prikaz: skupina-vrstica-tabela; prelom strani-znotraj: izogibaj; prelom strani-po: samodejno;)

Struktura html je bila:

...

V mojem primeru je bilo nekaj dodatnih težav s thead tr, vendar je to rešilo prvotni problem držanja vrstic tabele.

Zaradi težav z glavo sem na koncu dobil:

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

To ni preprečilo razpadanja vrst; samo vsebino vsake celice.

Končal sem s pristopom @ vicenteherrera z nekaj popravki (kar je morda zagon 3).

V bistvu; ne moremo prekiniti tr s ali td s, ker niso elementi na ravni blokov. Zato smo v vsakega vstavili div s in uporabili naša pravila za prelom strani-* za dive. Drugič, na vrh vsakega od teh divov dodamo nekaj oblazinjenja, da nadomestimo morebitne slogovne artefakte.

Spremembe in prilagoditve polnila so bile potrebne, da bi nadomestili nekaj tresenja, ki je bilo uvedeno (iz zagonskega zagona, predvidevam). Nisem prepričan, če predstavljam novo rešitev iz drugih odgovorov na to vprašanje, a morda bo komu pomagala.

Pred kratkim sem rešil ta problem z lepo rešitvijo.

Izogi

Funkcija Print () ($ (". TableToPrint td, .tableToPrint th"). Vsaka (funkcija () ($ (this) .css ("width", $ (this) .width () + "px"))) ; $ (". tableToPrint tr"). wrap ("

"); window.print ();)

Deluje kot čar!

Preizkusil sem veliko rešitev in nobena ni delovala dobro.

Zato sem poskusil z majhnim trikom in deluje:

tfoot s slogom: položaj: fiksni; spodaj: 0px; položaj: fiksni; spodaj: 0px; prilega na dno zadnje strani, če pa je noga previsoka, se prekriva z vsebino tabele.

samo tfoot z: display: table-footer-group; se ne prekriva, vendar ni na dnu zadnje strani ...

Postavimo dve nogi:

TFOOT.placer (zaslon: table-footer-group; višina: 130px;) TFOOT.contenter (zaslon: table-footer-group; položaj: fiksna; dno: 0px; višina: 130px;) vaše dolgo besedilo ali visoka slika tukaj

Ena rezervira prostor na straneh, ki niso zadnje strani, druga pa v vaši osebni nogi.

Test

naslov
opombe
x
x
x

Čeprav živimo v digitalni dobi, kjer je vse mogoče zlahka dostopati, je še vedno veliko ljudi, ki raje berejo dolgo besedilo s papirja. Obstaja možnost, da bodo nekateri uporabniki natisnili besedilo z vašega spletnega mesta, tako da ga bodo lahko prebrali zunaj računalnika.

Možnost upodabljanja vsebine, primerne za tiskanje, obstaja že dolgo. To lahko storimo s pravilom @media v slogovni tabeli, kot je ta:

@medijski tisk ( / * Pravila sloga * / }

Obstaja več lastnosti, ki vam omogočajo, da oblikujete vsebino spletne strani, da jo naredite za tiskanje, in obravnavali bomo eno: prelom strani.

Kaj to naredi?

Če ste delali z urejevalniki besedil, kot sta Microsoft Word in Pages, bi morali poznati meni za prelom strani, ki vam omogoča previjanje besedila na naslednjo stran.

Ta modul počne enako, saj vam omogoča nadzor nad tem, kako je vsebina spletne strani zavita, stran za stranjo.

Uporaba preloma strani

Kot primer smo ustvarili demo stran, ki jo bomo natisnili. Na njem smo našli slab prenos, kot lahko vidite spodaj.

Bolje bo videti, če se naslov in osirotela vrstica začneta na naslednji strani.

Za to uporabimo lastnost page-break-after in jo nastavimo na vedno, da prisili naslednji element, da gre na naslednjo stran.

Prelom strani (prelom strani: vedno;)

Nato lahko ustvarite nov element z razredom med elementi ali na ta način dodelite razred prejšnjemu elementu.

Z Radirka funkcijo, lahko posnamete sestavljene fotografije, nato pa vse to združite, da dobite ozadje brez dodatkov, ki jih nimate.

Telefon za potovanje

S Prevajalec bo odlično orodje za vaša potovanja kot ...

Zdaj se bo naslov in spodnja odprtina začela na naslednji strani.

Zgornje in spodnje viseče črte

Zgornja metoda je lahko dolgočasna, če imate veliko besedila. Torej, namesto da bi vsilili vsebino, da gre na naslednjo stran, je bolje, da nastavite minimalni prag za zgornje in spodnje sirote.

V tipografski praksi se zgornji in spodnji okraski nanašajo na ostanke besed in kratke vrstice, ki se zdijo odtrgane od preostalega odstavka na drugi strani.

Z uporabo lastnosti sirote (spodnje sirote) in vdove (zgornje sirote) lahko nastavimo najnižji prag. V spodnjem primeru navajamo, da ostanejo vsaj tri vrstice na dnu ali na začetku odstavka, kjer pride do preloma strani.

P (sirot: 3; vdove: 3;)

Dodatni viri

Pokrili smo osnove uporabe preloma strani za tiskanje za besedilo na vašem spletnem mestu in upamo, da vas bo to navdihnilo, da razmislite o slogih za tiskanje vašega spletnega mesta, da bo vaša vsebina videti dobro tako na zaslonu kot na papirju.

Prevod - Dolžnost

Prelomi strani

Naslednji razdelki opisujejo model oblikovanja strani, ki se uporablja v CSS2. Pet različnih lastnosti se uporablja, da uporabniškemu agentu pove, kje lahko ali naj prekine stran in stran (levo ali desno), kjer naj še naprej prikazuje vsebino. Vsak prelom strani prekine prikaz vsebine v polju trenutne strani in povzroči, da se preostanek drevesa dokumenta prikaže v novem polju strani.

Prelomi pred in za elementi: "page-break-before", "page-break-after", "page-break-inside"

"prelom strani-pred"

Začetna vrednost: auto
Dedovanje: št
Odstotek dodelitve: N / A

"stran-prelom-po"

"page-break-inside"

Vrednost: izogibaj se | avto | podedoval
Začetna vrednost: auto
Področje uporabe: elementi strukturne ravni
Dedovanje: da
Odstotek dodelitve: N / A
Naprave: vizualno oblikovanje, paginirano

Vrednosti teh lastnosti imajo naslednje pomene:

avto

Ne sproži ali onemogoči preloma strani pred (po ali znotraj) ustvarjenega bloka.

nenehno

Vedno sproži prelom strani pred (po) ustvarjenem bloku.

izogibati se

Prekliče prelom strani pred (po ali znotraj) ustvarjenega bloka.

levo

Sproži en ali dva preloma strani pred (po) ustvarjenem bloku, tako da je naslednja stran oblikovana kot leva stran.

prav

Sproži en ali dva preloma strani pred (po) ustvarjenem bloku, tako da je naslednja stran oblikovana kot prava stran.

Potencialna lokacija preloma strani je določena z lastnostjo "page-break-inside" nadrejenega elementa, lastnostjo "page-break-after" prejšnjega elementa in lastnostjo "page-break-before" naslednji element. Če vrednosti teh lastnosti niso "samodejno", imajo vrednosti "vedno", "levo" in "desno" prednost pred vrednostjo "izogibati se". Razdelek o sprejemljivih prelomih strani ponuja jasna pravila za začetek ali prepoved preloma strani z uporabo teh lastnosti.

Uporaba poimenovanih strani: "stran"

"stran"

pomen:<идентификатор>| avto
Začetna vrednost: auto
Področje uporabe: elementi strukturne ravni
Dedovanje: da
Odstotek dodelitve: N / A
Naprave: vizualno oblikovanje, paginirano

Lastnost "stran" se lahko uporabi za določitev posebne vrste strani, na kateri bo prikazan element.

V tem primeru bodo vse tabele postavljene na desno stran strani (imenovane "zasukane"), ki je v ležeči usmerjenosti:

TABELA (stran: zasukana; prelom strani-pred: desno)

Delovanje lastnosti "page" je naslednje: če se vrednost lastnosti "page" bloka strani, katere vsebina pripada ravni vrstice, razlikuje od vrednosti podobne lastnosti prejšnjega bloka strani, katerega vsebina prav tako spada na raven v vrstici, potem se mednje vstavita en ali dva preloma strani, po katerih se izpis izvede v poimenovanem bloku strani. Glejte spodnji razdelek o prisilnih prelomih strani.

V naslednjem primeru sta dve tabeli prikazani na ležečih straneh (seveda na isti strani, če se obe prilegata nanjo), vrsta strani "ozka" se sploh ne uporablja, čeprav je nastavljena za element DIV.

@stran ozka (velikost: 9 cm 18 cm)
@stran zasukana (velikost: ležeče)
DIV (stran: ozka)
TABELA (stran: zasukana)

uporabljeno v dokumentu

...

Prelomi strani znotraj elementov: "sirote", "vdove"

"sirote"

pomen:<целое>| podedoval
Začetna vrednost: 2
Področje uporabe: elementi strukturne ravni
Dedovanje: da
Odstotek dodelitve: N / A
Naprave: vizualno oblikovanje, paginirano

"vdove"

pomen:<целое>| podedoval
Začetna vrednost: 2
Področje uporabe: elementi strukturne ravni
Dedovanje: da
Odstotek dodelitve: N / A
Naprave: vizualno oblikovanje, paginirano

Lastnost sirote določa najmanjše število vrstic odstavka, ki naj ostanejo na dnu strani. Lastnost "widows" določa najmanjše število vrstic odstavkov, ki naj ostanejo na vrhu strani. Primeri uporabe teh lastnosti za nadzor prelomov strani so navedeni spodaj.

Za več informacij o oblikovanju odstavkov glejte razdelek o vrsticah.

Sprejemljivi prelomi strani

V normalnem toku je lahko prelom strani na naslednjih mestih:

V prostoru, rezerviranem za navpične robove med gradniki. Če na tej točki pride do preloma strani, so izračunane vrednosti ustreznih lastnosti "margin-top" in "margin-bottom" nastavljene na "0".
Med bloki vrstic znotraj bloka strukturne ravni.

Diskontinuitete obravnavane vrste izpolnjujejo naslednja pravila:

Pravilo A: Prelom (1) je dovoljen samo, če je dovoljeno pojavljanje vrednosti lastnosti "page-break-after" in "page-break-before" vseh elementov, ki sprožijo bloke, ki se pojavijo ob prelomu, ki se zgodi, ko je vsaj eden od njih "vedno", "levo" ali "desno" ali pa so vsi hkrati "avtomatski".
Pravilo B: Če pa so vse te lastnosti nastavljene na "samodejno" in je lastnost "page-break-inside" najbližjega skupnega prednika vseh poimenovanih elementov nastavljena na "aoid", potem je prelom strani na tej točki prepovedano.
Pravilo B: Prelom strani (2) je dovoljen le, če je število vrstičnih polj med prelomom in začetkom zaključnega bloka enako ali večje od lastnosti "sirot" in število vstavljenih polj med prelomom in konec bloka je enak ali večji od vrednosti lastnosti "vdova" ...
Pravilo D: Poleg tega je prelom strani (2) dovoljen le, če je lastnost "page-break-inside" nastavljena na "auto".

Če vam zgornja pravila ne dovoljujejo, da vstavite dovolj prelomov, se pravila B in D prezreta, da preprečite iztekanje vsebine iz bloka strani, kar vam omogoča ustvarjanje dodatnih prelomov.

Če po tem ni mogoče doseči zadostnega števila prekinitev, se pravili A in B ne upoštevata za iskanje dodatnih prelomnih točk.

Prelomov strani ni mogoče narediti v absolutno pozicioniranih blokih.

Prisilni prelomi strani

Prelom strani se mora zgoditi (1), če je vsaj ena od vseh lastnosti "page-break-after" in "page-break-before" elementov, ki generirajo bloke, ki se pojavijo na prelomni točki, "vedno", "levo " ali "desno".

Prelom strani se mora zgoditi tudi (1), če so vrednosti lastnosti "page" vrstičnih polj tik pred in po prelomu različne.

"Najboljši" prelomi strani

CSS2 ne določa, kateri prelom strani naj se uporabi iz nabora dovoljenih prelomov; CSS2 ne preprečuje uporabniškim agentom, da kamor koli vstavljajo prelome strani ali jih sploh ne uporabljajo. Toda specifikacija CSS2 močno priporoča, da se uporabniški agenti držijo naslednje hevristike (dokler se ne izkaže, da si včasih nasprotujejo):

prelomi strani naj se izvajajo čim redkeje;
vse strani, ki se ne končajo s prisilnim prelomom, morajo biti približno enake višine;
znotraj bloka, ki ima obrobo, ne sme biti prelomov;
znotraj mize ne sme biti prelomov;
znotraj premikanega predmeta ne sme biti nobenih vrzeli.

Recimo, da vaš slogovni list vsebuje lastnosti "sirot: 4" in "vdove: 2" in na dnu trenutne strani je na voljo 20 vrstic (vrstičnih polj:

če zadnji odstavek trenutne strani ne vsebuje več kot 20 vrstic, mora ostati na trenutni strani;
če odstavek vsebuje 21 ali 22 vrstic, drugi del odstavka pa ne bi smel kršiti omejitev, ki jih določa lastnost "vdova", potem mora biti na podlagi tega njegov drugi del sestavljen iz dveh vrstic;
če odstavek vsebuje več kot 23 vrstic, mora biti prvi del dolg 20 vrstic, drugi del pa vse ostale vrstice.

Zdaj recimo, da je vrednost lastnosti "sirot" "10", vrednost lastnosti "vdove" je "20" in na dnu trenutne strani je na voljo 8 vrstic:

če odstavek na koncu trenutne strani ne vsebuje več kot 8 vrstic, mora ostati na trenutni strani;
če odstavek vsebuje več kot 9 vrstic, ga ni mogoče razdeliti (saj bo to kršilo omejitev, ki jo določa lastnost "sirote"). Zato ga je treba kot blok premakniti na naslednjo stran.