Näitäkin voit tarvita

Sisällys

• Lainaus (sitaatti) erillisenä lohkona: blockquote
• "Pelkkää tekstiä sellaisenaan": pre
• Pakotettu rivinvaihto: br
• Keskitys vaakasuunnassa: center
• Oikea reuna suoraksi: align="justify"

Lainaus (sitaatti) erillisenä lohkona: blockquote

Edellä kohdassa Tekstiä monenlaista mainittiin, että tekstin sisällä esiintyvät lainaukset kannattaa esittää ihan vaan lainausmerkeillä, esim. "Veni vidi vici", tai ehkä kursiivilla, i-elementtiä käyttäen. Jälkimmäinen sopii etenkin tilanteisiin, joissa puhutaan kielen sanoista ja fraaseista, esim. sanan kissa taivutusmuodosta kissoista. Eräänlaisena lainauksena voidaan pitää myös kirjan tai muun teoksen nimeä kuten Nuorena nukkunut, jolle sopiva merkkaus on cite-elementti.

Laajahko lainaus eli sitaatti esitetään omana "lohkonaan" blockquote-elementillä. Tällöin lainausmerkkejä ei käytetä. Ainakin jos lainaus on kappaleen mittainen tai pitempi, on syytä esittää se tällä tavoin. Tyypillinen esitysmuoto on kyllä melko tylsä (yleensä sisennys vasemmalla, mahdollisesti myös oikealla, joskus teksti kursivoituna), mutta tyylisäännöstöillä voi ehdottaa jotain parempaa.

Toisaalta vaikka blockquote-elementtiä onkin syytä käyttää pitkille lainauksille, ei pidä luottaa siihen, että se yksinään kertoo tarpeeksi selvästi, että kyseessä on lainaus. Tyypillinen esitysmuoto, sisennys, ei mitenkään yksiselitteisesti kerro sitä. Lisäksi se ei toimi ääniesityksessä. Niinpä onkin hyvä ennen lainausta kertoa sanallisesti jotenkin, että tulossa on sitaatti. Lainauksen loppumisen taas yleensä kertoo tarpeeksi selvästi lähdeviittaus sen perässä.

Eräs ongelma tällaisissa lainauksissa onkin, miten esitetään lainatun tekstin kirjoittaja ja lähde, jotka on yleensä jo lain vaatimuksestakin mainittava. Valitettavasti siihen ei ole mitään erityistä rakenteista tapaa. Yksi vaihtoehto on sisällyttää maininta lähteestä siihen tekstikappaleeseen, joka edeltää sitaattia ja johdattaa siihen. Mutta etenkin jos sitaatteja on paljon, jokin tyylikkäämpi ja yhtenäisempi tapa olisi suotava. Seuraavassa on muuan yksinkertainen vaihtoehto:

<blockquote>
<div>Alussa olivat suo, kuokka - ja Jussi.</div>
<div class="credit">Väinö Linna: <cite>Täällä Pohjantähden alla</cite>, s. 1</div>
</blockquote>

Tässä on käytetty div-elementtiä, joka yleisesti vain tekee dokumentin osasta (division) erillisen lohkon. Jälkimmäiseen div-elementtiin liittyy class-määrite, jonka avulla voimme liittää siihen esitysasua koskevan ehdotuksen. Tyylisäännöstö voisi tällöin olla vaikkapa seuraava:
.credit { font-size : 85%; text-align : right; } jolloin kyseinen teksti näkyy (mahdollisesti) hiukan pienempänä ja oikeaan reunaan tasattuna. Esimerkiksi seuraavaan tapaan (huomaa, että esitysasuun voivat vaikuttaa muutkin tyylisäännöstöt):

Alussa olivat suo, kuokka - ja Jussi.

Väinö Linna: Täällä Pohjantähden alla, s. 1

Lähteen ilmaisemisen tarkkuus riippuu asiayhteydestä, lainauksen tarkoituksesta, teoksen tunnettuudesta jne. Esimerkiksi tieteellisissä teksteissä on omat sääntönsä, tarkemmin sanoen muutamia vaihtoehtoisia, tarkoin määriteltyjä järjestelmiä. Ks. esim. Helsingin ammattikorkeakoulun opinnäytetyöohjeen kohtaa Lähdeviitteet.

Luonnollisestikin jos lainaus on Webissä olevasta lähteestä (tai teoksesta, joka on myös Webissä) on suotavaa liittää siihen linkki. Tällöin lukija voi suoraan tutustua lähteeseen ja nähdä lainatun tekstin alkuperäisessä yhteydessään. Toissijaisesti voi viitata sivuun, joka sisältää tietoja (esim. bibliografisia tietoja tai referaatin tai arvostelun) siteeratusta teoksesta.

"Pelkkää tekstiä sellaisenaan": pre

Edellä on kuvattu, miten selain normaalisti muotoilee tekstin uudestaan, kiinnittämättä huomiota siihen, miten HTML-dokumentissa on rivinvaihtoja. Lisäksi selain ei kiinnitä huomiota siihen, montako välilyöntiä kahden sanan välissä on. Erityisesti mitkään sisennykset eivät säily. Tämä on siis normaalia ja yleensä tarkoituksenmukaista.

Joskus tästä halutaan poiketa: halutaan esittää teksti "sellaisenaan". Tyypillinen esimerkki on jollakin ohjelmointikielellä kirjoitettu ohjelma, jossa on mm. sisennyksiä, joiden halutaan säilyvän. Esimerkki:

$line = 1;
while (<FOO>) {
  print $line, " ", $_;
  $line = $line + 1; }

Tarkoitukseen käytetään pre-elementtiä: juuri ennen kyseistä tekstiä kirjoitetaan <pre>-tägi ja heti sen jälkeen </pre>-tägi. Nimi johtuu sanasta preformatted 'valmiiksi muotoiltu'. Käytännössä selain tällöin normaalisti käyttää tasalevyistä fonttia, koska muutenhan ei voitaisi sanoa kaiken säilyvän "sellaisenaan". Tämä merkitsee, että pre-elementtiä voidaan käyttää myös eräänlaiseen alkeelliseen taulukointiin varsinaisten taulukoiden asemesta. Esimerkiksi kohdassa "Turvalliset" merkit esitetty merkkien "taulukko" on itse asiassa tehty pre-elementillä.

Vaikka pre-elementti tavallaan merkitseekin alkeellisen "pelkän tekstin" liittämistä irrallisena lisukkeena HTML-dokumenttiin, sen sisällä voidaan kuitenkin käyttää HTML-merkkausta kuten korostuksia ja linkkejäkin. Sellaista merkkausta koskevat syntaktiset rajoitukset (ks. pre-elementin tarkkaa kuvausta) tähtäävät siihen, että elementin sisällä ei saa olla sellaisia rakenteita, jotka sotkisivat sen perusidean. Esimerkiksi otsikot eivät tule kyseeseen, koska ne tyypillisesti aiheuttavat fonttikoon muuttumisen.

Vaikka ehkä tyypillisin pre-elementin käyttötarkoitus on ohjelmakoodin tai vastaavan esittäminen, ei tämä elementti itsessään sano mitään sisältönsä merkityksestä. Itse asiassa sitä joskus käytetään muun muassa esitettäessä modernia runoutta, jossa tyhjien välienkin halutaan olevan osa itse runoa. Jos sisältö on koodia, on asianmukaista esittää se code-elementtiä käyttäen. Lisäksi on huomattava, että pre-merkkaus ei muuta normaaleja HTML:n sääntöjä. Jos esimerkiksi koodissa esiintyy <-merkki, se on syytä esittää muodossa <. Täten edellä olevan esimerkin merkkaukseksi sopisi seuraava:

<pre><code>$line = 1;
while (&lt;FOO&gt;) {
  print $line, " ", $_;
  $line = $line + 1; }</code></pre>

Vältä pitkiä rivejä pre-elementin sisällä. Jos niitä välttämättä tarvitaan, on hyvä ehdottaa tyylisäännöstöllä fontin pienentämistä pre-elementin sisällä, jotta teksti todennäköisemmin mahtuisi selaimen ikkunaan vaakasuunnassa.

Varsinkin, jos pre-elementissä on paljon sisältöä, on usein hyödyllistä, että ennen sitä on linkki sen jälkeen tulevaan sisältöön. Esimerkiksi puhesynteesissä kyseinen sisältö toimii usein huonosti, ja muutenkin sisältö voi olla käyttäjän vaikeasti hahmotettavissa. Tämä koskee etenkin niin sanottua Ascii-grafiikkaa, jossa merkkien sijoittelulla luodaan eräänlainen kuvallisen esityksen korvike.

Pakotetut rivinvaihdot: br ja div

Pelkästään rivinvaihtojen pakottamiseen ei kannata käyttää pre-elementtiä, muun muassa siitä syystä, että sivuvaikutuksena on tasalevyinen fontti. Esimerkiksi runo- tai laulutekstin halutaan yleensä esittää niin, että yhdellä rivillä on yksi säe, ja tämä onnistuu br-elementillä, joka kirjoitetaan kunkin säkeen perään. Se on poikkeuksellisesti elementti, jolla ei ole sisältöä eikä lopputägiä vaan se on pelkkä <br>. Se voidaan siis ymmärtää eräänlaiseksi rivinvaihtokäskyksi, ei varsinaisesti rakenteelliseksi elementiksi.

Hiukan rakenteisempi vaihtoehto on div-merkkaus. Tosin sekään ei sano mitään tekstisisällön merkityksestä ja loogisesta rakenteesta, mutta sen avulla voidaan teksti jakaa elementeiksi eikä vain "rivinvaihtokäskyjen" erottelemaksi tekstivirraksi. Esimerkki:

<div>Mieleni minun tekevi</div>
<div>aivoni ajattelevi</div>
<div>lähteäni laulamahan</div>
<div>saa'ani sanelemahan.</div>

Pakotetuilla rivinvaihdoilla voidaan myös tehdä eräänlaisia minikappaleita kappaleiden sisään. Joskus esimerkiksi kappaleen tekstissä mainitaan jotain, jonka olisi hyvä näkyä kappaleesta "esiin nousevana" mutta silti siihen sisältyvänä. Esimerkiksi pitkähkö URL kuten
http://dmoz.org/Science/Biology/Genetics/Eukaryotic/Animal/Dog/
voisi olla sellainen. Sellaisesta osasta voidaan tehdä erillinen rivi. Tämä merkitsee, että ennen sitä ja sen jälkeen kirjoitetaan <br>-tägi. Toisaalta sellainen osa usein halutaan lisäksi keskittää center-elementillä, jolloin <br>-tägit ovat tarpeettomia (koska center käytännössä aiheuttaa rivinvaihdot).

Sisennykset ovat sitten eri juttu. Jos esimerkiksi runo vaatii sisennyksiä, voidaan kirjoittaa rivin alkuun haluttu määrä ns. no-break space merkkejä ( ). Kyseisellä merkillä on nimittäin varsinaisen merkityksensä lisäksi sellainen vaikutus, että useimmat selaimet näyttävät sellaisten merkkien jonon tyhjänä välinä, jonka leveys riippuu merkkien määrästä. Tämä on toki kömpelö ratkaisu. Tyylikkäämpi (mutta melko työläs) ratkaisu olisi tehdä kustakin rivistä erillinen div-elementti ja liittää sellaisiin elementteihin tyylisäännöstöillä tehtyjä ehdotuksia esitysmuodosta.

Keskitys vaakasuunnassa: center

Niinpä tekstikappaleen varsinaisen keskittämisen asemesta kannattaakin ehdottaa sille vasenta ja oikeaa reunusta tyylisäännöstöillä (esim. margin-left:2em; margin-right:2em).

Entä taulukon keskitys? Siihen on usein käytetty menettelyä, jossa on juuri ennen taulukkoa tägi <center> ja heti taulukon perään tägi </center>. Nykyisen tulkinnan mukaan kuitenkin tämä itse asiassa merkitsee pyyntöä keskittää kunkin alkion sisältö. Eräät selaimet vieläpä soveltavat joko vanhaa tai uutta tulkintaa sen mukaan, millainen dokumenttityypin määrittely on annettu! Taulukon keskitystä ei yleensä kannata toistaiseksi yrittää, mutta taulukolle voi halutessaan ehdottaa sopivaa vasenta marginaalia, esimerkiksi
<table style="margin-left:3em">

Seuraavassa esimerkissä on keskitettynä lyhyt teksti, joka on itse asiassa HTML-merkkaus, jolla kuva keskitetään, ja sitten keskitetty kuva,

Usein huomautetaan, että center-elementti ei ole rakenteellinen vaan esitysasuun puuttuva. Tämä on aivan totta. Useissa tapauksissa keskittämisen ehdottaminen tyylisäännöstöillä johtaisi kuitenkin vielä ongelmiin selainten virheiden takia. Niinpä tässä on esitelty "perinteisempi" tapa, joka toimii lähes kaikissa selaimissa. Tällöin kuitenkin on "pakollisiin kuvioihin" kuuluvassa DOCTYPE-määrittelyssä ilmoitettava, että on käytetty ns. Transitional-versiota kielestä.

Oikea reuna suoraksi: align="justify"

Lehdissä ja kirjoissa tekstipalstat on usein tasattu oikealta eli rivit ovat tasamittaisia; tällöin yleensä sanojen välissä on vaihteleva määrä tyhjää tilaa, tai joskus kirjainten välistyskin vaihtelee.

Sellainen tasaus on yleensä huono idea Web-sivuilla. Ensinnäkin se tekee tekstin jonkin verran vähemmän luettavaksi kuvaruudulla. Mutta ennen muuta selainten taito tasata tekstiä on erittäin huono. Nykyiset selaimet eivät lainkaan jaa sanaa eri riveille, paitsi IE rajallisessa määrin, tavalla, josta on usein enemmän haittaa kuin hyötyä. Ja suomen kaltaisessa kielessä, joka synteettisyytensä ja sananjohtamismahdollisuuksien runsauden takia on varsin pitkäsanaista, tämä aiheuttaa pahoja ongelmia. Etenkin jos palsta on suhteellisen kapea, ja sehän voi olla.

Sanomalehdissä tasaus kuuluu median luonteeseen ja sitä pidetään aika välttämättömänä. Mutta vaikka se tehdään suhteellisen kehittyneillä ladontaohjelmilla, jotka osaavat (suurimmaksi osaksi) tavuttaa ja vaikka prosessi on periaatteessa ihmisten kontrolloitavissa, niin niissä erittäin usein esiintyy hyvinkin rumia tasauksia. Toki tämä johtuu suurimmaksi osaksi siitä, että automatisointi on viety liian pitkälle tekniikan kehittyneisyyteen nähden, eli ulkoasua ei tarkisteta ennen painokoneisiin menoa, koska se "maksaisi liikaa". Mutta Webissä tilanne on se, että sivuntekijä ei edes voisi tarkistaa, miten mikin selain milloinkin on tasaamassa tekstiä.

Erikoistapauksissa tasausta voi harkita. Se voisi olla tehokeino, muun muassa juuri siksi, että sitä ei yleensä käytetä Webissä. Esimerkiksi jos sivulle otetaan lyhyt lainaus sanomalehtiuutisesta, voisi sille ehdottaa ulkoasua, joka joissakin suhteissa matkii alkuperäistä. Vaikkapa tähän tyyliin:

<style type="text/css"><!--
blockquote.newspaper {
  text-align: justify;
  width: 20em;
  border: none;
  font-family: "Times New Roman", serif; }
--></style>

Tosin esimerkiksi Netscape 4.0 näyttää jättävän säännön text-align:justify huomiotta, joten ehkä kannattaisi varmuuden vuoksi kirjoittaa myös HTML-määrite align="justify" kuhunkin kappale-elementtiin.

Lainaus sitten aloitettaisiin seuraavasti:
<blockquote class="newspaper"><p class="literary" align="justify">
(missä määrite class="literary" viittaa eräänlaiseen "kirjalliseen tyyliin" kappaleiden esityksessä) ja tulos voisi näyttää seuraavanlaiselta:

Ohjelmistopatenttien sallimista Euroopassa ajaa Yhdysvallat, joka saisi näin täälläkin patenttisuojan esimerkiksi uusille verkkoliiketoimintamalleille ja -sovelluksille. Amerikkalaiset ovat verkkokaupassa useita vuosia eurooppalaisten edellä.

-- Tietoviikko 1999-08-13

Kannattaa katsoa, miltä tulos näyttää. Tässä tapauksessa IE:n jotkin versiot innokkaasti tasaavat jättämällä tyhjää myös sananalkuisen yhdysmerkin jälkeen. Netscape 4 taas saattaa jättää yhden riveistä vajaaksi, kun sitä seuraa pitkä sana. Mutta ehkäpä sinulla on parempi tuuri eli teksti, jossa ei ole kovin pitkiä sanoja eikä sellaisia omituisuuksia kuin yhdysmerkki sanan alussa!

Hiukan lisätietoja: How do I justify text on both sides on Web pages?