Tein tänään yli 40-sivuisen raportin. Erään ison kyselyn tulokset piti näyttää tyylikkäinä pinottuina palkkikuvioina vielä siten, että kaksiosaisen kysymyksen vastaukset tulivat rinnakkain. Tehtävässä ei tässä vaiheessa ollut mitään haastetta, mutta varsinainen työ oli vastausten pivotoinnissa eli kääntämisessä haluttuun suuntaan. Kyselytyökalu ei moiseen kyennyt, joten siirsin vastaukset tietokantaan, josta kyselyjen tekeminen SQL-kielellä oli helppoa. Kyselyjen tulokset siirsin PHP-kielellä HTML-sivuksi, jossa pääsin täysin kontrolloimaan esityksen ulkoasua.
- Kuva
- Jeff Golden
Usean tunnin aherruksen jälkeen tilastoraportti oli valmis. Varmistin vielä, että luvut täsmäsivät alkuperäisen kyselytyökalun perusraportin kanssa ja aloin siirtää lopputulosta PDF-tiedostoksi myöhempää esitystä varten. Verkkosivulla raportti tulostui yhtenä pitkänä sivuna, jolla oli yli 40 graafia yhtä monesta eri kysymyksestä. Lopulliseen esitysraporttiin halusin kuitenkin vain yhden kuvaaja sivua kohti, joten vielä piti tulostetta hieman viilata ja hienosäätää. Jokaisen kysymyksen jälkeen piti saada sivu vaihtumaan tulostettaessa raportti joko paperille tai PDF-tiedostoksi. Vaikka sivutus ei alkuperäisen HTML-koodauksen luonteeseen kuulukaan, voidaan tulosteelle antaa sivutusvihjeitä. Helpoimmin sivutusohjeen voi koodata CSS-tyyleillä lisäämällä haluamaansa kohtaan lohkoelementin ja sille tyyliattribuutin.
page-break-before
Nimensä mukaisesti page-break-before lisää sivunvaihdon ennen elementtiä, jossa sitä käytetään.
Attribuutti voi saada seuraavat arvot: auto, always, avoid, left tai right.
page-break-after
Vastaavasti page-break-after lisää sivunvaihdon elementin jälkeen.
Attribuutti voi saada seuraavat arvot: auto, always, avoid, left tai right.
page-break-inside
Loogisesti jatkaen page-break-inside lisää sivunvaihdon elementin sisälle.
Attribuutti voi saada seuraavat arvot: auto tai avoid.
- left-arvo pakottaa yhden tai kaksi sivunvaihtoa elementin jälkeen siten, että seuraavasta sivusta tulee vasemmanpuoleinen sivu.
- right-arvo pakottaa yhden tai kaksi sivunvaihtoa elementin jälkeen siten, että seuraavasta sivusta tulee oikeanpuoleinen sivu.
- always-arvo on edellisten eräänlainen yhdistelmä.
Esimerkki
@media print {
footer {
page-break-after: always;
}
}Esimerkissä footer-elementin jälkeen tulee aina sivunvaihto silloin, kun sivu tulostetaan eli esitysmediana on tuloste (print). Elementin pitää olla lohkotason (block level) elementti, jotta sivunvaihtovihje toimii.