Lyhenteiden merkitseminen nettisivulle

Internet, torstaina 14.10.2004,

Lyhenteet tulisi merkitä HTML-koodiin, jos suinkin vain mahdollista.

Oikeaoppinen web-suunnittelu ei ole helppoa. Juuri kun on oppinut työstämään sivuistaan validaattorin hyväksymiä tulee vasemmalta joku, joka kertoo, että on olemassa vieläkin oikeampi tapa.

Lyhenteet tulisi periaatteessa kirjoittaa isoilla kirjaimille, kun ne on tarkoitettu lausuttaviksi kirjain kerrallaan (SAK, HTML). Jos ne on tarkoitus lausua sanana, riittää ensimmäisen kirjaimen kapitalisointi (Nato, Etyk). Jos ne taas on kirjoitettu kokonaan pienillä kirjaimille, rinnastetaan ne mihin tahansa muuhun tavalliseen sanaan.

Jokainen paperisia lehtiä selannut tietää, että hyvin usein lyhenteet kirjoitetaan kokonaan pienillä kirjaimilla. Syy on ilmeisesti se, että isoilla kirjoitetut sanat tulisivat tekstistä häiritsevästi esiin haitaten tekstin luettavuutta.

Mutta aivan samalla tavalla, kuin lihavointi tulee tehdä b- tai strong-elementillä, tulee lyhenne ympäröidä abbr- tai acronym-elementin sisään (jäljempänä käytetään vain elementtiä abbr). Tässäkin on kyse semanttisuudesta. Joten sen sijaan, että kirjoitettaisiin lyhenteet pienillä kirjaimilla, tehdään ne kapiteeleilla (eli pienillä isoilla kirjaimilla). Selaimien toteuttama kapiteeli ei ole ihan typografian sääntöjen mukaista, mutta onhan netissä moni muukin typografian keino saanut väistyä. Kaikki eivät myöskään pidä kapiteeleilla ladotusta tekstistä, mutta nähdäkseni se on vähäisempi paha kuin kokonaan pienillä kirjoittaminen.

Nettijulkaisu sallii lisäksi muutamia sellaisia tietoteknisiä keinoja tekstin muotoiluun, joita perinteinen printtimedia ei voi käyttää. HTML-määritykseen kuuluu osana title-attribuutti, jolla voi liittää valittuihin elementteihin selitystekstiä — esimerkiksi lyhenteen aukikirjoituksen.

Joten: otetaan abbr-elementti käyttöön ja merkitään tyylitiedostoon:

abbr { font-variant: small-caps; }

Kaikki abbr-merkityt pienillä kirjoitetut sanat tulevat nyt kapiteeleilla. Tarkoitus oli tosin muuntaa erityisesti isoilla kirjoitetut sanat kapiteeleiksi, joten muunnetaan määrätty sana ensin pienille kirjaimille ja vasta tämän jälkeen kapiteeleiksi.

abbr { text-transform: lowercase; font-variant: small-caps; }

Viimeistään tässä vaiheessa web-suunnittelija huomaa, että Mozilla lisää title-attribuutilla varustettuihin elementteihin alareunaviivan. Tehdään siis toinen tyylimääre, jolla alareunaviiva muutetaan värilliseksi ja lisätään samalla myös hiirenosoitin kysymysmerkilliseksi.

abbr[title] { border-bottom: 1px dotted green; cursor: help; }

Nyt kaikki abbr-elementillä ympäröidyt kohdat tulevat kapiteeleilla ja kaikki abbr-elementit title-attribuutilla tulevat vihreällä alareunaviivalla. On kuitenkin helppo keksiä tapauksia, joissa ainakaan kapiteeleja ei kaivata (esimerkiksi dB, MHz).

Tehdään näitä korjaamaan kaksi omaa tyyliä:

abbr.ei-kapiteeli, abbr.ei { font-variant: normal; text-transform: none; } abbr.ei { border-bottom: none; cursor: default; }

Näillä kapiteeleiksi muuntaminen saadaan käänteistettyä takaisin normaalitilanteeseen. Kapiteelit pystyy nyt ottamaan pois päältä elementtikohtaisesti class-määreillä .ei-kapiteeli ja .ei. Määre .ei-kapiteeli poistaa halutun elementin kapiteelit ja .ei poistaa myös alareunaviivan.

Itse olen kuitenkin huomannut, etteivät kapiteelit sovi kaikkiin kirjasinkokoihin. Etenkin otsikkokokoluokassa tekstistä tulee helposti epätasapainoinen. Korjataan tämä muokkaamalla edellä mainittua tyyliä:

h1 abbr, h2 abbr, abbr.ei-kapiteeli, abbr.ei { font-variant: normal; text-transform: none; }

Näin kapiteelit otetaan pois käytöstä h1- ja h2-elementtien sisällä (otsikkotasoja voi tietysti lisätä).

Olen koonnut täydellisemmän esimerkin erilliselle sivulle. Esimerkki toimii myös sellaisissa selaimissa, jotka eivät tue abbr-elementtiä. Tällöin lyhenteet näkyvät vain isoilla kirjoitettuina.