En sideblokk består av sideområdet der innholdet er plassert og margområdet rundt sideområdet. @page-regelen brukes til å endre noen CSS-egenskaper når du skriver ut et dokument. Du kan bare endre margene til margelementet, og du kan også sette sideskift på det angitte stedet.

@side ( marg: 2in; )

Du kan angi individuelle dokumentfelt i @side-regelen, for eksempel marg-topp , marg-høyre , marg-bunn , marg-venstre :

2. Sideskift

Du kan kontrollere sideskift ved å bruke egenskapene sideskift-før , sideskift etter og sideinnbrudd. Disse egenskapene gjelder for blokknivåelementer som har en posisjonsegenskap på relativ eller statisk .

sideskift-før
Verdier:
auto
alltid	Legger alltid til et sideskift før elementet.
unngå	Forhindrer å plassere en pause før elementet, hvis mulig.
venstre	Legger til ett eller to sideskift før et element, slik at neste side formateres som venstre side. Elementet vil bli skrevet ut fra toppen av venstre side, dvs. på siden til venstre for ryggraden. Når du skriver ut tosidig, vil det vises på baksiden av papiret.
Ikke sant	Legger til ett eller to sideskift før elementet. Elementet vil bli skrevet ut fra toppen av høyre kantlinje. Neste side vil bli formatert som riktig side.
arve

Syntaks:

@media print ( h1 (sideskift-før: alltid;) )

sideskift-etter
Verdier:
auto	Standardverdien spesifiserer automatiske sideskift.
alltid	Legger alltid til et sideskift etter elementet.
unngå	Hindrer å legge til en pause etter elementet, hvis mulig.
venstre	Legger til ett eller to sideskift etter et element slik at neste side formateres som venstre side. Elementet vil bli skrevet ut fra toppen av venstre side, dvs. på siden til venstre for ryggraden. Når du skriver ut tosidig, vil det vises på baksiden av papiret.
Ikke sant	Legger til ett eller to sideskift etter et element slik at neste side formateres som riktig side. Elementet vil bli skrevet ut fra toppen av høyre kantlinje.
arve	Arver denne egenskapen fra det overordnede elementet.

Syntaks:

@media print ( bunntekst (sideskift-etter: alltid;) )

Side-innbrudd-egenskapen forteller nettleseren om siden kan bryte inn i et element eller ikke. Men hvis elementet viser seg å være det lengre enn en side, da er en pause uunngåelig.

Selv om vi lever i en digital tidsalder hvor alt er lett tilgjengelig, er det fortsatt mange som foretrekker å lese lang tekst fra papir. Det er en mulighet for at noen brukere vil skrive ut teksten fra nettstedet ditt for å lese den bort fra datamaskinen.

Muligheten til å gjengi innhold egnet for utskrift har eksistert i lang tid. Vi kan gjøre dette ved å bruke @media-regelen i stilarket, slik:

@media print ( /* Stilregler */ }

Det er flere egenskaper som lar deg style innholdet på en nettside for å gjøre den utskriftsklar, og vi vil dekke en av dem: sideskift.

Hva gjør den?

Hvis du har jobbet med tekstredigerere, som for eksempel Microsoft Word og Pages, bør du være kjent med sideskiftmenyen, som lar deg flytte tekst til neste side.

Denne modulen gjør det samme, og lar deg kontrollere hvordan innholdet på en nettside overføres, side for side.

Bruke sideskift

Som et eksempel har vi laget en demoside som vi skal skrive ut. Vi fant en mislykket overføring på den, som du kan se nedenfor.

Det vil se bedre ut hvis topp- og bunnteksten starter på neste side.

For å gjøre dette bruker vi egenskapen page-break-after og setter den til alltid for å tvinge neste element til å bryte til neste side.

Sideskift (sideskift-etter: alltid;)

Deretter kan du lage mellom elementene nytt element med en klasse, eller tilordne en klasse til det forrige elementet på denne måten.

Med viskelær funksjonen, kan du ta kompositter av et bilde, og deretter sette alt sammen, for å få bakgrunnen uten ekstrautstyret du ikke gjør.

Telefonen å reise med

S oversetter kommer til å være et flott verktøy for dine reiser som ...

Nå starter overskriften og den nederste hengende linjen på neste side.

Topp og bunn hengende linjer

Metoden ovenfor kan være kjedelig hvis du har mye tekst. Så i stedet for å tvinge innholdet til å gå til neste side, ville det være bedre å sette en minimumsgrense for de øverste og nederste hengende linjene.

I typografisk praksis refererer øverste og nederste linjer til gjenværende ord og korte linjer som vises koblet fra resten av et avsnitt på en annen side.

Ved å bruke egenskapene orphans (nedre hengende streng) og enker (øvre hengende streng) kan vi sette minimumsterskelen. I eksemplet nedenfor spesifiserer vi at det gjenstår minst tre linjer nederst eller i begynnelsen av avsnittet der sideskiftet skjer.

P (foreldreløse: 3; enker: 3;)

Ytterligere kilder

Vi har dekket det grunnleggende om bruk av sideskift på trykk for nettsidetekst, og vi håper det inspirerer deg til å tenke på utskriftsstiler for nettstedet ditt slik at innholdet ditt ser bra ut både på skjermen og på papiret.

Oversettelse – Vaktrom

Denne tweeten fikk meg til å bli hekta. Jeg skjønte plutselig at jeg ikke lenger kunne huske når jeg optimaliserte nettsider for utskrift eller til og med sjekket hvordan de ble sendt til skriveren.

Under nettutvikling er hovedoppmerksomheten fokusert på elektroniske versjoner av nettsteder. Sider må sjekkes i flere nettlesere, testet på forskjellige størrelser windows... Er det skrivere her? Eller kanskje jeg glemte utskriftsstiler fordi jeg sjelden lager papirkopier av sider selv. Uansett så følte jeg at situasjonen måtte rettes opp.

Den trykte versjonen av nettsiden har samme eksistensrett som den elektroniske versjonen. Og hvis vi streber etter å gjøre materialene våre så tilgjengelige som mulig, bør vi ikke forsømme papirmedier informasjon. I tillegg bør du ikke gjøre antagelser om brukere og deres oppførsel. Folk skriver fortsatt ut nettsider på skrivere. Bare tenk på artikler eller blogginnlegg, sider med oppskrifter, kontaktinformasjon, veibeskrivelser eller oppføringer. Før eller siden vil noen sikkert prøve å skrive ut noe du har lagt ut på Internett.

Her er hva Haydon Pickering, forfatter av boken "Inclusive Design Patterns," sier om dette: "Jeg har ikke brukt hjemmeskrivere på lenge. Poenget her er at jeg får følelsen av at de går i stykker ca ti minutter etter at du har startet utskriften. Men jeg er ikke alt."

Hvis du nå innser at du, i likhet med meg, ikke har tatt nok hensyn til utskriftsstiler, håper jeg historien min vil tjene deg godt og hjelpe deg raskt å friske opp hukommelsen. Og hvis du aldri har optimalisert nettsider for skrivere, vil min lille samling av nyttige CSS-triks hjelpe deg i gang.

1. Bruke CSS-stiler for utskrift

Den beste måten å inkludere utskriftsstiler på siden din er å erklære en @media-regel i hoved-CSS-filen.

Brødtekst ( font-size: 18px; ) @media print ( /* utskriftsstiler vil gå her */ body ( font-size: 28px; ) )
Alternativt kan du legge utskriftsstilene inn i en egen fil og inkludere den i HTML, men med denne tilnærmingen trenger du en ekstra forespørsel når du laster inn siden.

2. Testing

Hvordan evaluere utseende nettside klargjort for utskrift? Det er klart for enhver at det ikke er det å sette det på papir etter hver stilendring Den beste avgjørelsen. Heldigvis er nettleserfunksjonene ganske tilstrekkelige for "papirløs" kontroll av trykte versjoner av sider.

Avhengig av nettleseren din, kan du eksportere siden til PDF, bruke forhåndsvisningsfunksjonen eller til og med feilsøke siden direkte i nettleseren din.

Åpne for å feilsøke utskriftsstiler i Firefox Utviklerpanel ved å bruke tastekombinasjonen Shift + F2 eller ved å utføre menykommandoen Utvikling → Utviklingspanel. Gå inn kommandolinje plassert nederst i vinduet, følgende: media emulate print , fullfør oppføringen ved å trykke Tast inn. Den aktive fanen vil fungere som for den Media type ville skrive ut, til du lukker eller oppdaterer siden.

Utskriftsemulering i Firefox

Chrome har også en lignende funksjon. Åpen Utviklerverktøy, som du i MacOS kan bruke hurtigtasten for CMD + Opt + I, V Windows - Ctrl + Shift + I, eller utfør menykommandoen Ekstra verktøy→ Utviklerverktøy. Deretter åpner du gjengivelsespanelet. En måte å gjøre dette på er å trykke på tasten Esc, viser panelet Konsoll, og åpne deretter panelet gjennom menyen Gjengivelse. Angi flagget i gjengivelsespanelet Emuler CSS Media og velg Skrive ut.

Utskriftsemulering i Chrome

Du kan lese mer om testing av trykte versjoner av nettsider på StackOverflow.

3. Absolutte måleenheter

Absolutte måleenheter er lite egnet for skjermversjoner av sider, men for utskrift er de akkurat det du trenger. I utskriftsstiler er det helt trygt, dessuten anbefales det å bruke absolutte måleenheter, som cm, mm, in, pt eller pc.

Seksjon ( marg-bunn: 2 cm; )

4. Sideegenskaper

Du kan bruke @page-regelen til å kontrollere sideegenskaper, for eksempel størrelse, retning og marger. Dette er veldig nyttig, for eksempel når du trenger at alle utskrevne sider har samme marger.

@media print ( @side ( marg: 1 cm; ) )
@page-regelen er en del av Paged Media Module-standarden, som tilbyr mange kule ting som å velge den første siden som skal skrives ut, sette opp tomme sider, plassere elementer i hjørnene på siden og . Den kan til og med brukes til å forberede bøker for trykking.

5. Administrere sideskift

Siden trykte ark, i motsetning til nettsider, ikke er uendelige, ender innholdet på nettsider før eller siden på ett ark og fortsetter på det neste. Det er fem egenskaper for å kontrollere sideskift.

▍Sideskift før element

Hvis du vil at et element alltid skal være på begynnelsen av siden, kan du tvinge frem et sideskift før det ved å bruke egenskapen page-break-before.

Seksjon ( sideskift-før: alltid; )

▍Sideskift etter element

Side-break-after-egenskapen lar deg sette et tvunget sideskift etter et element. Ved å bruke denne egenskapen kan du også forhindre brudd.

H2 ( sideskift-etter: alltid; )

▍Sideskift i et element

Egenskapen for sideinnbrudd kommer godt med når du vil unngå å dele et element mellom to sider.

Ul (sideinnbrudd: unngå;)

▍Topp og bunn hengende linjer

Noen ganger trenger du ikke å tvinge frem sideskift, men du vil kontrollere utdataene til avsnitt ved sidegrensene.

For eksempel, hvis den siste linjen i et avsnitt på gjeldende side ikke passer, vil de to siste linjene i det avsnittet bli skrevet ut på neste side. Dette er fordi egenskapen som styrer dette (enker, dvs. "top hengende rader") er satt til 2 som standard. Dette kan endres.

P ( enker: 4; )
Hvis en annen situasjon oppstår og bare én linje i et avsnitt passer på gjeldende side, vil hele avsnittet bli skrevet ut på neste side. Egenskapen som er ansvarlig for de nedre hengende linjene (foreldreløse) er også satt til 2 som standard.

P(foreldreløse: 3;)
Poenget med koden ovenfor er at for at hele avsnittet ikke skal pakkes inn på neste side, må minst tre linjer passe på den gjeldende siden.

For å forstå dette bedre, ta en titt på eksemplet utarbeidet med CodePen. Og her er en feilsøkingsversjon av det samme eksempelet, det er mer praktisk å teste.

*, *:før, *:etter, *:første bokstav, p:førstelinje, div:førstelinje, blokksitat:førstelinje, li:førstelinje (bakgrunn: gjennomsiktig !viktig; farge: #000 !important; boks-skygge: ingen !viktig; tekst-skygge: ingen !viktig)
Forresten, CSS-stiler for utskrift er et av få unntak der det!viktige direktivet er helt normalt ;)

7. Fjerne unødvendig innhold

For ikke å sløse med blekk, bør du fjerne alt unødvendig fra den trykte versjonen av siden, for eksempel store vakre lysbilder, reklame, nettstedsnavigasjonsverktøy og lignende. Dette kan gjøres ved å sette display-egenskapen til ingen for unødvendige elementer. Det er ganske mulig at du finner det riktig å vise bare hovedinnholdet på siden og skjule alt annet:

Brødtekst > *:not(main) (visning: ingen; )

8. Vise lenkeadresser

Lenker, slik de vanligvis vises på nettsider, er helt ubrukelige på trykk med mindre leseren av papirversjonen av dokumentet vet hvor de fører.

For å vise lenkeadresser etter tekstrepresentasjonene, bruk bare følgende stil:

A:after ( innhold: " (" attr(href) ")"; )
Selvfølgelig, med denne tilnærmingen, vil mange unødvendige ting bli "dechiffrert". For eksempel relative lenker, absolutte lenker på samme nettsted der den trykte siden er plassert, koblinger med ankere og så videre. For ikke å rote den utskrevne siden, ville det være bedre å bruke noe som dette:

A:not():after ( innhold: " (" attr(href) ")"; )
Det ser helt sprøtt ut, selvfølgelig. Så jeg skal forklare betydningen av denne regelen på vanlig engelsk: "Vis verdien av href-attributtet ved siden av hver lenke som har et attributt som starter med http, men som ikke inneholder mywebsite.com."

9. Avkoding av forkortelser

Forkortelser i teksten må plasseres i taggen , og deres transkripsjoner må inkluderes i tittelattributtet. Hvis du formaterer forkortelsene på denne måten, er betydningene deres veldig enkle å vise på en trykt side:

Abbr:after ( innhold: " ("attr(tittel) ")"; )

10. Tvunget bakgrunnsutskrift

Vanligvis, når nettlesere gjengir en side for utskrift, viser de ikke bakgrunnsfargen og bakgrunnsbildene med mindre du uttrykkelig ber dem om å gjøre det. Men noen ganger må alt dette skrives ut. Den ikke-standardiserte print-color-adjust-egenskapen vil hjelpe oss her, som lar deg overstyre standardinnstillingene for enkelte nettlesere.

Header ( -webkit-print-color-adjust: eksakt; print-color-adjust: eksakt; )

11. Mediespørringer

Hvis du skriver medieforespørsler som følgende, husk at CSS regjerer i lignende forespørsler vil ikke påvirke den trykte versjonen av siden.

@medieskjerm og (min-bredde: 48em) ( /* bare skjerm */ )
Hvorfor er det slik? Saken er at CSS-regler bare brukes hvis min-breddeverdien er 48em og hvis medietypen er skjerm . Hvis du blir kvitt denne medieforespørselen fra nøkkelord skjerm , så begrenses den kun av min-breddeverdien.

@media (min-bredde: 48em) ( /* alle medietyper */ )

12. Utskrift av kort

Nåværende Firefox-versjoner og Chrome kan skrive ut kart, men Safari kan for eksempel ikke gjøre dette. Hva skal man gjøre når man skriver ut kort? Et av de universelle alternativene er å bruke statiske kart i stedet for dynamiske.

Kart ( bredde: 400px; høyde: 300px; bakgrunnsbilde: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&formatere=pngsh=png "); -webkit-print-color-adjust: eksakt; print-color-adjust: eksakt; )

13. QR-koder

Utskrift av QR-koder som inneholder viktige lenker kan i stor grad forbedre brukervennligheten til papirversjoner av nettsider. Her er et stykke fra The Smashing Magazine hvor du kan finne nyttige tips om dette temaet. En av dem er å inkludere adressene deres i form av QR-koder på trykte sider. Som et resultat vil brukeren, for å åpne siden som utskriften ble laget fra i nettleseren, ikke måtte skrive inn hele adressen på tastaturet.

14. Om utskrift av ikke-optimaliserte sider

Mens jeg jobbet med temaet utskrift av nettsider, oppdaget jeg et utmerket verktøy som lar deg enkelt forberede ikke-optimaliserte sider for utskrift. Bruker Printliminator

Sideskift

De følgende delene beskriver sideformateringsmodellen som brukes i CSS2. Fem forskjellige egenskaper brukes til å indikere for brukeragenten hvor den kan eller bør lage et sideskift og siden (venstre eller høyre) den skal fortsette å vise innhold på. Hvert sideskift avbryter visningen av innhold i gjeldende sideblokk og fører til at resten av dokumenttreet gjengis i en ny sideblokk.

Pauser før og etter elementer: "page-break-before", "page-break-after", "page-break-inside"

"sideskift-før"

Startverdi: auto
Arv: nei
Prosenttildeling: N/A

"sideskift-etter"

"sideinnbrudd"

Betydning: unngå | auto | arvet
Startverdi: auto
Anvendelsesområde: konstruksjonsnivåelementer
Arv: ja
Prosenttildeling: N/A
Enheter: visuelle, paginerte

Verdiene til disse egenskapene har følgende betydning:

auto

Starter eller forhindrer ikke et sideskift før (etter eller innenfor) den genererte blokken.

alltid

Starter alltid et sideskift før (etter) den genererte blokken.

unngå

Deaktiverer et sideskift før (etter eller inne i) den genererte blokken.

venstre

Starter ett eller to sideskift før (etter) den genererte blokken, slik at neste side formateres som venstre side.

Ikke sant

Starter ett eller to sideskift før (etter) den genererte blokken, slik at neste side formateres som riktig side.

Den potensielle plasseringen av et sideskift bestemmes av det overordnede elementets "page-break-inside"-egenskap, det foregående elementets "page-break-after"-egenskap og "page-break-before"-egenskapen. etterfølgende element. Hvis verdiene til disse egenskapene er andre enn "auto", har verdiene "alltid", "venstre" og "høyre" forrang over verdien "unngå". Avsnittet om akseptable sideskift gir klare regler for å aktivere eller deaktivere sideskift ved bruk av disse egenskapene.

Bruk av navngitte sider: "side"

"side"

Betydning:<идентификатор>| auto
Startverdi: auto
Anvendelsesområde: konstruksjonsnivåelementer
Arv: ja
Prosenttildeling: N/A
Enheter: visuelle, paginerte

Egenskapen "side" kan brukes til å definere den spesifikke typen side som elementet skal vises på.

I dette eksemplet vil alle tabeller bli plassert etter høyre side sider (kalt "rotert") som er i liggende retning:

TABELL (side: rotert; sideskift-før: høyre)

Effekten av "page"-egenskapen er som følger: hvis verdien av "page"-egenskapen til en sideblokk, hvis innhold tilhører det innebygde nivået, er forskjellig fra verdien til en lignende egenskap i forrige sideblokk, hvis innhold også tilhører inline-nivået, så settes det inn ett eller to sideskift mellom dem, hvoretter utgangen produseres i en navngitt sideblokk. Se avsnittet nedenfor om å tvinge sideskift.

Følgende eksempel viser to tabeller på sider med landskapsorientering(på samme side, selvfølgelig, hvis begge passer på den), brukes ikke den "smale" sidetypen i det hele tatt, selv om den er satt til DIV-elementet.

@side smal (størrelse: 9cm 18cm)
@side rotert (størrelse: liggende)
DIV (side: smal)
TABELL (side: rotert)

brukt i dokumentet

...

Sideskift i elementer: «foreldreløse», «enker»

"foreldreløse"

Betydning:<целое>| arvet
Startverdi: 2
Anvendelsesområde: konstruksjonsnivåelementer
Arv: ja
Prosenttildeling: N/A
Enheter: visuelle, paginerte

"enker"

Betydning:<целое>| arvet
Startverdi: 2
Anvendelsesområde: konstruksjonsnivåelementer
Arv: ja
Prosenttildeling: N/A
Enheter: visuelle, paginerte

Egenskapen "foreldreløse" spesifiserer minimumsantallet av avsnittslinjer som skal stå nederst på siden. Egenskapen "enker" spesifiserer minimumsantallet av avsnittslinjer som skal stå øverst på siden. Eksempler på bruk av disse egenskapene til å kontrollere sideskift er gitt nedenfor.

For mer informasjon om formatering av avsnitt, se avsnittet om linjeblokker.

Akseptable sideskift

I normal flyt kan sideskift forekomme følgende steder:

I plassen som er reservert for vertikale marginer mellom konstruksjonsblokker. Hvis det oppstår et sideskift på dette stedet, blir de beregnede verdiene for de tilsvarende egenskapene "margin-top" og "margin-bottom" satt til "0".
Mellom lineære blokker innenfor en strukturell nivåblokk.

Diskontinuiteter av typen under vurdering tilfredsstiller følgende regler:

Regel A: Et brudd (1) er kun tillatt hvis verdiene til egenskapene "page-break-after" og "page-break-before" til alle elementene som genererer blokker som forekommer på bruddstedet, tillater det å skje, som er tilfellet når minst én av dem er "alltid", "venstre" eller "høyre", eller alle er "auto".
Regel B: Men hvis alle disse egenskapene er satt til "auto" og egenskapen "page-break-inside" til den nærmeste stamfaren som er felles for alle navngitte elementer er satt til "unngå", så er et sideskift på det stedet forbudt.
Regel B: Et sideskift (2) er kun tillatt hvis antall linjeblokker mellom bruddet og starten av sluttbruddblokken er lik eller større enn verdien av "orphans"-egenskapen, og antall linjeblokker mellom bruddet og slutten av blokken er lik eller større enn verdien av "enker"-eiendommen .
Regel D: Videre er sideskift (2) bare tillatt hvis egenskapen "side-innbrudd" er satt til "auto".

Hvis reglene ovenfor ikke tillater deg å sette inn et tilstrekkelig antall pauser, for å unngå at innhold søles ut av sideblokken, tas ikke reglene B og D i betraktning, noe som lar deg opprette flere pauser.

Hvis det selv etter dette ikke er mulig å oppnå et tilstrekkelig antall diskontinuiteter, tas ikke reglene A og B i betraktning for å søke etter ytterligere diskontinuitetspunkter.

Sideskift kan ikke forekomme i absolutt plasserte blokker.

Tvunget sideskift

Et sideskift må forekomme (1) hvis minst én av alle egenskapene "sideskift-etter" og "sideskift-før" til elementer som genererer blokker som forekommer på bruddstedet, er "alltid", "venstre" eller " Ikke sant".

Et sideskift må også forekomme (1) hvis verdiene til "page"-egenskapen til linjeblokkene umiddelbart før og etter bruddet er forskjellige.

"Beste" sideskift

CSS2-språket spesifiserer ikke hvilket sideskift i settet med gyldige sideskift som skal brukes; CSS2 hindrer ikke brukeragenter fra å sette inn sideskift hvor som helst eller ikke bruke dem i det hele tatt. Men CSS2-spesifikasjonen anbefaler sterkt at brukeragenter følger følgende heuristikk (inntil det viser seg at de noen ganger motsier hverandre):

Sideskift bør gjøres så sjelden som mulig;
alle sider som ikke slutter med tvungen brudd, skal ha omtrent samme høyde;
det skal ikke være pauser innenfor en blokk som har en kantlinje;
det skal ikke være noen pauser i tabellen;
Det skal ikke være pauser inne i det bevegelige objektet.

La oss si at stilarket inneholder egenskapene "foreldreløse: 4" og "enker: 2", og det er 20 linjer (linjebokser) tilgjengelige nederst på gjeldende side:

hvis siste avsnitt på gjeldende side ikke inneholder mer enn 20 linjer, må det forbli på gjeldende side;
hvis et avsnitt inneholder 21 eller 22 linjer, og den andre delen av paragrafen ikke skal bryte med begrensningene som er satt av "enker"-eiendommen, bør i kraft av dette dens andre del bestå av to linjer;
hvis et avsnitt har mer enn 23 linjer, skal den første delen bestå av 20 linjer, og den andre delen skal inkludere alle andre linjer.

La oss nå si at verdien av "foreldreløse"-egenskapen er "10", verdien av "enker"-egenskapen er "20", og det er 8 rader tilgjengelig nederst på gjeldende side:

hvis avsnittet på slutten av gjeldende side ikke inneholder mer enn 8 linjer, må det forbli på gjeldende side;
hvis et avsnitt inneholder mer enn 9 linjer, kan det ikke deles (siden dette vil bryte med begrensningen satt av "foreldreløse"-egenskapen). Derfor bør den flyttes til neste side som en blokk.

Valg