Skip links en inhoudsopgave

Laatst aangepast: 29 november 2011

Pijl met tekst erin. Pijl past zich aan lettergrootte aan

Korte omschrijving

De tekst op de pijl is gewone tekst. Alle pijlen, ongeacht de grootte, maken gebruik van dezelfde twee afbeeldingen. De grootte van de pijl verandert mee met de lettergrootte.

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

Deze constructie werkt alleen boven een effen achtergrond. Er wordt gebruik gemaakt van twee png's, die gedeeltelijk dezelfde kleur hebben als de achtergrond van de pagina (of waar de pijl ook maar boven staat). Bij gebruik van een achtergrond-afbeelding is het onmogelijk om de png's goed aan te laten sluiten op de achtergrond-afbeelding. En zelfs als dat al in alle browsers zou lukken, gaat het mis bij de kleinste afwijking van lettergrootte, zoomen, enz.

De png's moeten hoog genoeg worden gemaakt, anders ontstaan bij grotere letters groene strepen boven en onder de pijlpunt en boven en onder de staart van de pijl. Afhankelijk van de instellingen van je browser kan dat ook in het voorbeeld al het geval zijn bij de grotere pijlen.

In het voorbeeld zijn de twee grootste lettergroottes 5,2 en 7 em. Voor deze twee zou ik aparte, grotere, png's gebruiken voor 'n echte site. Dan gaat 't ook niet gelijk mis als iemand 'n grotere lettergrootte heeft ingesteld. Deze lettergrootte is trouwens wel héél erg groot, dus ik zie die niet zo snel in 't echt gebruikt worden.

De plaats van de tekst in verticale richting is te regelen met line-height in div#een tot en met div#acht, maar dit kan wel problemen geven in Internet Explorer 6 en moet dus goed worden getest.

In het voorbeeld hebben de png's schuine lijnen onder een hoek van 45° en de hoogte is twee keer zo groot als de breedte. Als je 'n meer spitse punt wilt (of 'n stompere), kun je hoogte en breedte - en dus ook de schuinte van de lijn - aanpassen. Ik heb dit niet uitgebreid getest, maar het lijkt ook dan goed te werken. Maar zeker weten doe ik dat dus niet.

Zonder css, zoals veel spraakbrowsers en dergelijke de pagina zien, wordt alleen de tekst op de pijl weergegeven. Van de pijl zelf is dan niets te zien. Deze constructie levert dus geen toegankelijkheidsproblemen op.

Zonder afbeeldingen wordt een groene rechthoek met daarin de tekst weergegeven.

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

Voor dit soort pijlen zou je ook 'n volledige afbeelding waar de tekst vast op staat kunnen nemen. Maar dat heeft 'n aantal nadelen:

- inhoud en opmaak van de tekst zijn moeilijk te veranderen, omdat je dan de hele afbeelding moet wijzigen in 'n grafisch programma;

- omdat de tekst geen gewone tekst is, is hij niet te lezen door zoekmachines en mogelijk ook niet door speciale programma's als spraakbrowsers (mogelijk, omdat je dat soms door gebruik van 'n alt-tekst zou kunnen opvangen);

- vergroten en verkleinen kan problemen opleveren, omdat de tekst snel slecht leesbaar kan worden. Om dat te voorkomen zou je met behoorlijk grote afbeeldingen moeten werken, die je verkleind weergeeft bij 'n kleinere letter, en op werkelijke grootte bij 'n grotere letter. Of je zou vergroten en verkleinen helemaal moeten voorkomen, waardoor de lettergrootte niet kan worden aangepast.

De tekst op de pijlen uit dit voorbeeld is gewone normale tekst, die dus op de normale manier door de bezoeker vergroot en verkleind kan worden. Zonder css is de tekst gewoon normale tekst en nog steeds leesbaar en toegankelijk voor spraakbrowsers, zoekmachines, enz.

Omdat het gewone tekst is, is de tekst ook makkelijk te veranderen. Behalve de tekst zelf moet alleen de breedte van de pijl eventueel worden aangepast, meer is niet nodig.

Alle pijlen gebruiken dezelfde twee plaatjes: eentje voor de punt en eentje voor de staart. Het enige verschil in de code is de lettergrootte, de rest van de html en css is voor alle pijlen volledig hetzelfde.

Om de rest van deze uitleg te kunnen volgen kan het helpen als je div#een enz. en div#een span enz. even 'n border geeft, allebei 'n andere kleur.

De tekst staat in 'n div met 'n groene achtergrondkleur. Met wat padding boven en onder wordt de tekst verticaal op de juiste plaats gezet. De breedte van de div wordt opgegeven in em, zodat deze mee verandert met de lettergrootte. Van zichzelf zou een div de hele breedte van het ouder-element of het venster van de browser vullen, en dat is hier geen goed idee. De hoogte past zich automatisch aan, maar is toch opgegeven omdat Internet Explorer 6 hem nodig heeft. Dit geeft trouwens voor alle browsers de mogelijkheid voor 'n kleine correctie van de hoogte, als dat nodig zou zijn.

De tekst staat dus in feite in een doodnormale div met 'n groene achtergrond.

Punt van de pijlDe punt aan de voorkant is relatief simpel. Het is een gedeeltelijk doorzichtige png met een forse hoogte, zodat hij ook bij de grootste pijl nog hoog genoeg is. In deze div zit de punt van de pijl. De punt zelf is doorzichtig, de delen boven en onder de punt hebben de kleur van de achtergrond van de pagina. Daarom werkt deze techniek ook alleen maar bij een effen achtergrond, het is (vrijwel) onmogelijk om zo'n png naadloos op 'n achtergrond-afbeelding aan te laten sluiten. En als dat al zou lukken in alle browsers, gaat het gelijk mis bij de kleinste verandering van lettergrootte of zoiets.

Deze png wordt als achtergrond-afbeelding links in de div met de tekst gezet. Verticaal gecentreerd, zodat de punt altijd precies in het midden van de div met de tekst staat.

Omdat het middendeel met de punt doorzichtig is, zie je daardoorheen de groene achtergrondkleur van de div met de tekst. Bij verandering van de kleur van de pijl zit de png dus niet in de weg, omdat je daar dwars doorheen kijkt. Hierdoor kun je heel simpel de kleur van de pijl veranderen. In de illustratie heeft het doorzichtige deel ook hier de kleur van de pagina waar deze tekst op staat.

Boven en onder het middendeel heeft de png dezelfde kleur van de achtergrond van de pagina (of waar de pijl maar boven staat). En omdat 'n achtergrond-afbeelding 'wint' van 'n achtergrondkleur, zie je daar dus de dezelfde kleur als de achtergrond van de pagina.

Aan de voorkant geef ik de div met de tekst 'n padding. 'n Padding krijgt, anders dan 'n marge, gewoon de achtergrondkleur van de div. Boven deze padding staat de deels doorzichtige png.

Voor deze padding neem ik als maat 1 em. Bij de grootste pijl wordt deze 1 em veel breder dan bij de kleinste pijl. Hoe het komt dat deze 1 em bij de grootste pijl veel groter is dan de 1 em bij de kleinste pijl leg ik uit bij padding, je moet hier gewoon maar even geloven dat het zo is. En omdat de hoogte bij de grootste pijl ook groter is dan bij de kleinste pijl, is dus een veel groter deel van de pijlpunt zichtbaar: een grotere punt dus.

Staart van de pijlDe achterkant van de pijl is wat ingewikkelder, omdat je maar één achtergrond-afbeelding kunt gebruiken in een element. In css 3 is dat niet meer zo, maar daar heb je op 't moment nog weinig aan omdat browsers het nog nauwelijks ondersteunen.

Aan de achterkant gebruik ik een span met daarin een png met de staart van de pijl als achtergrond-afbeelding. Hier heeft juist het middendeel van de png de kleur van de achtergrond van de pagina, en de stukken daarboven en daaronder zijn doorzichtig. Als ik de kleur van de achtergrond van de div met de tekst verander, zit de png dus niet in de weg, omdat die doorzichtig is en je gewoon door de png heen de kleur van de div met de tekst ziet. Hierdoor kun je heel eenvoudig de kleur van de pijl veranderen. In de illustratie heeft het doorzichtige deel ook hier de kleur van de pagina waar deze tekst op staat.

De span met de png wordt aan de rechterkant van de div gepositioneerd. En dat was het lastige deel. De hoogte is geen probleem: gewoon 100%, dan vult de span en dus de png altijd de div met de tekst volledig. Bij 'n kleinere hoogte is minder zichtbaar van de png, dus 'n kleinere staart (hoe heet dat eigenlijk bij 'n pijl?????).

De png is 100 px breed. Als ik de span met de png 100 px breed maak en rechts van de div met de tekst zet, heb ik echter 'n probleem: ik heb dan altijd 'n 'uitsteeksel' van 100 px, zelfs bij de kleinste pijl. Dat levert problemen op met 'n eventueel element dat naast de pijl moet komen. Dat moet ik dan ook weer gaan positioneren om 'n z-index te kunnen gebruiken, of andere potentieel ingewikkelde en problematische oplossingen.

Om dat te voorkomen zet ik de span 'n aantal procenten rechts buiten de div met de tekst. Dan heb ik nog steeds bij bepaalde lettergroottes 'n 'uitsteeksel' maar dat is vrij klein en niet meer dan 'n normale marge vaak ook zal zijn. Het percentage wordt genomen ten opzichte van het ouder-element: de div met de tekst. Als de breedte daarvan verandert, verandert de breedte van de procenten dus mee. En dus steekt de staart bij 'n grotere pijl meer uit en bij 'n kleinere minder: precies de bedoeling. Dit was gewoon 'n kwestie van uitproberen: procenten werkte hier beter dan em.

Als breedte voor de span neem ik weer 1 em. Bij de grootste pijl wordt deze 1 em veel breder dan bij de kleinste pijl. Hoe het komt dat deze 1 em bij de grootste pijl veel groter is dan de 1 em bij de kleinste pijl leg ik uit bij padding, je moet hier gewoon maar even geloven dat het zo is. Bij een grote pijl is de span dus breder dan bij een kleine pijl, en dus is er dan meer zichtbaar van de achtergrond-afbeelding met de staart. Verticaal zet ik de span, en dus de png, in het midden.

Omdat de png maar 100 px breed is, geef ik voor de span 'n maximum-breedte van 100 px op. Bij de grootste maat pijl wordt de span anders breder dan de achtergrond-afbeelding en komt er rechts van de png 'n groene balk te staan: de achtergrondkleur van de span die niet meer wordt afgedekt door de achtergrond-afbeelding.

Omdat Internet Explorer 6 geen maximum breedte kent, is dat ook precies wat er bij die browser gebeurt. Dat kun je eventueel opvangen met speciale css voor deze browser, of JavaScript, of 'n expression. Maar ik zie zo'n grote pijl eigenlijk niet gebruikt worden, dus ik heb 't maar zo gelaten.

Omdat alle maten flexibel zijn, blijkt dit goed te werken in alle geteste browsers.

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" />

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

Deze regel 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.

<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 dat 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 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%;

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.

background: #ff9;

Achtergrond 'n kleurtje geven.

De achtergrond moet dezelfde kleur hebben als delen van de afbeelding, die wordt gebruikt voor de pijl. Zie voor uitleg bij background.

div#een, div#twee, div#drie, div#vier, div#vijf, div#zes, div#zeven, div#acht

De divs met id="een", id="twee", enz. Binnen elke div staat 'n pijl. Hier geef ik de instellingen op die voor elke div hetzelfde zijn. Dat is alles behalve de lettergrootte.

position: relative;

Om de span met de staart van de pijl te kunnen positioneren ten opzichte van deze div. Daarvoor moet deze div zelf ook 'n positie hebben, zelfs als ik daar verder niets invul.

left: -2%;

In het voorbeeld heb ik de pijlen horizontaal gecentreerd. Om dat te kunnen doen, moet ik wat correcties aanbrengen. Als je de pijlen niet centreert is deze regel dus helemaal niet nodig.

Deze divs hebben een bepaalde breedte, dus die kan ik simpel horizontaal centreren met marge: 0 auto; zoals ik hieronder doe. Maar aan de rechterkant steekt dat aanhangsel, de staart, buiten de pijl uit. En omdat die absoluut is gepositioneerd, telt die niet mee voor de breedte van de pijl. Oftewel: de div met de tekst en de punt van de pijl staat keurig in het midden, maar de staart staat veel te ver naar rechts. En dat is wat telt, want dat zie je.

De span met de staart staat 8 % naar rechts, gerekend vanaf de div. Dus voor het oog staat de hele pijl 8 % te veel naar rechts. Om hem goed in midden te krijgen zou hij dus 4 % naar links moeten worden gezet. Maar voor het oog staat hij met 2 % in het midden. 4 % klopt trouwens ook niet helemaal, ik neem aan omdat er met verschillende eenheden wordt gewerkt (%, em, px). Als je het echt uitmeet moet het ongeveer 3 % zijn, maar dan staat hij door gezichtsbedrog ogenschijnlijk juist niet in het midden. Omdat het mensen zijn die hiernaar kijken en geen liniaals, kun je het beter voor het oog in het midden zetten dan volgens de liniaal.

width: 6.6em;

Van zichzelf vult een blok-element zoals 'n div, als je geen breedte opgeeft, de volle breedte van het ouder-element, en als dat er niet is - zoals hier - van het venster van de browser. Omdat de achtergrond van de div groen is, is dat hier niet de bedoeling, dus geef ik 'n breedte op.

Breedte in em, zodat deze mee verandert met de lettergrootte. Je moet er wel op letten dat de breedte groot genoeg is om de volledige tekst te bevatten. Wat niet past, wordt op de volgende regel gezet of verdwijnt onder de span met de staart.

height: 1.2em;

'n Hoogte opgeven is eigenlijk niet echt nodig: de div krijgt automatisch de juiste hoogte. Het is echter nodig voor Internet Explorer 6, omdat die anders de onderkant van de span met de staart gelijk zet met de onderkant van de letter n. En 't is eigenlijk ook wel handig voor andere browsers, omdat ik nu door 'n kleine correctie kan zorgen dat de tekst voor 't oog verticaal goed in 't midden staat.

Omdat de eenheid em is, verandert deze mee met de lettergrootte.

Als je de tekst hoger of lager wilt neerzetten kun je daarvoor line-height gebruiken, maar dat moet je wel heel goed testen, want het kan problemen geven in Internet Explorer 6.

margin: 10px auto 0;

Omdat hier geen waarde voor links is ingevuld, krijgt dat automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 10px auto 0 auto in de volgorde boven - rechts - onder - links. Boven 'n kleine marge omdat de pijlen anders tegen elkaar aan komen te staan. Links en rechts auto, oftewel evenveel, oftewel: horizontaal gecentreerd. Deze manier van horizontaal centreren werkt alleen maar als het te centreren element een breedte heeft.

padding: .2em 0 .2em 1em;

Omdat de eenheid em is, verandert deze mee met de lettergrootte.

Boven en onder 'n kleine afstand tussen buitenkant van de div, en dus de pijl, en de tekst. Rechts is dat niet nodig, want daar komt de span met de staart nog achteraan.

Links een grotere padding: daar komt de punt van de pijl.

Nou zou je zeggen dat 1 em 1 em is. Dus hoe kan het dan dat 1 em bij 'n grote pijl veel groter is dan 1 em bij 'n kleine pijl? Dat komt omdat dit geen absolute, maar relatieve maten zijn. 'n Centimeter bijvoorbeeld is 'n absolute maat, die is altijd hetzelfde. Maar 'n em is 'n relatieve eenheid.

Over de oorsprong van de eenheid em doen veel verschillende verhalen de ronde. Ik pik er de handigste uit, of die nu klopt of niet: 1 em is de breedte van de kleine letter 'm'.

Ik heb bij de grootste pijl als lettergrootte 7 em opgegeven, dus de 'm' wordt 7 keer zo breed (lees: groot) als de standaardbreedte. En uiteraard worden ook alle andere tekens 7 keer zo groot.

Bij de kleinste pijl heb ik 0.5 em opgegeven als lettergrootte. Daar wordt de 'm' dus half zo breed (lees: groot) als de standaardbreedte, en alle andere tekens ook.

Vanaf nu is de em, die is gebaseerd op de breedte van de 'm', dus zeven keer zo groot als de oorspronkelijke em. Op alle andere plaatsen waar ik binnen deze div - ook binnen de kind-elementen van deze div - nu de eenheid em gebruik, wordt de nieuwe breedte van de letter 'm' als basis genomen. Als ik dus bij de padding van de grootste pijl 1 em opgeef, is dat eigenlijk 7 em: de lettergrootte is 7 em, en dat is het uitgangspunt.

Bij de kleinste pijl, met lettergrootte 0.5 em, wordt een padding van 1 em eigenlijk 0.5 em.

(Voor de andere eenheden als 0.2 em geldt uiteraard hetzelfde: 0.2 em is eigenlijk 7 x 0.2 = 1.4 em, enz.)

Het komt erop neer dat bij bij em eerst de lettergrootte wordt ingesteld, en dat die vervolgens overal elders als basis wordt genomen.

Deze manier van rekenen is mogelijk even wennen, maar het is uiteindelijk heel praktisch, want hierdoor kan de css voor alle pijlen helemaal hetzelfde zijn, op de lettergrootte na. En je hoeft 't ook maar één keer uit te proberen: als 't bij de grootste pijl goed is, is het ook bij de kleinste pijl goed. (Uiteraard moet je 't toch voor de zekerheid testen, maar 't werkt wel veel sneller dan tig keer 't wiel helemaal opnieuw uit moeten vinden. En 't werkt ook voor alle tussenliggende maten die je niet hebt getest.)

font-size: .5em;

Elke div, dus elke pijl, heeft 'n eigen maat. De kleinste geef ik hier al op, scheelt 'n aparte regel. Voor de andere overrule ik dit later.

color: white;

Kleur van de letters.

background: green url(049-pics/pijl-voor.png) no-repeat 0 50%;}

De hele div met de tekst 'n groene achtergrond geven. Binnen de div komt 'n achtergrond-afbeelding te staan: de png met de pijlpunt. En omdat 'n achtergrond-afbeelding 'wint' van 'n achtergrondkleur, is die png dus zichtbaar boven de achtergrondkleur.

De png moet niet worden herhaald: aan één pijlpunt hebben we genoeg.

Helemaal links neerzetten en verticaal halverwege, zodat de punt van de pijl altijd aan de voorkant in het midden staat.

Punt van de pijlHet middendeel van de png, het deel met de punt, is doorzichtig. Het voordeel hiervan is dat de achtergrondkleur van de div zichtbaar is door de png heen. Als ik de kleur van de div, en dus van de pijl, verander, verandert de punt ook mee. Zou ik het middendeel van de png, de punt, ook groen hebben gemaakt, dan moet ik de png ook mee veranderen naar de nieuwe kleur. In de illustratie heeft het doorzichtige deel de de kleur van de pagina waar deze tekst op staat.

Het deel boven en onder de punt heeft de kleur van de achtergrond van de pagina (of van het element waar de pijl in staat). Dit kan niet doorzichtig zijn, want hierachter zit immers de div met de tekst, en die is hartstikke knalgroen. Daarom werkt deze techniek ook niet boven 'n achtergrond-afbeelding: het is vrijwel onmogelijk om de png met de pijlpunt in alle browsers goed te laten aansluiten op de achtergrond-afbeelding, en als het al zou lukken is het gelijk fout bij 'n iets andere lettergrootte of welke verandering dan ook.

div#twee {font-size: .7em;}

tot en met

div#acht {font-size: 7em;}

De divs met de andere 7 pijlen. Omdat alle maten relatief zijn, hoef ik alleen maar de lettergrootte te veranderen en de hele rest verandert spontaan mee.

div#een span, div#twee span, div#drie span, div#vier span, div#vijf span, div#zes span, div#zeven span, div#acht span

De spans binnen de div met id="een", idem met id="twee", enz. De spans waarbinnen de staarten van de pijl staan. Ik had de spans ook 'n class kunnen geven om ze te selecteren, maar dat maakt qua lengte weinig uit hier, want dan zou de html weer langer worden.

position: absolute;

Om de staart op de goede plaats neer te kunnen zetten. Het eerste ouder-element met een positie is de div waarbinnen de hele pijl staat, dus er wordt gepositioneerd ten opzichte van die div. Dat is ook de div met de groene achtergrond, dus dat komt goed uit (en is natuurlijk niet helemaal toevallig...).

Van zichzelf is een span 'n inline-element. Door het absoluut te positioneren wordt het 'n blok-element en kan ik attributen zoals achtergrond-afbeelding gebruiken.

top: 0;

Bovenaan neerzetten, zodat de bovenkant van de staart en de bovenkant van de pijl zelf op gelijke hoogte staan.

right: -8%;

Het percentage wordt genomen ten opzichte van het ouder-element, dat is hier de div waarbinnen de hele pijl staat. De span met de staart dus 8 % van de breedte van de div met de pijl rechts van die div plaatsen. Door uitproberen ontdekt dat dit de goede afstand is.

Het makkelijkste zou zijn om de span 100 px breed te maken, even breed als de achtergrond-afbeelding, en dan gewoon rechts van de div met de tekst neer te zetten. Maar dan zou ik altijd 'n 'uitsteeksel' van 100 px hebben, ook bij de kleinste pijlen. En dat levert conflicten op met de rest van de pagina, omdat de span absoluut is gepositioneerd en dus geen rekening houdt met de rest van de pagina. Om dat te corrigeren zou ik dan met positie en z-index en zo moeten gaan werken, wat veel lastiger gaat worden dan wat ik nu doe.

width: 1em;

Uitleg over waarom 1em bij 'n grote pijl meer is dan 1 em bij 'n klein pijl bij padding.

Het gaat hier om de breedte. Omdat de span rechts is gepositioneerd, wordt de breedte van daaruit naar links gemeten, dus achterstevoren als het ware. En omdat de breedte mee verandert met de lettergrootte, werkt dit prima.

max-width: 100px;

De achtergrond-afbeelding is 100 px breed. De achtergrondkleur van de span is groen. Bij de grotere pijlen kan de span breder worden dan 100 px. Er is dan geen achtergrond-afbeelding meer, en dan zie je dus de groene achtergrondkleur. Dat levert 'n verticale groene balk rechts naast de staart van de pijl op. Dit voorkomt dat: nooit breder dan de achtergrond-afbeelding.

height: 100%;

Even hoog als de div met de pijl, zodat boven- en onderkant van de staart altijd naadloos aansluiten op de groene achtergrondkleur van de div met de pijl.

background: green url(049-pics/pijl-achter.png) no-repeat left 50%;

Staart van de pijlAchtergrondkleur groen maken, net zoals de rest van de pijl. Het v-vormige middendeel van de png met de staart, dat dezelfde kleur heeft als de achtergrond van de pagina, 'hapt' hier 'n stuk uit.

De png is, behalve het middendeel, doorzichtig. Als ik de kleur van de pijl verander, kan ik nu volstaan met de achtergrondkleur van deze span mee veranderen, zonder dat de kleur van de png in de weg zit. Hierdoor is de kleur van de pijl heel makkelijk te veranderen.

Het no-repeat lijkt 'n beetje te helpen bij inzoomen (vergroten) bij de grotere pijlen. 'n Beetje...

Links neerzetten, zodat de png goed aansluit tegen de rest van de pijl. En verticaal halverwege, zodat de punt van de v in het midden zit.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Eventuele opmerkingen specifiek voor dit voorbeeld staan bij Opmerkingen.

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:

Getest in

Laatst gecontroleerd op 29 november 2011.

(Internet Explorer 6 is voor het laatst gecontroleerd op 16 december 2009. Op deze browser test ik niet meer. Maar omdat de code nauwelijks is veranderd, neem ik aan dat dit voorbeeld ook nog werkt in Internet Explorer 6. Voor dit oude lijk zul je dan echter wel de doorzichtige png's door doorzichtige gifs moeten vervangen.)

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.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, Jaws 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. Jaws 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 bij Opmerkingen.

Dit voorbeeld is niet getest op geschiktheid voor mobiele apparaten (hier worden geen laptop/notebook/netbook en dergelijke mee bedoeld, want die gedragen zich als een gewone desktopcomputer). Er wordt in veel voorbeelden css en/of html gebruikt, waar niet elk mobiel apparaat mee uit de voeten zal kunnen. En lang niet alles is geschikt voor schermen met een breedte van minder dan 800 px.

Dingen die problemen zouden kunnen opleveren, zijn onder andere een te grote breedte, het gebruik van (te veel) afbeeldingen en/of css en html die niet (volledig) wordt ondersteund, zoals :hover, float en position.

Onder Opmerkingen staat mogelijk nog wat meer over de geschiktheid van dit voorbeeld voor mobiele apparaten.

(Terzijde: de site zelf is zeker niet geschikt voor kleine mobieltjes. Dat gaat ook niet veranderen. Ik kan me namelijk niet voorstellen dat iemand zo masochistisch is 'n uitleg van tientallen schermen op 'n klein mobieltje te gaan lezen. Voor de site zelf is een minimale breedte van 800 px vereist.)

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.

13 december 2008:

Nieuw opgenomen.

27 maart 2009:

Tekst aangepast voor de nieuw verschenen Internet Explorer 8. De code hoefde niet veranderd te worden.

17 december 2010:

Bekende problemen

Alle browsers

Internet Explorer 7

Bij in- en uitzoomen, vergroten en verkleinen van de lettergrootte en veranderen van de grootte van het venster van de browser moet worden herladen, omdat de staart niet mee verandert. Pas bij herladen verandert die ook. Vermoedelijk heeft dat te maken met het gebruik van absolute, iets waar Internet Explorer 7 nogal moeite mee heeft bij verandering van lettergrootte en dergelijke. In Internet Explorer 8 werkt dit wel goed.

Internet Explorer 6

Bij de laatste controle heb ik de doorzichtige gif-afbeeldingen vervangen door png's, omdat die kleiner zijn. Het doorzichtige deel van een png wordt in Internet Explorer 6 zwart. Wat mij persoonlijk uitstekend lijkt, want hopelijk stoppen er dan weer wat bedrijven met het gebruiken van deze gevaarlijke, verouderde browser. Maar als je dit meurende lijk nog wel wilt ondersteunen, zul je dus gifs moeten gebruiken.