Wanneer worden woorden wel of niet afgebroken

Als je een website bezoekt met een smal scherm, zoals een smartphone, kan het gebeuren dat de tekst te breed is voor het scherm. Dit kan leiden tot een horizontale scrollbalk, waardoor de gebruiker moet scrollen om de rest van de tekst te lezen. Dit is niet alleen vervelend, maar ook niet toegankelijk voor mensen met een beperking. Volgens de Web Content Accessibility Guidelines (WCAG) moet een website toegankelijk zijn voor iedereen, ongeacht de apparatuur of software die ze gebruiken. Een horizontale scrollbalk is een obstakel voor mensen met een beperking, omdat het moeilijk is om te navigeren en de tekst te lezen.

Ook kunnen er gaten ontstaan, als teksten niet worden afgebroken. Dit maakt het moeilijk om te lezen en tevens ziet het er minder fraai uit. Bovendien kan het leiden tot een slechte gebruikerservaring en een lage toegankelijkheid.

Hoe regelen we woordafbrekingen?

Op onze websites kunnen we technisch op een paar manieren de woordafbrekingen regelen. Helaas gaat elke browser hier op zijn eigen manier mee om. Daarom hebben we de volgende aanpak:

• Google Chrome en Microsoft Edge
  Deze browsers hebben de beste ondersteuning voor woordafbrekingen. Hier worden woorden met minimaal 12 letters pas afgebroken. Ook bevat een lettergreep minimaal 5 karakters. Dit wordt sinds januari 2023 ondersteund in deze browsers.
• Apple Safari
  Deze browser heeft een beperktere ondersteuning voor woordafbrekingen. Hierin worden woorden met een lettergreep van minimaal 5 karakters afgebroken. Dit wordt wel al sinds maart 2020 ondersteund.
• Mozilla Firefox
  Deze browser heeft al lang ondersteuning voor woordafbrekingen, maar kan niet overweg met een minimale woordlengte. In de praktijk zien we dat woorden dan heel snel worden afgebroken en dat dit helaas niet leesbaar is. Daarom passen we deze logica niet toe in Mozilla Firefox.

Soms kan de taal van de browser en/of besturingssysteem ook nog invloed hebben op de woordafbrekingen. Heb je een besturingssysteem en browser zonder ondersteuning van de Nederlandse taal, dan kan het zijn dat woorden ook niet worden afgebroken.

Wanneer zijn we begonnen met woordafbrekingen?

Sinds plaece.creator versie 2.49 passen we woordafbrekingen al toe. In de laatste versie (2.78) hebben we de afbrekingen nog wat verder aangescherpt, zodat teksten niet te snel worden afgebroken.

nbsp; en woordafbrekingen

Wat, nbsp;? Dit is technische taal voor een "non breaking space". Eigenlijk een vaste spatie. Visueel ziet deze spatie er niet anders uit dan een normale spatie. Helaas zien wij in de praktijk vaak dat teksten deze 'niet afbreekbare spaties' bevatten in plaats van normale spaties. Dit is niet wenselijk en kan visueel niet mooi worden. Als je teksten met 'spaties' vanuit een extern programma plakt in de teksteditor in plaece.creator, dan blijven deze niet afbreekbare spaties bestaan. Dit kan mogelijk voorkomen als je tekst vanuit Microsoft Word, of rechtstreeks vanuit een webpagina plakt. Helaas zie je visueel niet of teksten deze 'niet afbreekbare spaties' bevatten.

Als je deze 'niet afbreekbare spatie' tussen twee woorden plaatst, koppel je deze twee woorden aan elkaar. Soms zien we helaas hele zinnen of zelfs paragrafen waar geen normale spaties zijn gebruikt en enkel deze 'niet afbreekbare spaties'. Daardoor ontstaat er voor de browser een lang niet bestaand woord. Een browser kan niet omgaan met deze lange woorden. We zien dat woorden óf buiten het gewenste tekstvlak lopen en je dus een niet gewenste horizontale scroll krijgt, óf de tekst word heel slecht afgebroken. Bijvoorbeeld een woord al na 1 letter, of je krijgt de laatste letter van een woord op de volgende regel. Mocht tekst op zo'n manier worden afgebroken is het noodzakelijk om eerst alle nsbp; karakters te verwijderen.

Er zijn drie opties om de ongewenste 'niet afbreekbare spaties' te verwijderen:

1. Als je tekst plakt in de teksteditor van plaece.creator, gebruik dan ctrl + shift + v. Dan worden de niet afbreekbare spaties verwijderd. Dit werkt (helaas) niet altijd 100% Het kan soms nog steeds voorkomen dat er nbsp; in blijven staan.
2. Je plakt de tekst eerst in een plain teksteditior zoals sublime of notepad (dus geen Microsft Word). Vervolgens kopieer je deze tekst en plak je deze in de teksteditor van plaece.creator.
3. Elke spatie handmatig overtypen met een normale spatie.

We kunnen dit helaas ook niet visueel zichtbaar maken in de teksteditor van plaece.creator. Om het toch een beetje zichtbaar te maken aan de voorkant van een website hebben we een handige bookmarklet. Deze kijkt enkel naar de paragrafen in de tekst, niet naar titels of opsommingen.

shy; en woordafbrekingen

Wat, shy;? Dit is technische taal voor een "soft hyphen" karakter. Met dit karakter geef je voor vooraf aan dat een woord afgebroken mag worden op een specifieke plek. Mocht het woord wel op de regel passen, dan wordt het niet afgebroken.

Dit is wel wat lastiger om te vullen maar je hebt wel de beste controle voor woordafbrekingen. Om dit te vullen in het CMS kun je in onderstaand voorbeeld het woord met het groene kader kopieeren. Dit kun je vervolgens plakken in het CMS.