Tekstin ominaisuudet

• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• text-align
• text-indent
• line-height

Tekstin ominaisuuksia voidaan muuttaa tyylien avulla hyvin paljon. Seuraavissa luvuissa käsiteltävät ominaisuudet ovat word-spacing, letter-spacing, text-decoration, vertical-align, text-align, text-transform, text-indent, text-align ja line-height.

word-spacing

word-spacing-ominaisuudella voidaan kasvattaa tai pienentää sanojen välistystä. Sanojen välistys voidaan antaa jonkin pituusmitan avulla. Sanojen välistyksen oletusarvona käytetään arvoa normal. Pituusmittojen määrittämisestä enemmän luvussa Muut elementin ominaisuudet.

word-spacing: normal | <pituus>;

word-spacing-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä h1-elementin sanojen välistyksen arvoksi laitetaan 1em, joka jättää sanojen väliin h1-elementin kirjasinkoon verran tyhjää tilaa.

h1 {
  word-spacing: 1em;
}

letter-spacing

letter-spacing-ominaisuudella voidaan kasvattaa tai pienentää sanoissa olevien merkkien välistystä. Merkkien välistys voidaan antaa jonkin pituusmitan avulla tai arvona normal. Oletusarvona käytetään arvoa normal. letter-spacing-ominaisuuden arvolla normal selain voi kasvattaa kumpaankin reunaan tasatun tekstin merkkiväliä. Pituusmittojen määrittämisestä enemmän luvussa Muut elementin ominaisuudet.

letter-spacing: normal | <pituus>;

letter-spacing-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä muutetaan h1-elementin merkkien välistystä.

h1 {
  letter-spacing: 1em;
}

text-decoration

text-decoration-ominaisuudella voidaan muuttaa tekstin ulkoasua. Ominaisuudelle voidaan antaa seuraavia arvoja: underline alleviivaa tekstin, overline ylleviivaa tekstin sanat, linethrough yliviivaa koko tekstin ja blink laittaa tekstin vilkkumaan. Korostuksen värinä käytetään tekstin väriä.

text-decoration: none | [ underline || overline || line-through || blink ];

text-decoration-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä a-elementistä, eli tässä tapauksessa linkistä poistetaan kokonaan alleviivaus.

a {
  text-decoration: none;
}

vertical-align

vertical-align-ominaisuudella voidaan määritellä tekstin pystysuuntaista sijoittumista muuhun kappaleeseen nähden. Arvo baseline määrittelee elementin peruslinjan ylemmän tason elementin peruslinjan mukaan tai joissakin tapauksissa elementin alalaidan mukaan. Arvolla super voidaan teksti korottaa yläindeksiksi ja arvolla sub teksti voidaan laskea alaindeksiksi. text-top arvo määrittelee elementin ylälaidan ylemmän tason elementin kirjasimen ylälaitaan ja vastaavasti text-bottom määrittelee elementin alalaidan ylemmän tason elementin kirjasimen alalaitaan. top arvo määrittelee elementin ylälaidan rivillä olevan korkeimman elementin ylälaitaan ja bottom määrittelee elementin alalaidan rivillä olevan alimmaksi ulottuvan elementin alalaitaan. middle määrittelee elementin puolivälin kohtaan, joka muodostuu summana ylemmän tason elementin peruslinjasta ja puolikkaasta pienen kirjasimen korkeudesta.

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <prosentti>;

vertical-align-ominaisuutta voidaan käyttää ainoastaan tekstitason elementtien yhteydessä ja ominaisuus ei ole periytyvä.

Seuraavassa esimerkissä on määritelty strong-tyylille aliluokan ylaindeksi.

strong.ylaindeksi {
  vertical-align: super;
}

text-transform

text-transform-ominaisuudella voidaan määritellä tekstille erilaisia kirjoitusasun muutoksia. Tekstin ominaisuuksia voidaan muokata arvolla capitalize, jolloin tekstin sanojen ensimmäinen kirjain muutetaan isoksi. Arvolla uppercase voidaan sanat muuttaa kokonaan isoiksi kirjaimiksi ja arvolla lovercase sanat muutetaan pieniksi kirjaimiksi.

text-transform: none | capitalize | uppercase| lowercase;

Text-transform-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavalla esimerkillä tekstissä korostetut sanat muutetaan isoilla kirjaimilla kirjoitetuiksi.

strong {
  text-transform: uppercase;
}

text-align

text-align-ominaisuudella voidaan muuttaa tekstikappaleen tasausta vaakatasossa. Arvolla left teksti tasataan vasempaan reunaan, arvolla right teksti tasataan oikeaan reunaan, arvolla center teksti tasataan keskelle ja arvolla justify teksti tasataan molempiin reunoihin.

text-align: left | right | center | justify;

text-align-ominaisuus on periytyvä ja ominaisuutta voidaan ainoastaan lohkotason elementtien yhteydessä.

Tarkempi esimerkki ominaisuuden käyttämisestä text-indent-ominaisuuden yhteydessä.

text-indent

text-indent-ominaisuudella voidaan muuttaa kappaleen ensimmäisen rivin sisennystä. Sisennys voidaan antaa pituutena tai prosenttiarvona. Pituuden ja prosenttiarvojen antamisesta enemmän luvussa Muut elementin ominaisuudet.

text-indent: <pituus> | <prosentti>;

text-indent-ominaisuus on periytyvä, mutta sitä voidaan käyttää ainoastaan lohkotason elementtin yhteydessä.

Seuraavassa esimerkissä tekstikappaleiden ensimmäisen rivin sisennykseksi on asetettu kaksi kertaa p-elementin kirjasimen koon verran. Tekstin tasaus on tehty molempiin reunoihin.

p {
  text-indent: 2em;
  text-align: justify;
}

line-height

line-height-ominaisuudella voidaan määritellä tekstikappaleen rivin korkeus. Rivin korkeus määritellään suhteellisesti elementin kirjasinkoon suhteen. Rivin korkeus voidaan antaa numeerisesti ilman yksikköä, pituutena yksikön kanssa ja prosentuaalisesti elementin kirjaisinkokoon nähden. Pituuden antamisesta enemmän kappaleessa Muut elementin ominaisuudet.

line-height: normal | <numeerinen> | <pituus> | <prosentti>;

line-height-ominaisuus on periytyvä ja ominaisuutta voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä käytetään kaikkia kolmea tapaa rivin korkeuden määrittämiseksi. Ensimmäisessä esimerkissä rivin koko annetaan ilman pituusyksikköä numeerisesti. Rivin korkeuden arvoksi tulee 18 pt:tä.

p {
  font-size: 12pt;
  line-heigth: 1.5;
}

Toisessa esimerkissä rivin korkeus annetaan pituutena suhteessa kappaleen kirjasimen kokoon. Rivin korkeuden arvoksi tulee 18 pt:tä.

p {
  font-size: 12pt;
  line-heigth: 1.5em;
}

Kolmannessa esimerkissä rivin korkeus annetaan prosentuaalisesti suhteessa kappaleen kirjasimen kokoon nähden. Rivin korkeuden arvoksi tulee 18 pt:tä.

p {
  font-size: 12pt;
  line-heigth: 150%;
}

Seuraavassa esimerkissä havainnollistetaan tekstin ominaisuuksien käyttämistä HTML-dokumentissa.

h1 {
  word-spacing: 1em;
  text-decoration: overline;
  vertical-align: baseline;
  text-transform: uppercase;
  text-align: center;
}

p {
  text-indent: 5em;
  text-align: justify;
  line-height: 200%;
}

strong {
  letter-spacing: 0.5em;
  vertical-align: top;
}

Kuva 7: Esimerkki tekstin ominaisuuksien muuttamisesta.