Skip links en inhoudsopgave

Met behulp van shape-outside tekst uitlijnen naast een ronde of ster­vormige afbeel­ding - uitleg

Laatst aangepast: .

Vier voorbeelden van tekst die is uitgelijnd langs de buitenkant van een afbeelding

Korte omschrijving

Tekst met behulp van shape-outside de buitenkant van een afbeelding laten volgen, bijvoorbeeld van een cirkel, een ellips of een ster.

BELANGRIJK

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 ontbreekt bijvoorbeeld de navigatie voor de site. 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, kun je bovenaan de pagina de hele handel downloaden. In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

Als je deze handleiding graag uitprint (zonde van het bos), gebruik dan de pdf in de download. Deze pagina is niet geoptimaliseerd voor printen, de pdf kan wel makkelijk worden geprint.

Alles op deze site kan vrij worden gebruikt, met drie 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.

* Het kan zijn dat materiaal is gebruikt dat van anderen afkomstig is. Dat materiaal kan onder een bepaalde licentie vallen, waardoor het mogelijk niet onbeperkt gebruikt mag worden. Als dat zo is, wordt dat vermeld onder Inhoud van de download en licenties.

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

Alle code is geschreven in een afwijkende lettersoort en -kleur. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles vanwege de leesbaarheid in een gewone letter.)

Opmerkingen

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

Dit voorbeeld is gemaakt op een systeem met Linux (Kubuntu). Daarbij is vooral gebruik gemaakt van Visual Studio Code, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

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

Achterliggend idee

Eh, dat is er eigenlijk niet meer. Bij de vorige versie stond hier een fantastisch verhaal over de wonderen die hier werden verricht, maar die wonderen zijn grondig de wereld uit geholpen door de nieuwe css-eigenschap shape-outside.

Met behulp van de css-eigenschap shape-outside kan zonder enige moeite de buitenkant van een afbeelding worden gevolgd. Feitelijk niet alleen van een afbeelding, maar van wat dan ook. Meestal zal het echter om een afbeelding gaan.

Bij de afbeelding linksboven gaat het om een ellipsvormige afbeelding, waarbij de tekst de rechterbuitenkant ervan volgt.

Bij de afbeelding rechtsboven gaat het om een cirkelvormige afbeelding, waarbij de tekst de linkerbuitenkant ervan volgt.

Bij de afbeelding linksonder gaat het om een cirkelvormige afbeelding, waarvan de achtergrond doorzichtig is. De tekst wordt automatisch over het doorzichtige deel gezet en volgt daardoor de rechterbuitenkant van de afbeelding.

De afbeelding rechtsonder ten slotte is een ster, waarbij de linkerbuitenkant van de ster wordt gevolgd. Er worden coördinaten opgegeven, waartegen de tekst komt te staan.

Om een idee te geven van hoe de vorige versie was, staan hieronder de css en html die nodig waren voor alleen de afbeelding linksboven:

Dit hele oerwoud aan code is vervangen door het lieflijke siertuintje hieronder:

#links-boven {float: left; shape-outside: ellipse(188px 175px at 35% 60%); <img id="links-boven" src="043-pics/planeet.jpg" alt="planeet" width="286" height="349">

shape-outside werkt alleen bij gefloate elementen. Als een browser het niet ondersteunt, staat de tekst nog steeds netjes naast de afbeelding. Gezien de waanzinnige hoeveelheid extra css en html die nodig is om het in bijvoorbeeld Internet Explorer 11 werkend te krijgen, is dat niet gedaan. In browsers die shape-outside niet ondersteunen, zie je gewoon recht uitgelijnde tekst naast een vierkante afbeelding.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

De tekst in dit hoofdstukje is een algemene tekst, die voor elke pagina geldt. Eventueel specifiek voor dit voorbeeld geldende problemen en eventuele aanpassingen om die problemen te voorkomen staan bij Bekende problemen (en oplossingen).

Toegankelijkheid (in het Engels 'accessibility') is belangrijk voor bijvoorbeeld blinden die een schermlezer gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje dat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat 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 20 augustus 2020.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Alle eventuele problemen, ook die met betrekking tot zoomen, lettergroottes, toegankelijkheid, uit staan van JavaScript en/of css, enzovoort staan iets hieronder bij Bekende problemen (en oplossingen). Het is belangrijk dat deel te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Dit voorbeeld is getest op de volgende systemen:

Desktopcomputers

Windows 7 (1280 x 1024 px, resolution 96 ppi):
Firefox, Google Chrome, Internet Explorer 11 en Edge, in grotere en kleinere browservensters.

OS X 10.14.6 ('Mojave') (1680 x 1050 px, resolution: 96 ppi, device-pixel-ratio: 1):
Firefox, Safari, Google Chrome en Microsoft Edge, in grotere en kleinere browservensters.

Linux (Kubuntu 18.04 LTS, 'Bionic Beaver') (2560 x 1080 px, resolution: 96 ppi):
Firefox en Google Chrome, in grotere en kleinere browservensters.

Laptops

Windows 8.1 (1366 x 768 px, resolution: 135 ppi):
Bureaublad-versie: Firefox, Google Chrome, Internet Explorer 11 en Edge, in grotere en kleinere browservensters.
Startscherm-versie: Internet Explorer 11.

Windows 10 (1600 x 900 px, resolution: 106 ppi):
Firefox, Google Chrome, Internet Explorer 11 en Edge, in grotere en kleinere browservensters.

Tablets

iPad met iOS 12.4.8 (2048 x 1536 px, device-pixel-ratio: 2:
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

iPad met iPadOS 13.6 (2160 x 1620 px, 264 ppi):
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

Android 4.4.2 ('Kitkat') (1280 x 800 px, resolution: 149 ppi):
Firefox en Chrome (alle portret en landschap).

Android 4.4.2 ('Kitkat') (2560 x 1600 px, resolution: 299 ppi):
Firefox en Chrome (alle portret en landschap).

Android 6.0 ('Marshmallow') (1920 x 1200 px, resolution: 224 ppi):
Samsung Internet, Firefox en Chrome (alle portret en landschap).

Android 8.1.0 ('Oreo') (1920 x 1200 px, resolution: 218 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Android 10 (2000 x 1200 px, resolution: 225 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Smartphones

Windows 10 Mobile (1280 x 720 px, resolution: 315 ppi):
Edge.

iPhone met iOS 10.3.1 (1334 x 750 px, 326 ppi) (gesimuleerd in Xcode):
Safari (portret en landschap).

iPhone met iOS 12.4 (1334 x 750 px, 326 ppi) (gesimuleerd in Xcode):
Safari (portret en landschap).

iPhone met iOS 13.6 (1334 x 750 px, 326 ppi):
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

Android 7.0 ('Nougat') (1280 x 720 px, resolution: 294 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Android 9.0 ('Pie') (1920 x 1080 px, resolution: 424 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Er is op de aan het begin van dit hoofdstukje genoemde controledatum getest in de meest recente versie van de browser, die op het betreffende besturingssysteem kon draaien. Het aantal geteste browsers en systemen is al tamelijk fors, en als ook nog rekening gehouden moet worden met (zwaar) verouderde browsers, is het gewoon niet meer te doen. Surfen met een verouderde browser is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken.

In- en uitzoomen en – voor zover de browser dat kan – een kleinere en grotere letter zijn ook getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan 200%.

Er is getest met behulp van muis en toetsenbord, behalve op iOS, Android en Windows 10 Mobile, waar een touchscreen is gebruikt. Op Windows 8.1 en 10 is getest met touchscreen, touchpad, toetsenbord, muis, en – waar dat zinvol was – op een combinatie daarvan.

Als JavaScript is gebruikt, is op de desktop ook getest zonder JavaScript. Op iOS, Android en Windows 10 Mobile is niet getest zonder JavaScript, omdat je JavaScript in een toenemend aantal mobiele browsers niet uit kunt zetten. Bovendien is een mobiel apparaat zonder JavaScript niet veel meer dan een duur en groot uitgevallen horloge. Ook in Edge is niet getest zonder JavaScript, omdat Microsoft het onmogelijk heeft gemaakt dit uit te zetten. Ten slotte is getest zonder css en – als afbeeldingen worden gebruikt – zonder afbeeldingen.

Schermlezers en dergelijke

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA, TalkBack, VoiceOver, ChromeVox en Verteller.

Lynx is een browser die alleen tekst laat zien en geen css gebruikt. Er is getest op Linux.

WebbIE. is een browser die gericht is op mensen met een handicap. Er is getest op Windows7.

NVDA is een schermlezer, zoals die door blinden wordt gebruikt. Er is getest op Windows 7 en Windows 10 in combinatie met Firefox.

TalkBack is een in Android ingebouwde schermlezer. Er is getest in combinatie met Chrome op Android 4.4,2, 6.0, 7.0, 8.1.0, 9 en 10

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS 12.4.8, 13.6, iPadOS 13.6 en OS X 10.14.6.

ChromeVox is een schermlezer in de vorm van een extensie bij Google Chrome. Er is getest op een systeem met Kubuntu Linux 18.04.

Verteller (Narrator) is een in Windows 10 ingebouwde schermlezer. Er is getest in combinatie met Edge.

(Voor de bovenstaande programma's zijn links naar sites met uitleg en dergelijke te vinden op de pagina met links onder Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke.)

Als het voorbeeld in deze 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 problemen in schermlezers (en eventuele aanpassingen om die te voorkomen) staan iets hieronder bij Bekende problemen (en oplossingen).

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld 'n Blackberry. Er is een kans dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je soms (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Samsung Internet op Android werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar geen beginnen aan.

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

Nieuwe browsers worden pas getest, als ze uit het bèta-stadium zijn. Anders is er 'n redelijke kans dat je tegen 'n bug zit te vechten, 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 kunnen niet worden beantwoord, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enzovoort in wel geteste browsers: graag! Dat kan op het forum.)

Bekende problemen (en oplossingen)

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Als je hieronder geen oplossing vindt voor een probleem dat met dit voorbeeld te maken heeft, kun je op het forum proberen een oplossing te vinden voor je probleem. Om forumspam te voorkomen, moet je je helaas wel registreren, voordat je op het forum een probleem kunt aankaarten.

Bij toegankelijkheid is er vaak geen goed onderscheid te maken tussen oplossing en probleem. Zonder (heel simpele) aanpassingen heb je vaak 'n probleem, en omgekeerd. Daarom staan wat betreft toegankelijkheid aanpassingen en problemen hier bij elkaar in dit hoofdstukje.

Voor zover van toepassing wordt eerst het ontbreken van JavaScript, css en/of afbeeldingen besproken. Vervolgens problemen en aanpassingen met betrekking tot toegankelijkheid voor specifieke groepen bezoekers, zoals zoomen en andere lettergrootte, Tab-toets, tekstbrowsers en schermlezers. Als laatste volgen algemene problemen in alle of in specifieke browsers.

Als in een onderdeel geen problemen aanwezig zijn, staat in een smal groen kadertje 'Geen problemen'. Bij een onderwerp over toegankelijkheid zijn er soms geen problemen, maar alleen aanpassingen. Ook in dat geval staat bovenaan in een smal groen kadertje 'Geen problemen'. Daaronder staan dan de aanpassingen.

Als in een onderdeel één of meer problemen worden besproken, staat van elk probleem in een breed rood kadertje een korte samenvatting daarvan.

Als bij het probleem een oplossing wordt gegeven, staat de samenvatting in een rode stippellijn.

Als bij het probleem geen oplossing is gevonden, staat de samenvatting in een rode ononderbroken lijn.

Zonder JavaScript

Geen problemen.

Omdat JavaScript niet wordt gebruikt, heeft het aan- of uitstaan van JavaScript geen enkele invloed.

Zonder css

Geen problemen.

De afbeeldingen en de tekst zijn gewoon te zien. De lay-out is uiteraard volledig verpest.

Zonder afbeeldingen

Probleem: op iOS, iPadOS en in Safari op OS X verdwijnt de alt-tekst bij de twee afbeeldingen rechts op de pagina onder de tekst.

Als de afbeeldingen om wat voor reden dan ook niet worden getoond, hoort de alt-tekst bij de afbeelding te verschijnen. Dat gebeurt ook netjes in alle geteste browsers.

Standaard staat alt-tekst links uitgelijnd, net zoals gewone tekst. Bij de afbeeldingen links op de pagina levert dat geen problemen op.

Bij de afbeelding linksboven staat de tekst aan de rechterkant over de afbeelding heen. Omdat de alt-tekst links staat, is die gewoon te zien.

Bij de afbeelding linksonder speelt het al helemaal niet, want als de afbeelding niet wordt geladen, staat de tekst gewoon volledig naast de afbeelding.

Bij de twee afbeeldingen rechts op de pagina is het anders. Als de afbeeldingen niet worden geladen, volgt de tekst nog steeds de buitenkant van de afbeelding. Daardoor staat deze gedeeltelijk over de linkerkant van de afbeelding. Precies waar ook de alt-tekst staat. Om dit op te lossen wordt de alt-tekst bij de rechterafbeeldingen met text-align: right; rechts uitgelijnd.

Alt-tekst verdwijnt onder gewone tekst

Op iOS, iPadOS en in Safari op OS X heeft dit geen effect. Hierdoor verdwijnt daar de alt-tekst onder de gewone tekst. Omdat op iOS en iPadOS andere browsers verplicht de superieure ahum weergave-machine van Safari moeten gebruiken, werkt text-align op iOS en iPadOS in geen enkele browser.

Op de afbeelding is te zien dat de alt-tekst verdwijnt onder de gewone tekst. (Om dat beter zichtbaar te maken, is de alt-tekst vergroot en rood gekleurd.)

(Ook in Internet Explorer heeft text-align geen effect op alt-tekst. Maar omdat daarin shape-outside ook niet werkt, speelt het probleem daarin niet.)

Zonder css én zonder afbeeldingen

Geen problemen.

De gewone tekst en de alt-tekst wordt getoond met op de plaats van de afbeeldingen vier lege ruimtes.

Gebruikers Tab-toets

Geen problemen.

shape-outside heeft geen enkele invloed op het gebruik van de Tab-toets.

Tekstbrowsers

Geen problemen.

Alle gewone tekst en de alt-tekst wordt getoond.

Schermlezers

Geen problemen.

Tekst en alt-tekst worden op de gewone manier voorgelezen.

Zoomen en lettergroottes

Geen problemen.

Bij zoomen of een andere lettergrootte wordt de buitenkant van de tekst door de browser automatisch aangepast aan de nieuwe grootte van tekst en/of afbeelding.

(Uiteraard oogt het niet heel mooi als je de letters drie keer zo groot maakt en de afbeelding niet.)

Internet Explorer (alle besturingssystemen)

Probleem: Internet Explorer ondersteunt shape-outside niet.

In deze browser zie je gewoon tekst rondom vier gefloate afbeeldingen. Er verdwijnt dus niets: alle afbeeldingen en tekst zijn nog gewoon te zien.

Om dit werkend te maken in Internet Explorer (en andere browsers die shape-outside niet ondersteunen) is een waanzinnige hoeveelheid extra css en html nodig. (Dit is te zien bij Om een idee te geven... En voor vier afbeeldingen zou dat dus vier keer zoveel zijn.) Omdat afbeeldingen en tekst gewoon te zien zijn, en omdat dit probleem in rap tempo minder wordt, is voor Internet Explorer gewoon niets aangepast. In de vurige hoop dat het kreng binnenkort echt volledig is uitgestorven.

(Er bestaan enkele zogenaamde 'polyfills' voor shape-outside. Een polyfill is een stukje JavaScript, waarmee je bepaalde css werkend kunt krijgen in browsers die bepaalde css niet ondersteunen. Dat zou een oplossing zijn. Maar zoals wel vaker het geval is bij polyfills, bleek geen van die polyfills goed te werken.)

Validator

Probleem: shape-outside valideert (nog) niet.

shape-outside levert bij het valideren in de css-validator een foutmelding op, omdat de css-module met shape-outside nog geen officiële standaard is. Omdat de reden van deze fout bekend is en shape-outside gewoon werkt, kan deze foutmelding genegeerd worden.

Wijzigingen

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

Nieuw opgenomen:

:

10 april 2009:

Tekst aangepast aan de nieuw verschenen Internet Explorer 8. De code is niet veranderd.

1 december 2010

Bij body stond al color: white; background: black;. Deze css is tot essentieel gepromoveerd, omdat je zonder die kleuren helemaal geen ronding ziet.

20 augustus 2020:

Inhoud van de download en licenties

De inhoud van deze download kan vrij worden gebruikt, met drie beperkingen:

* Sommige onderdelen die van 'n andere site of zo afkomstig zijn, vallen mogelijk onder een of andere licentie. Dat is hieronder bij het betreffende onderdeel te vinden.

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

* Dit voorbeeld (en de bijbehorende uitleg en dergelijke) wordt regelmatig bijgewerkt. Het is daarom niet toegestaan dit voorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn 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.

tekst-043-dl.html: de pagina met het voorbeeld.

tekst-043.pdf: deze uitleg (aangepast aan de inhoud van de download).

tekst-043-inhoud-download-en-licenties.txt: een kopie van de tekst onder dit kopje (Inhoud van de download en licenties).

043-css-dl:

tekst-043-dl.css: stylesheet voor tekst-043.html.

043-pics:

cirkel.jpg en cirkel.png: twee eigengemaakte kunstwerken.

planeet.jpg: afkomstig van de niet meer bestaande site gimp.savvy.com.

ster.png: publiek domein, afkomstig van www.clker.com.

HTML

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

In de html hieronder wordt alleen de html besproken, waarover iets meer is te vertellen. Een <h1> bijvoorbeeld wordt in de regel niet genoemd, omdat daarover weinig interessants valt te melden. (Als bijvoorbeeld het uiterlijk van de <h1> wordt aangepast met behulp van css, staat dat verderop bij de bespreking van de css.)

Zaken als een doctype en charset hebben soms wat voor veel mensen onbekende effecten, dus daarover wordt hieronder wel een en ander geschreven.

<!doctype html>

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.

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

Het hier gebruikte doctype is dat van html5. Dit kan zonder enig probleem worden gebruikt: het werkt zelfs in Internet Explorer 6.

<html lang="nl">

De toevoeging lang="nl" bij <html> geeft aan dat de pagina in het Nederlands is. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke.

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.

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.

In html5 hoeft deze regel niet langer te zijn, dan wat hier staat.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobiele apparaten variëren enorm in grootte. En dat is een probleem. Sites waren, in ieder geval tot enkele jaren geleden, gemaakt voor desktopbrowsers. En die hebben, in vergelijking met bijvoorbeeld een smartphone, heel brede browservensters. Hoe moet je op 'n smartphone een pagina weergeven, die is gemaakt voor de breedte van een desktop? Je kunt natuurlijk wachten tot álle sites zijn omgebouwd voor smartphones, tablets, enzovoort, maar dan moet je waarschijnlijk heel erg lang wachten.

Mobiele browsers gokken erop dat een pagina een bepaalde breedte heeft. Safari voor mobiel bijvoorbeeld gaat ervan uit dat een pagina 980 px breed is. De pagina wordt vervolgens zoveel versmald dat hij binnen het venster van het apparaat past. Op een iPhone wordt de pagina dus veel smaller dan op een iPad. Vervolgens kan de gebruiker inzoomen op het deel van de pagina dat hij of zij wil zien.

Dit betekent ook dat bij het openen van de pagina de tekst meestal heel erg klein wordt weergegeven. (Meestal, want niet alle browsers en apparaten doen het op dezelfde manier.) Niet erg fraai, maar bedenk maar 'ns 'n betere oplossing voor bestaande sites.

Nieuwe sites of pagina's kunnen echter wel rekening houden met de veel kleinere vensters van mobiele apparaten. In dit voorbeeld bijvoorbeeld wordt het verloop van de tekst aangepast aan de breedte van het venster.

Maar die stomme mobiele browser weet dat niet, dus die gaat ervan uit dat ook deze pagina 980 px breed is, en verkleint die dan. Dat is ongeveer even behulpzaam als de gedienstige kelner die behulpzaam de stoel naar achteren trekt, net als jij wilt gaan zitten.

Om de door de browser aangeboden hulp vriendelijk maar beslist te weigeren, wordt deze tag gebruikt. Hiermee geef je aan dat de pagina is geoptimaliseerd voor mobiele apparaten.

Een iPad in portretstand bijvoorbeeld is 768 px breed. De kreet width=device-width zegt tegen de mobiele browser dat de breedte van de weer te geven pagina gelijk is aan de breedte van het apparaat. Voor een iPad in portretstand dus 768 px.

Er staat nog een tweede deel in de tag: initial-scale=1. Sommige mobiele apparaten zoomen een pagina gelijk in of uit. Ook weer in een poging behulpzaam te zijn. Ook dat is hier niet nodig. Er is ook een instructie om zoomen helemaal onmogelijk te maken, maar die wordt niet gebruikt. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.

<p lang="la">

Als opvultekst is Latijnse tekst gebruikt. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke. Daarom wordt met lang="la" aangegeven dat de tekst binnen deze <p> Latijn is. (En tot mijn niet geringe verbazing blijkt een schermlezer als NVDA dat dan, voor zover ik dat kan beoordelen, op de juiste manier voor te lezen.)

CSS

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code) is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

Technisch gezien is er geen enkel bezwaar om de css in de stylesheet allemaal achter elkaar op één regel te zetten:

div#header-buiten {position: absolute; right: 16px; width: 100%; height: 120px; background: yellow;} div p {margin-left 16px; height: 120px; text-align: center;}

Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Beter is het om de css netjes in te laten springen:

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

        div p {
            margin-left: 16px;
            height: 120px;
            text-align: center;
        }

Hiernaast is het heel belangrijk voldoende commentaar (uitleg) in de stylesheet te schrijven. Op dit moment weet je waarschijnlijk (hopelijk...), waarom je iets doet. Maar over vijf jaar kan dat volstrekt onduidelijk zijn. Op deze site vind je nauwelijks commentaar in de stylesheets, maar dat heeft een simpele reden: deze uitleg is in feite één groot commentaar.

Op internet zelf is het goed, als de stylesheet juist zo klein mogelijk is. Dus voor het uploaden kun je normaal genomen het beste het commentaar weer verwijderen. Veel mensen halen zelfs alles wat overbodig is weg, voordat ze de stylesheet uploaden. Inspringingen bijvoorbeeld zijn voor mensen handig, een computer heeft ze niet nodig.

Je hebt dan eigenlijk twee stylesheets. De uitgebreide versie waarin je dingen uitprobeert, verandert, enzovoort, met commentaar, inspringingen, en dergelijke. Dat is de mensvriendelijke versie. Daarnaast is er dan een stylesheet die je op de echte site gebruikt: een gecomprimeerde versie.

Dat comprimeren kun je met de hand doen, maar er bestaan ook hulpmiddelen voor. Op de pagina met links kun je onder het kopje Gereedschap → Snelheid, testen, gzip, comprimeren (inclusief theorie) links naar sites vinden, waar je bestanden kunt comprimeren.

(Stylesheets op deze site zijn niet gecomprimeerd. Omdat het vaak juist om de css gaat, kunnen mensen dan zonder al te veel moeite de css bekijken.)

/* tekst-043-dl.css */

Om vergissingen te voorkomen is het een goede gewoonte bovenaan het stijlbestand even de naam neer te zetten. Voor je het weet, zit je anders in het verkeerde bestand te werken.

body

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

background: black;

Zwarte achtergrondkleur.

(Zonder achtergrondkleur en de gelijk hieronder opgegeven voorgrondkleur zie je geen of maar een klein stukje van de ronding. Vandaar dat dit tot essentiële css is gepromoveerd.)

color: white;

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

(Zonder voorgrondkleur en de gelijk hierboven opgegeven achtergrondkleur zie je geen of maar een klein stukje van de ronding. Vandaar dat dit tot essentiële css is gepromoveerd.)

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

Als Arial is geïnstalleerd op de machine van de bezoeker, wordt deze gebruikt, anders Helvetica. Als die ook niet wordt gevonden, wordt in ieder geval een schreefloze letter (zonder dwarsstreepjes) gebruikt.

margin: 0;

Slim om te doen vanwege verschillen tussen browsers.

main

Alle <main>'s. Dat is er maar één. De belangrijkste inhoud van de pagina staat erin. In dit voorbeeld is dat de hele pagina.

display: block;

Oudere browsers kennen <main> niet. Een onbekend element is standaard een inline-element, waardoor eigenschappen als breedte niet kunnen worden gebruikt. Nu weten alle browsers dat dit een blok-element is.

max-width: 1200px;

Maximumbreedte.

De afbeeldingen staan helemaal link en rechts. Bij het testen op brede schermen leidde het bekijken van de afbeeldingen tot een acute nekhernia van de derde categorie. Daarom wordt de breedte enigszins beperkt.

margin: 0 auto;

Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven – rechts – onder – links. Boven en onder geen marge, links en rechts auto, wat hier hetzelfde betekent als evenveel.

Hierdoor staat <main> altijd horizontaal gecentreerd binnen z'n ouder <body>. Omdat <body> een blok-element is, wordt dit normaal genomen automatisch even breed als z'n ouder <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen automatisch even breed als het venster van de browser.

Uiteindelijk staat <main> – en daarmee alles erin – hierdoor altijd horizontaal gecentreerd binnen het venster van de browser, ongeacht de breedte van het venster.

padding: 0 10px;

Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 10px 0 10px in de volgorde boven – rechts – onder – links.

Boven en onder geen padding, links en rechts 10 px padding. Hierdoor is er altijd wat ruimte tussen de zijkanten van het venster van de browser en de inhoud van <main>.

#rechts-boven

Het element met id="rechts-boven". De roze cirkel rechtsboven.

float: right;

Zo hoog mogelijk en zover mogelijk naar rechts neerzetten.

Andere elementen, zoals de <p>'s met tekst, worden nu naast de <img> gezet. Tot zover niets bijzonders, dit kan al decennia. Pas door het gebruik van shape-outside iets hieronder gaat de tekst de ronding van de afbeelding volgen.

text-align: right;

Tekst rechts uitlijnen. Omdat dit een <img> is, gaat het om de alt-tekst bij de afbeelding.

Als de afbeelding niet wordt getoond, wordt de alt-tekst weergegeven. Deze staat standaard helemaal links. Maar daar staat nu gewone tekst, want die staat gedeeltelijk over de afbeelding heen. Door de alt-tekst rechts neer te zetten, voorkom je dat deze verdwijnt onder de gewone tekst.

Op iOS, iPadOS en in Safari op OS X werkt uitlijnen van alt-tekst niet. Meer daarover is te vinden bij Bekende problemen (en oplossingen) onder het kopje Zonder afbeeldingen.

margin: 100px 0 0 10px;

Met 100 px marge aan de bovenkant de afbeelding iets naar omlaag verplaatsen, zodat de ronding van de tekst beter is te zien.

Rechts en onder geen marge.

Links een marge van 10 px. Hierdoor komt de tekst iets minder dicht op de afbeelding te staan.

shape-outside: circle(155px at 155px 250px);

De afbeelding rechtsboven is een roze cirkel op een zwarte achtergrond. Daarom wordt bij shape-outside gekozen voor circle().

circle(): de waarden binnen circle() definiëren het verloop van de tekst.

155px: dit is de straal (de halve doorsnede) van de cirkel. De cirkel heeft dus een doorsnede van 310 px.

at: hierachter volgen de waarden die het middelpunt van de cirkel opgeven.

155px: 155 px vanaf de linkerkant van de afbeelding.

250px: 250 px vanaf de bovenkant van de afbeelding.

Afbeelding rechtsboven met shape-editor zichtbaar

Op de afbeelding staat de cirkel die rechtsboven op de pagina staat. De rode stippellijn is een outline, die de buitenkant van de afbeelding laat zien.

In het ontwikkelgereedschap van Firefox zit een uiterst handige shape-editor. De dunne blauwe lijn rondom de cirkel is een onderdeel van deze editor, het is de omtrek van de cirkel.

De twee ronde witte stippen zijn ook onderdeel van de editor. Door deze te verslepen, verandert de cirkel van plaats en grootte. De waarden bij circle() worden ook aangepast. De in dit voorbeeld gebruikte waarden zijn gevonden met behulp van deze editor.

De afbeelding is vierkant (de rode stippellijn), de tekst volgt de cirkelvormige blauwe lijn. Omdat de afbeelding iets hierboven naar rechts is gefloat, komt de tekst links ervan te staan.

De afbeelding is 300 px breed en hoog. De cirkel heeft een doorsnede van 310 px, iets groter. Met die grootte blijkt de tekst het best op de afbeelding aan te sluiten.

Omdat de cirkel een doorsnede van 310 px heeft, is het middelpunt 155 px vanaf de boven- en linkerkant.

De cirkel wordt inderdaad 155 px vanaf links neergezet, maar 250 px vanaf de bovenkant. Omdat de <img> met margin-top: 100px; 100 px naar beneden is verplaatst, moet je die 100 px bij de 155 px optellen. Dan kom je op 255 px uit. Maar 250 px blijkt net iets beter aan te sluiten.

(Met behulp van shape-outside kan tekst links óf rechts van een gefloat element worden neergezet. Het is dus niet mogelijk om een afbeelding of zoiets in het midden van een stuk tekst neer te zetten. In de toekomst wordt dit wel mogelijk met behulp van 'exclusions', een css-module waaraan nog wordt gewerkt.)

#rechts-onder

Het element met id="rechts-onder". De gele ster rechtsonder.

float: right;

Zo hoog mogelijk en zover mogelijk naar rechts neerzetten.

Andere elementen, zoals de <p>'s met tekst, worden nu naast de <img> gezet. Tot zover niets bijzonders, dit kan al decennia. Pas door het gebruik van shape-outside iets hieronder gaat de tekst de ronding van de afbeelding volgen.

text-align: right;

Tekst rechts uitlijnen. Omdat dit een <img> is, gaat het om de alt-tekst bij de afbeelding.

Als de afbeelding niet wordt getoond, wordt de alt-tekst weergegeven. Deze staat standaard helemaal links. Maar daar staat nu gewone tekst, want die staat gedeeltelijk over de afbeelding heen. Door de alt-tekst rechts neer te zetten, voorkom je dat deze verdwijnt onder de gewone tekst.

Op iOS, iPadOS en in Safari op OS X werkt uitlijnen van alt-tekst niet. Meer daarover is te vinden bij Bekende problemen (en oplossingen) onder het kopje Zonder afbeeldingen.

margin: 100px 0 0 3px;

Met 100 px marge aan de bovenkant de afbeelding iets naar omlaag verplaatsen, zodat de uitlijning van de tekst beter is te zien.

Rechts en onder geen marge.

Links een marge van 3 px. Zonder deze marge komen sommige regels pal tegen de afbeelding aan te staan.

shape-outside: polygon(143px 95px, 38.23% 42.88%, 12.23% 35.4%, 24.5% 55.07%, 0.21% 62.98%, 24.25% 71.45%, 14.47% 89.28%, 39.64% 83.11%, 50.87% 101.14%, 145px 246px);

De afbeelding rechtsonder is een gele ster op een zwarte achtergrond. Omdat deze afbeelding onregelmatig is, wordt bij shape-outside gekozen voor polygon(). Daarmee kun je zelf de punten voor de uitlijning opgeven.

Deze punten staan paarsgewijs binnen polygon(), gescheiden door een komma. De eerste waarde geeft steeds de afstand vanaf de linkerkant van de afbeelding weer, de tweede waarde de afstand vanaf de bovenkant van de afbeelding.

Afbeelding rechtsonder met shape-editor zichtbaar

Op de afbeelding staat de ster die rechtsonder op de pagina staat. De rode stippellijn is een outline, die de buitenkant van de afbeelding laat zien.

In het ontwikkelgereedschap van Firefox zit een uiterst handige shape-editor. Elke witte stip op de afbeelding hoort bij een van de paren waarden binnen polygon(). De in dit voorbeeld gebruikte waarden zijn gevonden met behulp van deze editor.

De afbeelding is vierkant (de rode stippellijn), de tekst volgt de denkbeeldige lijn tussen de witte stippen. Omdat de afbeelding iets hierboven naar rechts is gefloat, komt de tekst links ervan te staan.

Het eerste paar is 143px 95px. Dit is de bovenste witte stip: 143 px vanaf de linkerkant van de afbeelding, 95 px vanaf de bovenkant. Hoewel, vanaf links klopt dat, maar vanaf de bovenkant niet: de witte stip zou 95 px vanaf de bovenkant van de afbeelding (de rode stippellijn) moeten staan, maar staat zelfs iets boven de afbeelding. De afbeelding is echter iets hierboven met margin: 100px 0 0 3px; 100 px naar beneden verplaatst, en die 100 px moet je bij de afstand vanaf de bovenkant optellen. De bovenste witte stop staat dan slechts 5 px boven de afbeelding.

Met behulp van de shape-editor in Firefox zijn alle andere waarden ook gevonden. Als je 'n punt versleept, worden de waarden automatisch ook aangepast. (Waarom de shape-editor de ene keer kiest voor eenheden in pixels en de andere keer voor eenheden in procenten, behoort tot de Grote Onopgeloste Raadselen der Kosmos.)

(Met behulp van shape-outside kan tekst links óf rechts van een gefloat element worden neergezet. Het is dus niet mogelijk om een afbeelding of zoiets in het midden van een stuk tekst neer te zetten. In de toekomst wordt dit wel mogelijk met behulp van 'exclusions', een css-module waaraan nog wordt gewerkt.)

p

Alle <p>'s.

text-align: justify;

Standaard wordt tekst links uitgelijnd. Het links én rechts uitlijnen met text-align: justify; is meestal geen goed idee, omdat dat meestal gewoon foeilelijk is. In dit voorbeeld staan (veel te) lange zinnen, daardoor valt dat hier nogal mee. (Omdat ze zo lang zijn, zijn ze lastig te lezen. Bovendien zijn ook nog 'ns alle marges en alinea's weggelaten, dus 'in het echt' moet je tekst nooit zo weergeven.)

Rechterkant van uitgelijnde tekst met en zonder text-align:justify

Als je echter shape-outside gebruikt in combinatie met float: right; en de tekst daardoor links van de afbeelding komt te staan, ontkom je er vaak niet aan.

Op de linkerafbeelding is de tekst niet rechts uitgelijnd, op de rechterafbeelding wel. Rechts volgt de tekst veel beter de ronding van de cirkel dan links.

margin: 0;

Standaard heeft een <p> een marge aan boven- en onderkant. Die wordt hier weggehaald.