Skip links en inhoudsopgave

Laatst aangepast: .

Overstrepen, onderstrepen en doorstrepen van tekst in alle soorten en maten

Korte omschrijving

Allerlei soorten onderstrepingen, overstrepingen en doorhalingen in tekst: enkele, dubbele, gekleurde, gestippelde, eronder, erboven, noem maar op.

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Opmerkingen

In een aantal voorbeelden staat 'n enkele lijn onder de tekst. Dat moet je nooit zo gebruiken, want de meeste mensen zullen denken dat het 'n link is. 'n Gewone enkele onderstreping is feitelijk gereserveerd voor links. Als je toch 'n onderstreping gebruikt, moet je op een of andere manier duidelijk maken dat het geen link is.

Als het alleen gaat om het benadrukken van 'n stukje tekst, zijn de elementen <strong> en <em> ook een mogelijkheid.

Vanwege alle afwijkingen in Internet Explorer 6 en 7 is het absoluut nodig dat goed wordt getest als spans worden gebruikt om 'n lijn weer te geven.

Volgens de specificatie van css 2.1 kun je text-decoration ook gebruiken om tekst te laten knipperen met behulp van de waarde blink. Gelukkig ondersteunt niet elke browser dit en nog gelukkiger is dit in css3 verdwenen. Het is een van de beste manieren om je bezoeker helemaal gek te maken. Ik gebruik het dan ook nergens.

In css3 komt er 'n hele serie mogelijkheden bij om onderstrepingen en dergelijke veel preciezer te definiëren, zoals kleuren, of ze door moeten lopen onder spaties of niet, gestippeld of gestreept, enz., enz. Helaas werkt al dit moois op dit moment nog in geen enkele browser, dus vooralsnog moeten we ons behelpen met spans en dergelijke.

Opmerking 1 april 2012: inmiddels ondersteunt Firefox een aantal van deze nieuwe mogelijkheden. Maar omdat dit vooralsnog de enige browser is, zijn ze helaas nog niet echt bruikbaar.

Als je valideert op css 2.1 krijg je foutmeldingen voor de kleuren brown en gold. In css3 is het aantal kleuren sterk uitgebreid en kun je deze gewoon gebruiken. Ze werken in alle browsers, ook in oudere.

Ik ben geen taalkundige, dus er zitten zeker fouten in de voorbeelden waarin ik woordsoorten en zinsdelen benoem. Als je dus meent je Nederlandse les te kunnen verzuimen en dat hier wel even te leren, hoef je niet bij mij te komen uithuilen als je je toekomst hebt verwoest, in een opvoedingsinternaat belandt of wordt onterfd.

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Met behulp van text-decoration kun je 'n tekst onderstrepen. Maar je kunt ook 'n lijn boven de tekst zetten of de tekst doorstrepen. Deze twee of drie manieren van het trekken van 'n lijn kunnen ook gelijktijdig worden gebruikt. De lijnen krijgen de kleur van de tekst.

Als ik om 'n stuk tekst 'n span zet en daarin text-decoration gebruik en ook 'n kleur opgeef, zullen tekst en lijnen binnen de span dezelfde kleur krijgen. Als ik de tekst binnen de span echter weer binnen 'n eigen span zet en die ook weer 'n kleur geef, krijgt de tekst de nieuwe kleur. De lijn blijft echter de originele kleur van de buitenste span houden. Dit geeft de mogelijkheid om lijnen in 'n andere kleur dan de tekstkleur te maken.

Als ik niet text-decoration gebruik maar 'n span met 'n border rondom de tekst, kan ik de border gebruiken als lijn. Dit geeft de mogelijkheid om dikkere lijnen te maken, gestippelde lijnen, enz.: alle mogelijkheden die 'n gewone border heeft.

Door text-decoration en een of meer spans te combineren, kun je ook meerdere lijnen onder (of boven) de tekst zetten.

Beschrijving van code en css

De code die te maken heeft met de basis van dit voorbeeld is rood gekleurd. Alle voor dit voorbeeld niet-essentiële code is bruin.

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreken bijvoorbeeld de witte vlakken met de links. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n h1 uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.html.

Gebruik het volledige doctype, inclusief de url, anders werkt het niet goed.

De toevoeging achter <html hierboven hoort bij het gekozen doctype.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven. Als je als doctype html hebt gekozen, moet je niet eindigen op />, maar op > (dit geldt voor alles in de head wat eindigt op />).

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.

<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css" /> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Dit stukje code heeft in dit voorbeeldbestand geen enkel nut. Normaal genomen is het een verwijzing naar een extern stylesheet, waarin de style staat. In dit voorbeeld verwijst de href naar een niet bestaand bestand.

De bedoeling is dat je bovenstaande regels aanpast voor je eigen bestand. De hele style, die onder deze regels in de <head> staat, wordt dan in het externe bestand geplaatst waar de href naar verwijst. In dat bestand komt de style precies zo te staan zoals die nu in de <head> staat. Het bestand moet eindigen op .css.

Voordeel van een externe stylesheet is onder andere, dat deze geldig is voor alle pagina's waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar op één enkele centrale plek te aan te brengen.

In die externe stylesheet zet je alles wat in dit voorbeeld tussen <style type="text/css"> en </style> staat (zonder deze begin- en eindregel).

De bovenste regel is voor de algemene stylesheet, geldig voor alle browsers. Dit is gewoon 'n link die naar 'n bestand elders verwijst, waar de css in staat. Op de plaats van "../../css/naam-van-stylesheet.css" moet je pad naar en naam van jouw stylesheet invullen.

Het eigenaardige stukje code daaronder heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden. Op deze manier kun je 'n stylesheet alleen voor Internet Explorer opnemen.

Dit stukje geldt voor alle versies van Internet Explorer, maar je kunt het ook per versie aangeven.

De link verwijst naar een aparte stylesheet voor Internet Explorer, waarin je css speciaal voor die browser zet. Op de plaats van "../../css-naam-van-ie-stylesheet.css" moet je pad naar en naam van je stylesheet voor Internet Explorer invullen.

De link naar het aparte stylesheet voor Internet Explorer moet ná de link naar het algemene stylesheet komen, omdat de opdrachten voor Internet Explorer dan over die uit het algemene stylesheet heen gaan.

<style type="text/css">

Voor de duidelijkheid staat de style hier in het bestand zelf, maar het is beter deze in een apart stylesheet te zetten, zoals hierboven beschreven. In die stylesheet komt alles wat tussen bovenstaande regel en </style> staat.

Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out als die ik in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen omdat het volstrekt onoverzichtelijk is. Ik gebruik alleen deze lay-out omdat het anders veel te veel regels worden.

Voorbeeld van 'n goede lay-out in je css:


	div#header-buiten
	{
	    position: absolute;
	    right: 16px;
	    width: 100%;
	    height: 120px;
	    background: yellow;
	}

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}
body

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de kinderen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

margin: 0; padding: 0;

Slim om te doen, is soms wat afwijkend in verschillende browsers.

font-family: Arial, Helvetica, sans-serif;

Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).

font-size: 110%; font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. Dat komt door Internet Explorer. Als ik als maateenheid iets als px neem, kunnen gebruikers van Internet Explorer de lettergrootte niet veranderen.

Maar als ik overal em neem als maateenheid, wat dan voor de hand zou liggen, kom ik in de problemen met versies van Internet Explorer ouder dan versie 8. De stappen van de verkleining of vergroting zijn in die browsers zo groot, dat 't gelijk onleesbaar klein of absurd groot is.

Als je nou echter bij body geen em gebruikt (font-size: 1.1em; zou hetzelfde moeten zijn als font-size: 110%;), dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

Dit werkt ook als je als lettergrootte 100% invult. Dat heeft geen enkele invloed op de lettergrootte, behalve dus dat de tussenstappen in oudere versies nu normaal werken.

In Internet Explorer 8 is deze bug eindelijk gerepareerd. Aangezien we waarschijnlijk nog vele jaren met oudere versies dan Internet Explorer 8 zitten opgescheept, zal deze truc ook nog jaren moeten worden toegepast.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

background: #ff9;

Achtergrondkleurtje.

p

Alle paragrafen. Elk voorbeeld staat in een eigen paragraaf. Hier geef ik de instellingen op die voor alle paragrafen hetzelfde zijn.

width: 600px;

Breedte.

margin: 20px auto;

Omdat voor onder en links geen waarde is opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 20px auto 20 px in de volgorde boven - rechts - onder - links.

Boven en onder 20 px marge. Omdat de <p>'s boven elkaar staan, staan de marges aan boven- en onderkant van de paragrafen dus tegen elkaar aan. Tegen elkaar aanstaande verticale marges worden over elkaar heen gezet, waarbij alleen de grootste marge bewaard blijft.

Omdat hier de marges aan boven- en onderkant even groot zijn, 20 px, is er geen grotere of kleinere marge. Maar ze worden wel over elkaar heen gezet. De marge tussen twee paragrafen is dus 20 px.

Links en rechts auto. Dat betekent hier: evenveel. De paragrafen staan dus altijd horizontaal in het midden, ongeacht de grootte van het venster van de browser.

Lijn boven (tekstkleur)

Zwarte lijn boven tekstMet behulp van text-decoration een lijn in de kleur van de tekst boven de tekst zetten. Hierbij moet erop worden gelet dat dit niet gaat lijken op de onderstreping die bij 'n link gebruikelijk is. Gewone tekst eruit laten zien als 'n link is ongelooflijk verwarrend.

span.deco-over

De spans met class="deco-over".

text-decoration: overline;

Lijn boven de tekst binnen de span zetten. Omdat ik verder helemaal niets doe, krijgt deze lijn de kleur van de tekst.

Lijn boven (gekleurd)

Rode lijn boven tekstMet behulp van een span en text-decoration een lijn in een andere kleur dan de tekst boven de tekst zetten. Hierbij moet erop worden gelet dat dit niet gaat lijken op de onderstreping die bij 'n link gebruikelijk is. Gewone tekst eruit laten zien als 'n link is ongelooflijk verwarrend.

span.deco-over-red

De spans met class="deco-over-red".

text-decoration: overline;

Lijn boven de tekst binnen de span zetten.

color: red;

Voorgrondkleur rood. Hierdoor worden de lijn en ook de tekst binnen de span rood.

span.tekst

De spans met class="tekst".

Hier gelijk boven wordt de lijn rood gekleurd. Dat heeft als bijwerking, dat ook de tekst rood wordt. Door nu de tekst weer binnen 'n eigen span te zetten en die 'n kleur te geven, krijgt de tekst de hier opgegeven kleur. De kleur van de met text-decoration opgegeven lijn verandert echter niet. Hierdoor krijg ik, in dit geval, zwarte tekst met 'n rode lijn.

color: black;

Voorgrondkleur zwart. Hierdoor wordt ook de tekst zwart.

Streepjeslijn boven (gekleurd)

Groene streepjeslijn boven tekstMet behulp van een span met een border een streepjeslijn in een andere kleur dan de tekst boven de tekst zetten.

span.bor-over-green-dashed

De spans met class="bor-over-green-dashed".

border-top: green dashed 1px;

Groene streepjeslijn aan de bovenkant van de span zetten. Deze komt boven de tekst binnen de span te staan.

Dikke lijn boven (meerkleurig)

Meerkleurige lijn boven tekstMet behulp van 'n serie spans 'n dikke lijn boven woorden zetten. De lijn is in feite een border die bij de span hoort.

p#bor-over-meer, p.bor-under-meer

De paragraaf met id="bor-over-meer" en de paragrafen met class="bor-under-meer". Dit zijn de paragrafen met 'n enkele dikke lijn boven en onder de tekst.

Waarom de ene 'n id heeft en de ander 'n class? Luiheid. Omdat die met de class eerst vaker werd gebruikt en ik ben vergeten 'm terug te zetten naar 'n id en er nu geen zin meer in heb, want dan moet ik het op allerlei plaatsen gaan doen, zoals in deze uitleg. In dit voorbeeld is het ook niet echt van belang. Maar als ik jouw docent zou zijn en jij zou dit doen, ga maar vast griezelen... Want dit is natuurlijk hartstikke inconsequent.

line-height: 1.4em;

De regelhoogte hoeft niet echt verhoogd te worden, maar de tekst komt dan wel heel erg dicht op elkaar te staan, dus is het beter om dat wel te doen. Als eenheid neem ik em, zodat ook in Internet Explorer de regelhoogte mee verandert met de lettergrootte.

p#bor-over-meer span.voegw

De spans met class="voegw" binnen de paragraaf met id="bor-over-meer". Deze span staat rondom de voegwoorden in dit voorbeeld (dat wil zeggen: fouten voorbehouden, want ik ben geen taalkundige).

border-top: red solid 3px;

Rode lijn aan de bovenkant. Deze komt boven de tekst binnen de span te staan. Door het gebruik van een span in plaats van text-decoration kan ik de lijndikte ook veranderen.

p#bor-over-meer span.lidw {border-top: green solid 3px;} p#bor-over-meer span.bijw {border-top: blue solid 3px;} p#bor-over-meer span.zelfst-nw {border-top: black solid 3px;} p#bor-over-meer span.ww {border-top: gold solid 3px;} p#bor-over-meer span.bep-vnw {border-top: orange solid 3px;} p#bor-over-meer span.bijv-nw {border-top: silver solid 3px;} p#bor-over-meer span.voorz {border-top: brown solid 3px;}
p#bor-over-meer span.pers-vnw {border-top: #888 solid 3px;}

Deze selectors werken allemaal precies hetzelfde als p#bor-over-meer span.voegw, behalve dat ze om 'n andere woordsoort staan en 'n andere kleur border hebben.

Lijn onder (tekstkleur)

Zwarte lijn onder tekstMet behulp van text-decoration een lijn in de kleur van de tekst onder de tekst zetten. Hierbij moet erop worden gelet dat dit niet gaat lijken op de onderstreping die bij 'n link gebruikelijk is. Gewone tekst eruit laten zien als 'n link is ongelooflijk verwarrend.

span.deco-under

De spans met class="deco-under".

text-decoration: underline;

Lijn onder de tekst binnen de span zetten. Omdat ik verder helemaal niets doe, krijgt deze lijn de kleur van de tekst.

Stippellijn onder (gekleurd)

Blauwe stippellijn onder tekstMet behulp van een span met een border een stippeltjeslijn in een andere kleur dan de tekst onder de tekst zetten.

span.bor-under-stip

De spans met class="bor-under-stip".

border-bottom: blue dotted 1px;

Blauwe stippellijn aan de onderkant zetten. Deze komt onder de tekst binnen de span te staan.

Dikke lijn onder (meerkleurig)

Meerkleurige lijn onder tekstMet behulp van 'n serie spans 'n dikke lijn onder woorden zetten. De lijn is in feite een border die bij de span hoort.M

Bij deze constructie wordt ook de regelhoogte iets vergroot, zie bij line-height 1.4em.

p.bor-under-meer span.voegw

De spans met class="voegw" binnen de paragraaf met id="bor-under-meer". Deze span staat rondom de voegwoorden in dit voorbeeld (dat wil zeggen: fouten voorbehouden, want ik ben geen taalkundige).

border-bottom: red solid 3px;

Rode lijn aan de onderkant. Deze komt onder de tekst binnen de span te staan. Door het gebruik van een span in plaats van text-decoration kan ik de lijndikte ook veranderen.

p.bor-under-meer span.lidw {border-bottom: green solid 3px;} p.bor-under-meer span.bijw {border-bottom: blue solid 3px;} p.bor-under-meer span.zelfst-nw {border-bottom: black solid 3px;} p.bor-under-meer span.ww {border-bottom: gold solid 3px;} p.bor-under-meer span.bep-vnw {border-bottom: orange solid 3px;} p.bor-under-meer span.bijv-nw {border-bottom: silver solid 3px;} p.bor-under-meer span.voorz {border-bottom: brown solid 3px;}
p.bor-under-meer span.pers-vnw {border-bottom: #888 solid 3px;}

Deze selectors werken allemaal precies hetzelfde als p#bor-under-meer span.voegw, behalve dat ze om 'n andere woordsoort staan en 'n andere kleur border hebben.

Lijn door tekst (tekstkleur)

Zwarte lijn door tekstMet behulp van text-decoration een lijn in de kleur van de tekst door de tekst heen zetten, dus de tekst doorstrepen.

span.deco-line

De spans met class="deco-line".

text-decoration: line-through;

Lijn door de tekst binnen de span zetten. Omdat ik verder helemaal niets doe, krijgt deze lijn de kleur van de tekst.

Lijn door tekst (gekleurd)

Blauwe lijn door tekstMet behulp van een span en text-decoration een lijn in een andere kleur dan de tekst door de tekst heen zetten, dus de tekst doorstrepen.

span.deco-line-blue

De spans met class="deco-line-blue".

text-decoration: line-through;

Lijn door de tekst binnen de span zetten.

color: blue;

Voorgrondkleur blauw. Hierdoor worden de lijn en ook de tekst binnen de span blauw.

Om de tekst weer zwart te maken wordt om de tekst nog 'n extra span gezet, zie verder bij span.tekst.

Lijn boven en onder (tekstkleur)

Zwarte lijn boven en onder tekstMet behulp van text-decoration een lijn in de kleur van de tekst boven en onder de tekst zetten. Hierbij moet erop worden gelet dat dit niet gaat lijken op de onderstreping die bij 'n link gebruikelijk is. Gewone tekst eruit laten zien als 'n link is ongelooflijk verwarrend.

span.deco-line-over-under

De spans met class="deco-line-over-under".

text-decoration: overline underline;

Lijn boven en onder de tekst binnen de span zetten. Omdat ik verder helemaal niets doe, krijgt deze lijn de kleur van de tekst.

line-height: 1.5em;

De regelhoogte hoeft niet echt verhoogd te worden, maar de tekst komt dan wel heel erg dicht op elkaar te staan, dus is het beter om dat wel te doen. Als eenheid neem ik em, zodat ook in Internet Explorer de regelhoogte mee verandert met de lettergrootte.

Lijn boven en onder (gekleurd)

Rode lijn boven, blauwe lijn onder tekstMet behulp van drie spans en text-decoration een lijn in een andere kleur dan de tekst boven en onder de tekst zetten. Hierbij moet erop worden gelet dat dit niet gaat lijken op de onderstreping die bij 'n link gebruikelijk is. Gewone tekst eruit laten zien als 'n link is ongelooflijk verwarrend.

Een span rondom de tekst zorgt voor de rode lijn boven de tekst, zie verder bij span.deco-over-red.

span.deco-under-blue-hoog

De spans met class="deco-under-blue-hoog".

text-decoration: underline;

Lijn onder de tekst binnen de span zetten.

color: blue;

Voorgrondkleur blauw. Hierdoor wordt ook de lijn blauw.

line-height: 1.5em;

De regelhoogte hoeft niet echt verhoogd te worden, maar de tekst komt dan wel heel erg dicht op elkaar te staan, dus is het beter om dat wel te doen. Als eenheid neem ik em, zodat ook in Internet Explorer de regelhoogte mee verandert met de lettergrootte.

De tekst staat binnen span.deco-under-blue-hoog, die een blauwe kleur heeft gekregen. Hierdoor zou de tekst zelf ook blauw worden. Om de tekst weer zwart te maken wordt om de tekst nog 'n extra span gezet, zie verder bij span.tekst.

Dubbele lijn onder (gekleurd)

Rode en blauwe lijn onder tekstMet behulp van text-decoration en drie spans twee lijnen in een andere kleur dan de tekst onder de tekst zetten.

span.bor-under-blue

De spans met class="bor-under-blue".

border-bottom: blue solid 1px;

Blauwe rand aan de onderkant geven. Deze komt onder de tekst binnen de span te staan. Deze lijn blijkt iets lager te komen dan de onderstreping die je met text-decoration opgeeft, waardoor je 'n dubbele lijn krijgt.

span.deco-under-red

De spans met class="deco-under-red".

text-decoration: underline;

Tekst binnen deze span onderstrepen.

color: red;

Voorgrondkleur rood. Hierdoor wordt ook de onderstreping rood.

De tekst staat binnen span.deco-under-red, die een rode kleur heeft gekregen. Hierdoor zou de tekst zelf ook rood worden. Om de tekst weer zwart te maken wordt om de tekst nog 'n extra span gezet, zie verder bij span.tekst.

Lijn en stippellijn onder

Rode lijn en blauwe stippellijn onder tekstMet behulp van text-decoration en drie spans een lijn en een stippellijn in een andere kleur dan de tekst onder de tekst zetten.

span.bor-under-blue-dotted

De span met class="bor-under-blue-dotted".

border-bottom: blue dotted 1px;

Blauwe stippellijn aan de onderkant geven. Deze komt onder de tekst binnen de span te staan. Deze onderstreping blijkt iets lager te komen dan de onderstreping die je met text-decoration opgeeft, waardoor je 'n dubbele lijn krijgt.

De rode lijn wordt met behulp van 'n span en text-decoration aangegeven. Zie verder bij span.deco-under-red.

Omdat de tekst binnen 'n span staat die color: red; heeft gekregen, zou de tekst zelf ook rood worden. Dit voorkomen we met 'n extra span rondom de tekst. Zie verder bij span.tekst.

Dubbele dikke lijn onder (meerkleurig)

Dubbele meerkleurige lijn onder tekstMet behulp van 'n serie spans 'n dubbele meerkleurige lijn onder de tekst zetten. De bovenste lijn is steeds even lang als de afzonderlijke woorden, de onderste als de afzonderlijke zinsdelen (althans: dat is de bedoeling, maar ik ben geen taalkundige...).

p#bor-under-meer-meer span.voegw

De span met class="voegw" binnen de paragraaf met id="bor-under-meer-meer". Deze serie spans hoort bij de woordsoorten.

border-bottom: red solid 5px;

Rode lijn aan de onderkant. Deze komt onder de tekst binnen de span te staan. Door het gebruik van een span in plaats van text-decoration kan ik de lijndikte ook veranderen.

Omdat om elk woord een aparte span staat, is deze lijn niet langer dan het woord zelf is.

p#bor-under-meer-meer span.lidw {border-bottom: green solid 5px;} p#bor-under-meer-meer span.bijw {border-bottom: blue solid 5px;} p#bor-under-meer-meer span.zelfst-nw {border-bottom: black solid 5px;} p#bor-under-meer-meer span.telw {border-bottom: #0ff solid 5px;} p#bor-under-meer-meer span.ww {border-bottom: gold solid 5px;} p#bor-under-meer-meer span.bep-vnw {border-bottom: orange solid 5px;} p#bor-under-meer-meer span.bijv-nw {border-bottom: silver solid 5px;} p#bor-under-meer-meer span.voorz {border-bottom: brown solid 5px;}
p#bor-under-meer-meer span.pers-vnw {border-bottom: #888 solid 5px;}

Deze selectors werken allemaal precies hetzelfde als p#bor-under-meer-meer span.voegw, behalve dat ze om 'n andere woordsoort staan en 'n andere kleur border hebben.

p#bor-under-meer-meer span.ond

De span met class="ond" binnen de paragraaf met id="bor-under-meer-meer". Deze serie spans hoort bij de zinsdelen.

display: inline-block;

Aan de onderkant van deze span wordt verderop 'n border neergezet. Zo'n border wordt normaal genomen gelijk onder de tekst gezet, ongeacht de regelhoogte. Maar gelijk onder de tekst staat al de border voor de woordsoorten, die ik bij p#bor-under-meer-meer span.voegw heb opgegeven.

Daardoor zouden die border en de border die ik hieronder opgeef op dezelfde hoogte komen te staan. Als ik van deze span 'n inline-block maak, gaat hij zich als 'n blok-element gedragen, maar komt toch niet op 'n nieuwe regel te staan. Hierdoor komt de border niet meer gelijk rondom de tekst te staan, zoals bij 'n gewone inline-span, maar aan de buitenkant van de span.

Als ik dus de span hoger maak, schuift de border van deze span nu mee.

Inline-elementen zoals tekst en spans komen altijd halverwege de regelhoogte te staan. Dat geldt dus ook voor de binnenste spans met de woordsoorten en de daarin staande tekst.

Als ik de regelhoogte van deze buitenste span met het zinsdeel verhoog, komen de binnenste spans met de woordsoorten en de daarin staande tekst dus in het midden van de grotere regelhoogte te staan.

Dit heeft tot gevolg dat aan de onderkant genoeg ruimte vrij komt om de border aan de onderkant neer te zetten, onder de border van de binnenste spans met de voegwoorden. Aan de bovenkant komt ook extra ruimte, maar die blijft leeg. Hierdoor komt er wat meer afstand tussen de regels, wat er beter uitziet.

border-bottom: red solid 5px;

Rode lijn aan de onderkant. Deze komt onder de tekst binnen de span te staan. Door het gebruik van een span in plaats van text-decoration kan ik de lijndikte ook veranderen.

De spans waar deze border bij hoort staan om één of meer woorden heen, afhankelijk van de lengte van het zinsdeel. Hierdoor krijgt het hele zinsdeel steeds dezelfde kleur, ook de spaties tussen de woorden.

line-height: 1.7em;

Grotere regelhoogte. Voor de uitleg zie display: inline-block; hierboven.

Aanvullend daarbij: als eenheid neem ik em, zodat ook in Internet Explorer de regelhoogte mee verandert met de lettergrootte.

p#bor-under-meer-meer span.gez {display: inline-block; border-bottom: blue solid 5px; line-height: 1.7em;} p#bor-under-meer-meer span.meew-vw {display: inline-block; border-bottom: green solid 5px; line-height: 1.7em;} p#bor-under-meer-meer span.lijd-vw {display: inline-block; border-bottom: black solid 5px; line-height: 1.7em;} p#bor-under-meer-meer span.bijw-bep {display: inline-block; border-bottom: #0ff solid 5px; line-height: 1.7em;} p#bor-under-meer-meer span.geen-idee {display: inline-block; border-bottom: gold solid 5px; line-height: 1.7em;}
p#bor-under-meer-meer span.bijv-bep {display: inline-block; border-bottom: orange solid 5px; line-height: 1.7em;}

Deze selectors werken allemaal precies hetzelfde als p#bor-under-meer-meer span.ond, behalve dat ze om 'n ander zinsdeel staan en 'n andere kleur border hebben.

Lijn boven, door en onder (tekstkleur)

Zwarte lijn boven, door en onder tekstMet behulp van text-decoration een lijn in de kleur van de tekst boven, onder en door de tekst zetten. Hierbij moet erop worden gelet dat dit niet gaat lijken op de onderstreping die bij 'n link gebruikelijk is. Gewone tekst eruit laten zien als 'n link is ongelooflijk verwarrend.

span.deco-over-line-under

De spans met class="deco-over-line-under".

text-decoration: overline line-through underline;

Lijn boven, onder en door de tekst binnen de span zetten. Omdat ik verder helemaal niets doe, krijgt deze lijn de kleur van de tekst.

Lijn boven, door en onder (gekleurd)

Rode lijn boven, blauwe lijn door en groene lijn onder tekstMet behulp van vier spans en text-decoration een lijn in een andere kleur dan de tekst boven, onder en door de tekst zetten. Hierbij moet erop worden gelet dat dit niet gaat lijken op de onderstreping die bij 'n link gebruikelijk is. Gewone tekst eruit laten zien als 'n link is ongelooflijk verwarrend.

Voor de rode lijn boven de tekst zie span.deco-over-red.

Voor de blauwe lijn door de tekst zie span.deco-line-blue.

span.deco-under-green

De spans met class="deco-under-green".

text-decoration: underline;

Lijn onder de tekst binnen de span zetten.

color: green;

Voorgrondkleur groen. Hierdoor wordt ook de tekst binnen de span groen.

Omdat de tekst binnen een span staat die groen is gekleurd, moet ik de tekst weer zwart maken. Hiervoor gebruik ik nog 'n span, zie verder bij span.tekst.

Speciaal voor Internet Explorer 6 en 7

< !--[if (IE 6) | (IE 7)]> <style type="text/css"> p#bor-over-meer span {display: inline-block;} span#bor-under-stip span {display: inline-block; border-bottom: blue dashed 1px;} .ie-pad-boven {padding-top: 1px;} .ie-pad-onder {padding-bottom: 1px;} p.bor-under-meer {padding-bottom: 2px;} p#bor-under-meer-meer span.ond, p#bor-under-meer-meer span.gez, p#bor-under-meer-meer span.meew-vw, p#bor-under-meer-meer span.lijd-vw, p#bor-under-meer-meer span.bijw-bep, p#bor-under-meer-meer span.geen-idee, p#bor-under-meer-meer span.bijv-bep {line-height: 1.8em;} </style> <![endif]-->

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor Internet Explorer 6 en 7 (het verticale streepje betekent 'of'), maar je kunt het ook voor andere versies aangeven.

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

<!--[if (IE 6) | (IE 7)]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 6 en 7 in. De css voor Internet Explorer 6 en 7 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

Het is belangrijk dat de spaties in <!--[if (IE 6) | (IE 7)]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

p#bor-over-meer span

De spans binnen de paragraaf met id="bor-over-meer". Dit is het voorbeeld Dikke lijn boven (meerkleurig).

display: inline-block;>

Dit is nodig omdat anders de helft van de lijn boven de bovenste regel wegvalt. Bij 'n grotere letter valt de hele lijn boven de bovenste regel weg.

.ie-pad-boven

De elementen met class="ie-pad-boven". Deze class staat bij de Streepjeslijn boven (gekleurd).

padding-top: 1px;

Zonder deze kleine padding aan de bovenkant valt de streepjeslijn boven de bovenste regel weg.

.ie-pad-onder

De elementen met class="ie-pad-onder". Deze class staat bij Stippellijn onder (gekleurd), Dubbele lijn onder (gekleurd) en Lijn en stippellijn onder.

padding-bottom: 1px;

Zonder deze kleine padding aan de onderkant valt onder de onderste regel de lijn onder de tekst weg. Als er twee lijnen staan valt alleen de onderste lijn weg.

p.bor-under-meer

De paragraaf met class="bor-under-meer". Dit is het voorbeeld met de enkele dikke lijn onder de tekst.

padding-bottom: 2px;

Dit is nodig omdat anders de helft van de lijn onder de onder regel wegvalt.

p#bor-under-meer-meer span.ond, p#bor-under-meer-meer span.gez, p#bor-under-meer-meer span.meew-vw, p#bor-under-meer-meer span.lijd-vw, p#bor-under-meer-meer span.bijw-bep, p#bor-under-meer-meer span.geen-idee, p#bor-under-meer-meer span.bijv-bep

Dit zijn de spans rondom de zinsdelen binnen de paragraaf met id="bor-under-meer-meer".

line-height: 1.8em;

Zonder deze extra regelhoogte wordt de bovenste lijn dunner dan hij moet zijn.

Als eenheid neem ik em, omdat anders de regelhoogte niet mee verandert met de lettergrootte in deze twee browsers.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Specifiek voor dit voorbeeld

Zonder css wordt gewoon de normale tekst weergegeven, alleen de lijnen ontbreken. Dit soort lijnen levert dus geen toegankelijkheidsproblemen op.

Getest in

Laatst gecontroleerd op 1 april 2012.

(Internet Explorer 6 is voor het laatst gecontroleerd op 6 april 2010. Op deze browser test ik niet meer. Maar omdat de code niet is veranderd, neem ik aan dat dit voorbeeld ook nog werkt in Internet Explorer 6.)

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 6, 7, 8 en 9 in de resoluties 800x600, 1024x768, 1280x1024 en 1440x900. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768, 1280x1024 en 1440x900 is ook in- en uitzoomen en een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Eventuele problemen met betrekking tot zoomen en lettergrootte staan bij Bekende problemen.

Er is getest met behulp van muis en toetsenbord.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. NVDA is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox, die de pagina laat zien zoals een screenreader hem ziet.

Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld mobiele systemen als iOS of Android, en ook niet op apparaten als smartphones, iPad, enz. De kans is heel erg groot dat dit voorbeeld niet (volledig) werkt op dat soort systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

:

Nieuw opgenomen.

29 april 2011:

In de download stond abusievelijk bij p#bor-over-meer, p.bor-under-meer als regelhoogte 12px in plaats van 1.4em, waardoor de regelhoogte in Internet Explorer niet mee veranderde met de lettergrootte.

Bekende problemen

Internet Explorer 6 en 7

Internet Explorer 6

Internet Explorer 7

Bij verschillende constructies, zoals bij Dikke lijn boven (meerkleurig) en Dubbele dikke lijn onder (meerkleurig) komt bij zoomen tekst over elkaar te staan.

Bij allerlei constructies, ook als alleen text-decoration is gebruikt, zoomen de lijnen soms wel, soms niet mee, ze verdwijnen helemaal of gedeeltelijk, kortom: bij zoomen wordt het de gebruikelijke puinhoop.

Hier is niets aan te doen, het komt door de ongelooflijk slechte manier waarop zoomen is geïmplementeerd in Internet Explorer 7. In Internet Explorer 8 werkt zoomen wel goed.

Als je alleen de lettergrootte verandert, gaat alles wel goed.