16 Tekst

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

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.

  P { text-indent: 3em }

16.2 Uitlijning: de 'text-align' eigenschap

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'.)

DIV.center { text-align: center }

16.3 Versiering

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

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.

A[href] { text-decoration: underline }

16.3.2 Tekst schaduwen: de 'text-shadow' eigenschap

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.

H1 { text-shadow: 0.2em 0.2em }

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

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

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

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

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).

BLOCKQUOTE { letter-spacing: 0.1em }

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.

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).

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

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]).

H1 { text-transform: uppercase }

16.6 Witruimte: de 'white-space' eigenschap

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).

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.

You are on the Dutch version of the site, but your system indicates that you prefer to use the English language.
The entire site is not translated yet, but the menus and buttons on the interface are largely translated.

Would you like to reach the page in English?
Click here to continue in English: Consult the English version of this page

Sie befinden sich in der Holländisch Version der Website, Ihr System gibt jedoch an, dass Sie die deutsche Sprache bevorzugen.
Die gesamte Site ist noch nicht übersetzt, aber die Menüs und Schaltflächen auf der Benutzeroberfläche sind weitgehend übersetzt.

Möchten Sie die Seite auf Deutsch erreichen?
Klicken Sie hier, um fortzufahren: Konsultieren Sie die deutsche Version dieser Seite

Vous vous trouvez sur la version néerlandaise du site, mais votre système indique que vous préférez utiliser la langue française.

Souhaitez-vous atteindre la page en français?
Cliquez ici pour continuer en français: Consulter la page en français