16 Tekst

Inhoud

De eigenschappen die gedefinieerd worden in de volgende delen beïnvloeden de visuele voorstelling van karakters, spaties, woorden en alinea's.

16.1 Inspringing: de 'text-indent' eigenschap

'text-indent'
Waarde:  <length> | <percentage> | inherit
Startwaarde:  0
Van toepassing op:  blok-niveau elementen
Geërfd:  ja
Percentages:  verwijst naar breedte van bevattende blok
Media:  visual

Deze eigenschap specificeert de inspringing van de eerste regel van tekst in een blok. Correcter gezegd specificeert het de inspringing van de eerste box die in de eerste lijn box vloeit. De box wordt van de linkerkant (of rechterkant, voor rechts-naar-links layout) van de lijn box ingesprongen. User agenten zouden deze insprong moeten weergeven als witruimte.

Waarden hebben de volgende betekenissen:

<length>
De insprong is een vaste lengte.
<percentage>
De insprong is een percentage van de bevattende blok breedte.

De waarde van 'text-indent' kan negatief zijn, maar er kunnen implementatie-specifieke beperkingen zijn.

Voorbeeld(en):

Het volgende voorbeeld geeft een '3em' tekst insprong.

  P { text-indent: 3em }

16.2 Uitlijning: de 'text-align' eigenschap

'text-align'
Waarde:  left | right | center | justify | <string> | inherit
Startwaarde:  hangt af van de user agent en schrijfrichting
Van toepassing op:  blok-niveau elementen
Geërfd:  ja
Percentages:  N/A
Media:  visual

Deze eigenschap omschrijft hoe inline inhoud of een blok uitgelijnd wordt. Waarden hebben de volgende betekenissen:

left, right, center en justify
Links, rechts, midden, respectievelijk uitgevulde tekst.
<string>
Specificeert een string waarop cellen in een tabelkolom zullen uitlijnen (raadpleeg het deel over horizontale uitlijning in een kolom voor details en een voorbeeld). Deze waarde is enkel van toepassing op tabelcellen. Als het ingesteld wordt op andere elementen, zal het behandeld worden als 'left' of 'right', afhankelijk van de waarde van 'direction' die 'ltr', respectievelijk 'rtl' kan zijn.

Een blok tekst is een stapel lijn boxen. Bij 'left', 'right' en 'center', specificeert deze eigenschap hoe de inline boxen binnen elke lijn box uitlijnen ten opzichte linker- en rechterkant van de lijn box; uitlijning is niet ten opzichte van de viewport. Bij 'justify' kan de User Agent de inline boxen uitrekken als aanvulling tot de aanpassing van hun posities. (Raadpleeg ook 'letter-spacing' en 'word-spacing'.)

Voorbeeld(en):

Merk in dit voorbeeld op dat omdat 'text-align' geërfd wordt, alle blok-niveau elementen binnen het DIV element met 'class=center' hun inline inhoud gecentreerd zullen hebben.

DIV.center { text-align: center }

Nota. Het eigenlijke uitvullingsalgorithme is afhankelijk van de user agent en de taal waarin het geschreven is.

Conforme user agenten kunnen de waarde 'justify' als 'left' of 'right' interpreteren, afhankelijk van de standaard schrijfrichting van het element die links-naar-rechts of rechts-naar-links kan zijn.

16.3 Versiering

16.3.1 Onderstrepen, overtrekken, doorhalen en knipperen: de 'text-decoration' eigenschap

'text-decoration'
Waarde:  none | [ underline || overline || line-through || blink ] | inherit
Startwaarde:  none
Van toepassing op:  alle elementen
Geërfd:  nee (zie voorbeelden)
Percentages:  N/A
Media:  visual

Deze eigenschap omschrijft versieringen die toegevoegd worden aan de tekst van een element. Als de eigenschap gespecificeerd wordt voor een blok-niveau element, heeft het invloed op alle inline-niveau afstammelingen van het element. Als het gespecificeerd wordt voor (of beïnvloed wordt door) een inline-niveau element, heeft het invloed op alle boxen die gegenereerd worden door het element. Als het element geen inhoud of geen tekst inhoud (zoals het IMG element in HTML) heeft, moeten user agenten deze eigenschap negeren.

Waarden hebben de volgende betekenissen:

none
Geeft geen tekst versiering.
underline
Elke regel tekst wordt onderstreept.
overline
Elke regel tekst wordt krijgt een lijn bovenaan.
line-through
Elke regel tekst wordt doorstreept
blink
Tekst knippert (wisselt tussen zichtbaar en onzichtbaar). Conforme user agenten zijn niet verplicht deze waarde te ondersteunen.

De Kleur(en) vereist voor de tekst versiering zouden moeten afgeleid worden van de 'color' eigenschapwaarde.

Deze eigenschap wordt niet geërfd, maar afstammende boxen van een blok box zouden moeten opgemaakt worden met dezelfde versiering (hetgeen wil zeggen dat ze allemaal onderstreept moeten worden). De kleur van versieringen zou hetzelfde moeten blijven wanneer afstammende elementen verschillende 'color' waarden hebben.

Voorbeeld(en):

In het volgende voorbeeld voor HTML, zal de tekstinhoud van alle A elementen die dienen als hyperlinks onderstreept worden:

A[href] { text-decoration: underline }

16.3.2 Tekst schaduwen: de 'text-shadow' eigenschap

'text-shadow'
Waarde:  none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
Startwaarde:  none
Van toepassing op:  alle elementen
Geërfd:  nee (raadpleeg voorbeelden)
Percentages:  N/A
Media:  visual

Deze eigenschap accepteerd een door komma's-gescheiden lijst van schaduw effecten om toe te passen op de tekst van het element. De schaduw effecten worden toegepast in de volgorde waarin ze opgegeven worden en kunnen elkaar dus overlappen, maar ze zullen nooit de tekst zelf overlappen. schaduw effecten wijzigen de grootte van een box niet, maar kunnen wel buiten de grenzen ervan gaan. Het stack niveau (stapelniveau) van de schaduw effecten is hetzelfde als voor het element zelf.

Elk schaduw effect moet een schaduw offset specificeren en kan optioneel een blur radius en een schaduwkleur specificeren.

Een schaduw offset wordt gespecificeerd met twee <lengte> waarden die de afstand tot de tekst aangeven. De eerste lengte waarde specificeerd de horizontale afstand tot de rechterkant van de tekst. Een negatieve horizontale lengte waarde plaatst de schaduw links van de tekst. De tweede lengte waarde specificeerd de verticale afstand onder de tekst. Een negatieve verticale lengte waarde plaatst de schaduw boven de tekst.

Een blur straal kan optioneel gespecificeerd worden na de schaduw offset. De blur straal is een lengte waarde die aangeeft wat de rand van het blur effect is. Het exacte algorithme om dit blur effect te bepalen wordt niet gespecificeerd.

Een kleurwaarde kan optioneel gespecificeerd worden voor of na de lengte waarden van het schaduw effect. De kleurwaarde zal gebruikt worden als de basis voor het schaduw effect. Als er geen kleur gespecificeerd wordt, zal de waarde van de 'color' eigenschap in de plaats gebruikt worden.

Tekst schaduwen kunnen gebruikt worden met de :first-letter en :first-line pseudo-elementen.

Voorbeeld(en):

Het onderstaande voorbeeld stelt een tekst schaduw rechts en onder de tekst van het element in. Aangezien geen kleur gespecificeerd is, zal de schaduw dezelfde kleur als het element zelf hebben en aangezien geen blur straal gespecificeerd is, zal de tekst schaduw niet geblurred zijn:

H1 { text-shadow: 0.2em 0.2em }

Het volgende voorbeeld zal de schaduw rechts en beneden plaatsen ten opzichte van de tekst van het element. De schaduw zal een blur straal van 5px hebben en rood gekleurd zijn.

H2 { text-shadow: 3px 3px 5px red }

Het volgende voorbeeld specificeert een lijst van schaduw effecten. De eerste schaduw zal rechts en beneden staan ten opzichte van de tekst van het element en zal rood zijn zonder blurring. De tweede schaduw zal over het eerste schaduw effect staan en zal geel en geblurred zijn en links en onder de tekst geplaatst worden. Het derde schaduw effect rechts en boven de tekst staan. Aangezien geen schaduwkleur gespecificeerd is voor het derde schaduw effect, zal de waarde van de 'color' eigenschap van het element gebruikt worden:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Voorbeeld(en):

Beschouw dit voorbeeld:

SPAN.glow { 
    background: white; 
    color: white;
    text-shadow: black 0px 0px 5px;
}

De 'background' en 'color' eigenschappen hebben dezelfde waarde en de 'text-shadow' eigenschap wordt gebruikt om een "solar eclipse" effect te genereren:

Solar eclipse effect   [D]

Nota. Deze eigenschap wordt niet gedefinieerd in CSS1. Sommige schaduw effecten (zoals in dit laatste voorbeeld) kunnen tekst onzichtbaar maken in User Agents die enkel CSS1 ondersteunen.

16.4 Letter en woord spatiëring: de 'letter-spacing' en 'word-spacing' eigenschappen

'letter-spacing'
Waarde:  normal | <length> | inherit
Startwaarde:  normal
Van toepassing op:  alle elementen
Geërfd:  ja
Percentages:  N/A
Media:  visual

Deze eigenschap specificeert spatiëring gedrag tussen tekst tekens. Waarden hebben de volgende betekenissen:

normal
De spatiëring is de normale spatiëring voor het huidige lettertype. Deze waarde laat de user agent toe om de afstand tussen tkens aan te passen om de tekst uit te vullen (justify).
<length>
Deze waarde geeft inter-karakter ruimte in aanvulling tot de standaard ruimte tussen tekens. Waarden kunnen negatief zijn, maar er kunnen implementatie-specifieke beperkingen zijn. User agents kunnen de inter-karakter ruimte niet vergroten of verkleinen om tekst uit te vullen (justify).

Karakter spatiëring algorithmen zijn user agent-afhankelijk. Karakter spatiëring kan ook beïnvloed worden door uitvulling (raadpleeg de 'text-align' eigenschap).

Voorbeeld(en):

In dit voorbeeld wordt de ruimte tussen tekens in BLOCKQUOTE elementen vergroot met '0.1em'.

BLOCKQUOTE { letter-spacing: 0.1em }

In het volgende voorbeeld, wordt de user agent niet toegestaan om de inter-karakter ruimte te wijzigen:

BLOCKQUOTE { letter-spacing: 0cm }   /* Zelfde als '0' */

Wanneer de resulterende ruimte tussen twee karakters niet hetzelfde is als de standaard ruimte, zouden user agents geen ligaturen mogen gebruiken.

Conforme user agents kunnen overwegen om de waarde van de 'letter-spacing' eigenschappen op 'normal' te laten staan.

'word-spacing'
Waarde:  normal | <length> | inherit
Startwaarde:  normal
Van toepassing op:  alle elementen
Geërfd:  ja
Percentages:  N/A
Media:  visual

Deze eigenschap specificeert spatiëring gedrag tussen woorden. Waarden hebben de volgende betekenissen:

normal
De normale inter-woord ruimte, zoals gedefinieerd door de het huidige lettertype en/of de User Aent.
<length>
Deze waarde geeft de inter-woord ruimte in aanvulling tot de standaard ruimte tussen woorden aan. Waarden kunnen negatief zijn, hoewel er kunnen implementatie-specifieke beperkingen zijn.

Woord spatiëring algorithmen zijn user agent-afhankelijk. Woord spatiëring wordt ook beïnvloed door uitvulling (raadpleeg de 'text-align' eigenschap).

Voorbeeld(en):

In dit voorbeeld wordt de woord-spatiëring tussen elk woord in H1 elementen vergroot met '1em'.

H1 { word-spacing: 1em }

Conforme user agents kunnen overwegen om de waarde van de 'word-spacing' eigenschap op 'normal' te laten staan.

16.5 Kapitalisering: de 'text-transform' eigenschap

'text-transform'
Waarde:  capitalize | uppercase | lowercase | none | inherit
Startwaarde:  none
Van toepassing op:  alle elementen
Geërfd:  ja
Percentages:  N/A
Media:  visual

Deze eigenschap controleert kapitaliseringseffecten van de tekst van een element. Waarden hebben de volgende betekenissen:

capitalize
Zet het eerste teken van elk woord in hoofdletters.
uppercase
Zet alle tekens van elk woord in hoofdletters.
lowercase
Zet alle tekens van elk woord in kleine letters.
none
Geen kapitalisatie effecten.

De eigenlijke transformatie is afhankelijk van de taal. Raadpleeg RFC 2070 ([RFC2070]) voor manieren om de taal van een element te vinden.

Conforme user agents kunnen overwegen om de waarde van 'text-transform' op 'none' te zetten voor tekens die niet van het Latin-1 repertoire zijn en voor elementen in talen waar de transformatie anders is dan deze gespecificeerd door de lettergrootte-omzettingstabellen van ISO 10646 ([ISO10646]).

Voorbeeld(en):

In dit voorbeeld wordt alle tekst in een H1 element getransformeerd naar tekst in hoofdletters.

H1 { text-transform: uppercase }

16.6 Witruimte: de 'white-space' eigenschap

'white-space'
Waarde:  normal | pre | nowrap | inherit
Startwaarde:  normal
Van toepassing op:  blok-niveau elementen
Geërfd:  ja
Percentages:  N/A
Media:  visual

Deze eigenschap declareert hoe witruimte binnen het element wordt behandeld. Waarden hebben de volgende betekenissen:

normal
Deze waarde geeft aan user agents aan dat reeksen van witruimte samengeklapt moeten worden en dat lijnen afgebroken moeten worden zoals nodig is om lijnboxen te vullen. Aanvullende lijnafbrekingen kunnen gemaakt worden door gebruik van "\A" in gegenereerde inhoud (zoals voor het BR element in HTML).
pre
Deze waarde voorkomt user agents van samenklappen van reeksen van witruimte. Lijnen worden enkel afgebroken bij newlines in de bron of bij gebruik van "\A" in gegenereerde inhoud.
nowrap
Deze waarde klapt witruimte samen zoals voor 'normal', maar onderdrukt lijnafbrekingen binnen tekst behalve deze gemaakt door "\A" in gegenereerde inhoud (zoals voor het BR element in HTML).

Voorbeeld(en):

De volgende voorbeelden tonen welk witruimte gedrag verwacht wordt van de PRE en P elementen en het "nowrap" attribuut in HTML.

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

Conforme user agenten kunnen de 'white-space' eigenschap in auteurs- en gebruikers-stylesheets negeren maar moeten er een waarde voor specificeren in de standaard stylesheet.