CSS ja tulostuksen rajaus

CSS:llä sujuu aika hyvin se, että tulostuksesta jätetään jotain pois (esim. vakionavigointi tai [itsessään typerät] "Takaisin alkuun" -linkit). Huomattavasti hankalampaa on saada aikaan jotain sellaista, mitä nyt yrität.

Hahmottelemasi lähestymistapa kaatuu jo siihen, että jos body-elementille asetetaan display: none, mitään ei tulostu. Body-elementtihän vastaa koko sivua. Jos sitä ei tulostu, niin mitään ei tulostu. Ei ole väliä, määritelläänkö tulostumattoman elementin jokin osa tulostuvaksi.

Sen sijaan seuraavalla tavalla onnistuisi _tavallaan_:

body { visibility: hidden; }
div.kuva img { visibility: visible; }

Silloin kuitenkin kuva tulostuu juuri siihen, mihin se muutoinkin tulostuisi, joka voi olla vaikka sivulla 42. Kaikki muu "on" siellä, mihin se sijoittuu, mutta näkymättömissä.

Jos haluat kuvan ihan alkuun, voit lisätä esimerkiksi

div.kuva img { position: absolute; top: 1cm; left: 2cm; }

Siihen sitten tietysti sellaiset top- ja left-arvot (ylämarginaali ja vasen marginaali) kuin tuntuu sopivalta.

Tällöinkin voi sitten tulostua esimerkiksi 42 tyhjää sivua, koska kaikki muu edelleenkin "on" mukana, vain näkymättömissä.

Seuraava voi siis olla parempi lähestymistapa: käytetään merkkausta


...

...


jolloin tyyliohjeessa on (@media print -osassa) vain

.alku, .loppu { display: none; }

Jään ihmettelemään, minkälaisessa tilanteessa olisi mielekästä, että vain kuva tulostuisi.