Päivitetty: 10.03.2003.

Tulostus

HTML -dokumenttien tulostuksen ohjaus, tai sen puuttuminen, on ollut yksi HTML -kielen suuria epäkohtia. Monet sivustot on rakennettu taulukoiden avulla siten, että ne tulostuksessa mahtuvat A4 -paperille. Jos tulostuksen merkitys on suuri, on sitä varten luotu omat sivut. Onneksi CSS2 tuo myös tähän asiaan uusia mahdollisuuksia.
Tällä sivulla kerrotut tekniikat ovat käytettävissä sivutettavassa mediassa. Käytännössä tietokoneen tulostin on ainut sivutettavassa media tällä hetkellä. Muita laitteita ovat braille-tulostin, jotkin kädessä pidettävät laitteet sekä projektorit (piirtoheitin).

(Tämän sivun ominaisuuksin esittäminen esimerkein on hieman hankalaa, koska lopputulos voidaan nähdä vasta kun sivu tulostetaan. Tämänvuoksi sivulla ei ole erillisiä esimerkkejä.)


Tulostus

CSS ja tulostuksen ohjaus

Jo CSS1-oppaassa kerrottiin, että CSS-säännöt kohdistuvat aina laatikkoon. Tämä pätee myös tulostukseen. Tulostuksen yhteydessä käytetään termiä sivulaatikko (page box), joka kertoo kuinka sivu tulee tulostaa.

Sivulaatikko muodostuu sisällöstä, eli sivun alueesta (page area), ja reunuksista eli marginaaleista (margin area). Huomaa, että CSS2:n border- ja padding -ominaisuudet eivät toimi @page -säännön yhteydessä, ne sisällytetään ilmeisesti vasta CSS3 -määrittelyyn.

Tulostettavan sivun muotoiluun voidaan CSS:n avulla vaikuttaa kolme tavalla. Mediatyypin avulla voidaan luoda säännöt, jotka vaikuttavat vain tulostettavaan versioon. Näissä säännöissä voidaan määritellä esim. fontin asetukset kuten koko, kirjasin, väri jne. Mediatyypeistä lisää sivulla Mediatyypit ja niiden käytöstä on ohjeet CSS2+(x)HTML -sivulla.

Varsinainen tulostuksenohjailu tehdään käyttämällä @page-sääntö tai page -valitsinta (jota voidaan tarkentaa pseudovalitsimilla). Näiden avulla voidaan määritellä mm. paperin koko ja suunta. Lisäksi tulostimelle voidaan kertoa, mihin sen tulisi laittaa sivunvaihto, tai vastaavasti missä sivunvaihtoa tulisi välttää.

<< Alkuun


@page -sääntö

@page -sääntöä voidaan käyttää kolmella eri tavalla:

1) @page { ominaisuus: arvo }

2) @page :pseudo-valitsin { ominaisuus: arvo }

3) @page tunniste { ominaisuus: arvo }

@page -säännössä voidaan käyttää kaikkia tällä sivulla esitettyjä ominaisuuksia sekä marginaaleja (margi-top, margi-right, margin-bottom sekä margin). Lisätietoja marginaaleista löydät CSS1-oppaasta ominaisuudet / Laatikko.

@page { ominaisuus: arvo }

Alla esimerkki säännöstä, joka luo tulostettavalle dokumentille vasemmalle 2cm marginaali ja oikealle 1cm marginaalin:

@page { margin-left: 2cm;
        margin-right: 1cm
      }

Huoma, että mittayksikkönä on senttimetri (cm). Sen käyttö on nyt täysin perusteltua, koska sääntö kohdistuu paperiarkkiin (a4).

@page :pseudo-valitsin

@page -sääntöä voidaan tarkentaa pseudovalitsimilla. Seuraava sääntö määrittää säännöt oikeanpuoleiselle sivulle

page :right { margin-left: 2cm;
              margin-right: 4cm
             }

@page tunniste

@page -säännöllä voidaan luoda tunniste, jota käytetään page-ominaisuudella:

@page My_tunniste {page-break-before: always}


h1 { page: My_tunniste }

<< Alkuun


size

Size määrittää paperin koon ja kirjoitussuunnan.

Yhteensopivuus: CSS2 (IE -, NN -, Opera 6.0)
Sallitut arvot: <pituus> {1,2} | auto | portrait | landscape | inherit
Oletusarvo: auto
Käyttö: Tulostuksen yhteydessä
Periytyvä: Ei
%-arvo: Ei
Media: Visual ja Paged
<pituus>
Jos käytetään pituusmittoja, tulee sivulaatikosta aina absoluuttinen. Tällöin tulostuksessa käytettävän parin koolla ei ole vaikutusta. Jos size -ominaisuudelle annetaan vain yksi arvo, niin korkeus ja leveys ovat tällöin samat (tulosteesta tulee tällöin neliö). Jos määritellään kaksi eri arvoa, niin ensimmäinen määrittää leveyden ja toinen korkeuden.
auto
Arvo 'auto' käyttää sivun kokoa ja suuntaa automaattisesti. Tämä on siis oletusarvo.
portrait
Arvolla 'portrait' noudatetaan paperin kokoa, mutta tulostus tulee aina pystysuunnassa
landscape
Arvolla 'landscape' noudatetaan paperin kokoa, mutta tulostus tulee aina vaakasuunnassa.

size esimerkki

@page {size: landscape } A4-paperi vaakasuunnassa @page { size: portrait } A4-paperi pystysuunnassa

<< Alkuun


marks

Määrittelee tulostettavan sivun leikkaus- ja kohdistusmerkit.

Yhteensopivuus: CSS2 (IE -, NN -, Opera -)
Sallitut arvot: [ crop || cross ] | none | inherit
Oletusarvo: none
Käyttö: Tulostuksen yhteydessä
Periytyvä: Ei
%-arvo: Ei
Media: Visual ja Paged

crop
Arvo 'crop' tarkoittaa, että sivu tulee leikata merkkejä pitkin.
cross
Arvo 'cross' tarkoittaa, että sivu tulee kohdentaa merkkien avulla. Huomaa, että säännössä on merkitä [ crop || cross ], eli sivulla voidaan käyttää molempia arvo yhtäaikaa.

<< Alkuun


pseudo :left, :right ja :first

@page -sääntö voidaan tarketaan pseudoluokilla :left, :right ja :first.

Yhteensopivuus: CSS2 (IE -, NN -, Opera -)
Sallitut arvot: :left, :right ja :first
Oletusarvo: --
Käyttö: --
Periytyvä: --
%-arvo: --
Media: --
@page :left {... }
Tyylisääntö astuu voimaan, kun sivu tulostuu vasemmalle.
@page :right {... }
Tyylisääntö astuu voimaan, kun sivu tulostuu oikealle.
@page :first {... }
Tyylisääntö astuu voimaan, kun kyseessä on ensimmäinen sivu.

Pseudo esimerkki

@page:first
{
size: landscape
}

!Säännön tulisi kääntää ensimmäinen tulostettava sivu vakaan, mutta se ei toiminut millään selaimella. Lisäksi Opera 6.0 sekoaa siitä pahasti.

<< Alkuun


Sivunvaihto-ominaisuudet

Sivunvaihto-ominaisuudet määrittävät (x)HTML -dokumentissa olevat sivunvaihdot, eli sivun alkamis- ja loppumiskohdat. Sivunvaihto-ominaisuuksin avulla voidaan esim. määritellä, että jokainen <h1> -elementti alkaa aina omalta sivultaan.
Seuraavaksi käyn läpi page-break-before , page-break-after ja page-break-inside ominaisuudet. Koska kaikki kolme ominaisuutta ottavat vastaan suunnilleen samat arvot, löytyy sallittujen arvojen selityksen vasta page-break-inside ominaisuuden jälkeen.

page-break-before

Sivunvaihto tehdään ennen tätä elementtiä.

Yhteensopivuus: CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: auto | always | avoid | left | right | inherit
Oletusarvo: auto
Käyttö: block-level elementit
Periytyvä: Ei
%-arvo: Ei
Media: Visual ja Paged

<< Alkuun


page-break-after

Sivunvaihto tehdään tämän elementin jälkeen.

Yhteensopivuus: CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: auto | always | avoid | left | right | inherit
Oletusarvo: auto
Käyttö: block-level elementit
Periytyvä: Ei
%-arvo: Ei
Media: Visual ja Paged

<< Alkuun


page-break-inside

Määrittelee tehdäänkö sivunvaihto elementin sisällä.

Yhteensopivuus: CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: avoid | auto | inherit
Oletusarvo: auto
Käyttö: block-level elementit
Periytyvä: Kyllä
%-arvo: Ei
Media: Visual ja Paged

Seuraavat arvo on käytössä kaikille kolmelle page-break- (before, -after ja -inside) ominaisuudelle:

auto
Sivunvaihtoa ei kielletä eikä pakoteta.
always
Sivunvaihto tehdään aina.
avoid
Sivunvaihtoa tulee välttää.
left
Tehdään sivunvaihto (tarvittaessa kaksi), jonka jälkeen sivu tulostuu vasemmalle.
right
Tehdään sivunvaihto (tarvittaessa kaksi), jonka jälkeen sivu tulostuu oikealle.

sivunvaihto esimerkki

.vaihto
{
page-brake-before : always
}
...
<H1 class="vaihto">...</h1>

!Sääntö luo luokan vaihto, joka kiinnitetään elementtiin <h1>. Kun dokumentti tulostetaan tulee sivunvaihto ennen kyseitä <h1> -elementtiä.

 

<< Alkuun


page

page -ominaisuuden avulla voidaan käyttää @page -säännöllä luotua tunnistetta

Yhteensopivuus: CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <tunniste> | auto
Oletusarvo: auto
Käyttö: block-level elementit
Periytyvä: Kyllä
%-arvo: Ei
Media: Visual ja Paged
<tunniste>
Tunniste määritellään siis @page -säännöllä, esim. @page vaihto { page-break-before: always}. Kun se on tehty voidaan page-ominaisuudella määrittää se haluttuihin elementteihin: h1 { page: vaihto }.

page esimerkki

@page testi
{
page-break-before: always
}
...
h2 { page: testi }

!Säännön tulisi tehdä sivunvaihto aina ennen <h2> otsikkoa. Valitettavasti en saanut toimimaan sääntöä millään selaimella.

 

<< Alkuun


 

Orpo- ja leskirivit

Käsitteet lesket (widows) ja orvot (orphans) ovat monelle tuttuja perinteisen typografian alalta. Leskirivillä tarkoitetaan kappaleen viimeistä riviä, joka ei mahdu samalle sivulle muun tekstin kanssa, vaan siirtyy yksinään seuraavalle sivulle. Orporivi on vastaavasti sivun loppuun tulostuvan seuraavan kappaleen ensimmäinen rivi.


orphans

Määrittelee orporivien vähimmäismäärän.

Yhteensopivuus: CSS2 (IE -, NN -, Opera -)
Sallitut arvot: <pituus> | inherit
Oletusarvo: 2
Käyttö: block-level elementit
Periytyvä: Kyllä
%-arvo: Ei
Media: Visual ja Paged

<< Alkuun


widows

Määrittelee leskirivien vähimmäismäärän.

Yhteensopivuus: CSS2 (IE -, NN -, Opera -)
Sallitut arvot: <pituus> | inherit
Oletusarvo: 2
Käyttö: block-level elementit
Periytyvä: Kyllä
%-arvo: Ei
Media: Visual ja Paged
<pituus>
Pituus-arvo ilmoittaa kokonaislukuna kuinka monta riviä jää leskeksi tai orvoksi. Oletusarvo on 2, eli sivulle tulostuu vähintään kaksi riviä.

orphans ja widows esimerkki

p { widows: 4; orphans: 4 }
...
<p>...</p>

!Säännön tulisi jättää <p> -kappaleen orpo- ja leski rivin minimi kooksi 4 riviä. Mutta se ei toiminut millään selaimella.

<< Alkuun



© Petteri Perälä 2000 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!