CSS

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

CSS:n @page-sääntö ja sivutettu media

Sivutettu media tarkoittaa sisältöä, jossa esitys tapahtuu sivuja vaihtamalla. Tavallisia esimerkkejä sivutetusta mediasta ovat tulosteet sekä PDF-dokumentit.

print on CSS:n mediatyyppi, jota käytetään tulosteille ja muulle sivutetulle medialle. CSS 2.1 esitteli @page-säännön, joka laajensi CSS:n perinteistä laatikkomallia huomioimaan sivutetun median erityispiirteet, kuten sivunvaihdot, leski- ja orporivit sekä sivukoot ja marginaalit.

Kuva:Sivutettu media. CSS käyttää sivutettuun mediaan erityistä sivulaatikkomallia, jota ohjataan @page-säännöllä. Jokainen sivu muodostuu sisältöalueesta ja sitä ympäröivistä reuna-alueista (marginaalit). @page-lohkon sisällä määritellään muun muassa sivun koko, marginaalit ja tarvittaessa tyylejä, jotka vaikuttavat sivun sisällä oleviin elementteihin, esimerkiksi otsikoihin.

Koska sivutettu media ei perustu pikseleihin (px), näyttöön suhteutettuja mittayksiköitä kuten em ja ex tulisi välttää. Käytä mieluummin absoluuttisia yksiköitä kuten cm, mm tai in.

Sivulaatikon luominen

Sivulaatikko luodaan at-säännöllä @page. Esimerkiksi: 


@page {
/* tulosteet tyylit tänne*/
}

Sivulaatikon koko määritetään ominaisuudella size. Yksi arvo tekee sivusta neliön, kaksi arvoa määrittää sivun leveyden ja korkeuden. Sivulaatikon koko asetetaan seuraavasti:

Reuna-alue (marginaalit) määritetään ominaisuuden margin avulla. Huomioi, että marginaalit luodaan sivulaatikon sisällä olevan sisällön marginaaleiksi, ne eivät vaikuta sivujen keskinäiseen marginaaliin. 


@page {
  / A4 arkki tuumina */
  size:	8.26in 11.69in; 

  /* 2cm marginaali */
  margin:2cm; 
}

Leikkausmerkit - ominaisuus marks

Kun tulostetaan ammattimaisesti (esimerkiksi painotuotteet), voidaan käyttää leikkausmerkkejä, jotka auttavat leikkaamaan sivun tarkasti. Leikkausmerkit lisätään CSS-ominaisuudella marks, jonka arvot voivat olla:

crop
Käytä leikkausmerkkejä (rajojen ulkopuolelle).
cross
Käytä kohdistusmerkkejä (sivujen kohdistukseen).
none
Ei mitään (oletus).

Selain määrää siitä miten leikkausmerkit käytännössä otetaan huomioon. 


@page {

  /* A4 arkki tuumina */
  size:	8.26in 11.69in; 

  /* 2cm marginaali */
  margin:2cm; 

  /* lisää kohdistusmerkit */  
  marks:cross; 

}

Sivunvaihdot

Sivunvaihtojen hallinta on olennainen osa sivutettua mediaa. CSS tarjoaa tähän kolme keskeistä ominaisuutta:

Sivunvaihto-ominaisuuksien mahdolliset arvot ovat:

auto
Sivunvaihto suoritetaan automaattisesti
always
Suorita pakotettu sivunvaihto .Arvo ei ole käytettävissä ominaisuudelle page-break-inside.
avoid
Pyri välttämään sivunvaihtoa
left
Suorita 1-2 pakotettua sivunvaihtoa, jotta seuraava sivu tulostuu vasemmalle (kaksipuoleisessa tulosteessa). Arvo ei ole käytettävissä ominaisuudelle page-break-inside.
right
Edellisen vastakohta
inherit
Peri arvo vanhemmalta

Esimerkki. Suorita aina ennen h1-otsikkoa pakotettu sivunvaihto. Pyri välttämään sivunvaihtoa kuvan jälkeen tai esimuotoillun tekstin sisällä. 

 @page {

  /* A4 arkki tuumina */
  size:	8.26in 11.69in; 

  /* 2cm marginaali */
  margin:2cm; 

  /* lisää kohdistusmerkit */  
  marks:cross; 

  h1 {
    page-break-before:always;
  } 
  
  img {
    page-break-after:avoid;
  }
     
  pre {
    page-break-inside:avoid;
  }  
}

Näitä ominaisuuksia ei voi käyttää suoraan @page-lohkon sisällä – ne kuuluvat elementtikohtaisiin tyylisääntöihin.

Leski- ja orporivien hallinta

Leski- ja orporivit ovat typografian peruskäsitteitä. CSS-tyylimäärittelyssä leskirivejä hallitaan ominaisuudella widows, ja orporivejä ominaisuudella orphans.

orphans
kuinka monta riviä elementissä täytyy vähintään olla, jotta se saa sijaita sivun lopussa. Oletusarvo kaksi riviä
widows
kuinka monta riviä elementissä täytyy vähintään olla, jotta se saa sijaita sivun alussa. Oletusarvo kaksi riviä 

  p {
   orphans:4;
  }

Näitä ominaisuuksia ei voi käyttää suoraan @page-lohkon sisällä – ne kuuluvat elementtikohtaisiin tyylisääntöihin.

Artikkelin tiedot

Otsikko: CSS:n @page-sääntö ja sivutettu media

Kuvaus: Hallitse CSS:n @page-sääntö ja sivutettu media: sivukoot, marginaalit, leikkausmerkit, sivunvaihdot ja typografian hallinta tulostuksessa.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: