Kapittel 3.6 - Linje-, ord-, og bokstav-avstand

Ved hjelp av CSS kan en utvikler endre avstanden mellom hvert ord og hver bokstav, samt linjeavstanden. Det gir en utvikler spesielt fin kontroll over hvordan tekst presenteres på skjermen. Det er enkelt å tenke seg nytten av å kunne øke eller minske både avstanden mellom linjer og ord, men det er litt vanskeligere å tenke seg hvorfor man ønsker å endre avstdanden mellom bokstavene i en ord eller i en setning.

Ettersom hver bokstav som tegnes på en nettside tegnes innenfor sin egen rektangulære boks, kan avstanden mellom to bokstaves som 'V' og 'A" virke større enn avstanden mellom 'O' og 'P', avhengig av fonten som benyttes. Bokstav avstanden kan også manipuleres for å lage tekst som ser smal eller vid ut.

Linje avstanden endres ved hjelp av CSS elementet line-height og kan ta parameter i enten prosent, punkter eller centimeter. For å øke linjeavstanden til 1,5 kan man benytte seg av følgede CSS kode:

(css)
3 linjer
1:
2:
3:
<style>
p

</style>

For å vise resultatet, er linjeavstanden til dette avsnittet satt till 150%. For å endre avstanden mellom hvert ord benyttes CSS elementet word-spacing, som kan ta parametere i punkter, prosent eller centimeter.

<style> 
   p { word-spacing: -3px; } Reduserer avstanden med 3 punkter 
</style> 

Slik ser resultatet ut. Ord-avstanden er redusert med 3 punkter i dette avsnittet for å illustrere effekten. For å endre bokstav-avstanden benyttes CSS elementet letter-spacing.

<p -style="letter-spacing: +2;"> 
   <span style="letter-spacing: +4;">Bokstav-avstand</span> og 
   <span style="letter-spacing: -1;">Bokstav-avstand</span></p> 

Effekten av koden overfor gir et avsnitt med bokstav-avstanden satt til 2 punkter større enn grunnteksten, mens de to ordene "Bokstav-avstand" har definert avstanden til henholdsvis +4 og -1.