CSS: Text

2. Text

CSS har ett antal taggar för stilsättning och justering av dokumentets textmassa.

letter-spacing
Anger avståndet mellan bokstäver. Normal-attributet anger det normala bokstavsavståndet. Anges ett värde så är det värdet över normalvärdet. Normalvärdet räknas alltså som 0. Ex. <body> Detta är ojusterad text. <div style="letter-spacing: 3px"> Detta är justerad text. </div> </body> Detta ger följande text: Detta är ojusterad text. Detta är justerad text.

word-spacing
Word-spacing fungerar likadant som letter-spacing, fast anger avståndet mellan ord. Ex. <body> Detta är ojusterad text. <div style="word-spacing: 3px"> Detta är justerad text. </div> </body> Detta ger följande text: Detta är ojusterad text. Detta är justerad text.

line-height

Line-height-taggen anger höjden på en textrad. Ett numeriskt värde ska anges som den aktuella teckenstorleken multiplicerat med värdet eller som procent, där den aktuella teckenstorleken motsvarar 100%. Linjehöjden är det tomutrymme som blir mellan raderna.

Ex.

<body>
Detta är ojusterad text <br />
där teckenstorleken är 1, eller 100%.
   <div style="line-height: 2">
      Detta är justerad text <br />
      där teckenstorleken är 4, eller 400%.
   </div>
</body>

Detta ger följande text:

Detta är ojusterad text
där teckenstorleken är 1, eller 100%.

Detta är justerad text
där teckenstorleken är 4, eller 400%.

text-align

Text-align-taggen justerar textblock precis som man gör i ett vanligt word-dokument. Texten justeras i relation till vänsterkant, högerkant eller mitten. Attributet "justify" fulljusterar texten, dvs. justerar bokstavs- och ordavstånden så att både vänster- och högerkanterna blir jämna.

Ex.

<body>
   <div style="text-align: left">
      Detta är vänsterjusterad text.
   </div>
   <div style="text-align: center">
      Detta är centerjusterad text.
   </div>
   <div style="text-align: right">
      Detta är högerjusterad text.
   </div>
</body>

Detta ger följande text:

Detta är vänsterjusterad text.

Detta är centerjusterad text.

Detta är högerjusterad text.

text-indent
Text-indent-elementet gör indrag på textblock. Måttangivelsen kan ske i fast värde eller i procent. Procentsatsen refererar då till återstoden av textblocket. Ex. <body> <div style="text-indent: 50px"> Detta är indragen text. </div> </body> Detta ger följande text: Detta är indragen text.