Listausten sisällyttäminen nettisivulle

Internet, maanantaina 30.8.2004,

Nettisivujen, ja varsinkin blogin, suunnittelija kohtaa ennen pitkää tilanteen, jossa hänen täytyy laittaa jonkinlainen listaus muun tekstin sekaan. Listaus voi olla tietostolistaus, koodiesimerkki tai vastaava. Mikään ei tietenkään estä listauksen laittamista sellaisenaan esimerkiksi p-elementin sisään. HTML-kieli ei kuitenkaan kohtele rivinvaihtoja samaan tapaan kuin tekstieditori, vaan rivittää tekstin pakotetuista rivinvaihdoista huolimatta yhteen rimpsuun. Rivinvaihdot tehdään oikeaoppisesti ympäröimällä teksti tai muu aineisto p-elementillä tai vastaavalla.

Tämän ominaisuuden takia suunnittelijat ottavat käyttöön erityisesti listausten näyttämiseen tarkoitetut HTML-elementit. Kannattaa unohtaa samantien br-tagien laittaminen joka rivin loppuun ja siirtyä suoraan semanttisesti oikeampien pre- ja code-elementtien käyttöön.

Pre-elementti on tarkoitettu yleisien listausten näyttämiseen ja code ohjelmistolistauksien. Näihin molempiin liittyy olennaisena osana vakioleveyksinen kirjasin sekä mahdollisesti rivityksen estäminen. Tämä rivityksen estäminen on se asia, joka aiheuttaa ongelmia listauksen sijoittelussa muun aineiston sekaan.

Ohjelmistoalan ammattilaiset ovat tottuneet koko ruudun leveyksisien koodilistausten lukemiseen, mutta vain harvat katsovat nettisivuja kokoleveyksisellä selaimella puhumattakaan sivujen suunnittelijoiden kapeista taitoista, jotka nekin haittaavat listausten esittämistä.

Pystyn keksimään kolme tapaa esittää listaus sivulla muun materiaalin ohessa (mikäli jätetään huomiotta erilliselle sivulle sijoitettu listaus):

1. Listauksen sijoittaminen välittämättä seurauksista,
2. Listauksen ylipitkien rivien manuaalinen katkaiseminen tai
3. Käyttämällä CSS 2 -määrettä overflow

Nämä eivät ole eksklusiivisesti toisensa poissulkevia, mutta suunnittelijan täytyy kuitenkin tehdä päätös yhden menetelmän rankkaamisesta toisia korkeammalle. Näissä kaikissa kolmessa on sekä hyvät että huonot puolensa.

Välittämättä seurauksista

Helpoin tapa on vain laittaa listaus mahdollisine pitkine riveineen muun tekstin sekaan ja toivoa parasta. Mikäli jokin rivi ei mahdu annettuun tilaan, selain yleisimmiten kasvattaa ikkunansa kokoa. Vaihtoehtoisesti listauksen teksti menee muun aineiston päälle, asia riippuu muiden elementtien tyylimäärityksistä.

Pitkien rivien katkaiseminen käsipelillä

Ylipitkät rivit voi myös pakottaa kahdelle tai useammalle riville, mutta tällöin joutuu näkemään hieman vaivaa sekä joutuu arvioimaan kuinka paljon niitä merkkejä yhdelle riville suurin piirtein mahtuu. Homman voi tietenkin antaa myös julkaisujärjestelmän (CMS:n) harteille, mutta tällöin järjestelmä joutuu mitä todennäköisimmin lisäämään rivinkatkaisumerkit, ja lisäksi listauksen luettavuus vaikeutuu.

Käyttämällä overflow-määrettä

CSS:n versio kaksi on tuonut sivusuunnittelijalle helpotusta ylisuuren materiaalin mahduttamisessa. Homman juju on määrätä listauksen pre- tai code-lohkoa ympäröivälle div-elementille jokin leveys, ja tämän jälkeen antaa pre- tai code-lohkoille tyyli overflow: auto. Tällöin selain lisää listauksen ympärille vierityspalkit mikäli sen sisältö ei mahdu annettuun leveyteen (tai korkeuteen).

Haittapuoli on sama kuin ylisuurissa nettisivuissakin; vain osa aineistosta mahtuu näkyviin. Mikäli ruudun leveyksinen rivi laitetaan vaikkapa 200 pikseliä leveään lohkoon, joutuu käyttäjä vierittämään sivusuunnassa aika tavalla saadakseen rivin lopun näkyviin. Ja mikäli rivejä on useita, vieritystä joutuu harrastamaan oikein urakalla.

Valinta

Lopullinen valinta riippuu siis yksilöstä, suunnittelijasta. Kuten aiemmin mainitsin kahden kohdan kompromissi on luultavasti se oikein tie. Ylipitkien rivien katkaiseminen käsipelillä yhdistettynä joko hällä väliä -asenteeseen tai overflow'hun tuottaa ainakin kohtalaista jälkeä.

Olen tehnyt esimerkin overflow'n käyttämisestä, sillä sitä näkee hyvästä selaintuesta huolimatta jokseenkin harvoin.