De teksten die je op je website zet, worden niet automatisch afgebroken. Dus past een woord niet meer op een bepaalde regel, dan wordt het op de regel eronder neergezet. Meestal is dat niet zo’n probleem, behalve misschien als een woord erg lang is. Dan ontstaat er een groot wit gat. Dat kun je voorkomen door op de plaatsen waar een woord kan worden afgebroken een zogenaamd soft hyphen neer te zetten. Een soft hyphen is een ‘zacht’ afbreekstreepje en verschijnt alleen op het moment dat het nodig is. De code ervoor is:
­
Nu veel webpagina’s ook op smallere beeldschermen worden gelezen, komt het veel vaker voor dat woorden naar de volgende regel moeten worden verplaatst en zo een flinke witruimte veroorzaken. Maar al je teksten herlezen en voorzien van soft hyphens op de benodigde plaatsen is nogal een klus.
Een eenvoudiger methode is daarom in je stylesheet aan je paragrafen de css-eigenschap hyphens: auto; toe te voegen. Dit werkt in de meeste browsers. Sommige browsers hebben nog een extra instructie nodig, en de volledige code voor deze manier is dan ook:
p { hyphens: auto; }
De voorwaarde is natuurlijk wel dat je in je webpagina aangeeft in welke taal deze is geschreven, want in elke taal zijn de afbrekingsregels weer anders. Daarom moet je in de openings-tag van html altijd de landcode toevoegen:
<html lang="nl">
Test al je pagina’s wel als je op deze manier woorden laat afbreken (dus maak je pagina’s smaller en kijk wat er gebeurt), en zet in de woorden waar het fout gaat, handmatig een zacht afbrekingsstreepje neer met de code ­
Als je er zeker van wilt zijn dat je teksten in álle browsers worden afgebroken, dan kun je het beste een script gebruiken.
Ook bij deze mehtode moet je natuurlijk duidelijk maken in welke taal je pagina’s zijn geschreven. Woordafbreking in het Engels werkt bijvoorbeeld heel anders dan woordafbreking in het Nederlands! Aan de html-tag van je pagina moet daarom ook hier een taalcode zijn toegevoegd: <html lang="nl">
Is dat allemaal in orde, dan moet je daarna het onderdeel van je site waarin je teksten staan de class hyphenate geven. Dus wil je alle tekst binnen het article-element automatisch laten afbreken, dan wordt dat:
<article class="hyphenate">
Nu moet je het daadwerkelijke script gaan aanmaken. Dat doe je met behulp van de zogenaamde mergeAndPack-Tool. Je vinkt de optie Nederlands aan, en laat de andere vinkjes staan zoals ze automatisch worden ingesteld. Alleen bij de laatste optie (pack with jsmin Level) kies je voor de optie 1-minimal (dit om later wat gemakkelijker nog iets aan het script te kunnen toevoegen). Dan klik je op de button met de tekst Create!
In het vak onderaan verschijnt nu een groot blok tekst. Deze tekst kopieer je en je slaat het op onder de naam hyphenate.js. Je uploadt het naar je server, bijvoorbeeld naar een map die je ‘overig’ hebt genoemd, en waarin je nog meer scriptbestanden hebt opgeslagen.
Ten slotte is er nog één ding dat je moet doen, en dat is de volgende code in de head van al je pagina’s neerzetten (op de plaats van de sterretjes zet je natuurlijk de naam van je eigen website neer):
<script src="http://www.*****.nl/overig/hyphenate.js" type="text/javascript"></script>
Upload je dan al deze pagina’s weer naar je server en roep je ze opnieuw op in je browser (misschien moet je eerst even de cache van je browser leegmaken), dan zie je dat er automatisch afbreekstreepjes verschijnen!
Standaard gaat dit script pas woorden afbreken als ze uit meer dan 6 karakters bestaan. Vind je dat te veel, dan kun je dit aantal aanpassen voordat je het script creëert met behulp van de mergeAndPack-Tool. Daarvoor zet je in het eerste veld in het vak Configuration het aantal karakters neer dat als grens moet dienen. Wil je dat woorden groter of gelijk aan vier karakters moeten worden afgebroken, dan zet je hier een 4 neer.
Het script maakt soms ‘fouten’. Om dat te verhelpen, moet je exceptions aan het script toevoegen. Daarvoor zoek je helemaal onderaan het script de sluitaccolade op die vooraf wordt gegaan door _zwets5te_". Achter die sluitaccolade zet je een komma neer, en op de volgende regel zet je de woorden neer die je wilt aanpassen, achter het woord exceptions met een dubbele punt. Bijvoorbeeld:
exceptions : 'web-site, web-sites, site'
Wil je dat een woord op maar één manier mag worden afgebroken – bijvoorbeeld het woord webeditor mag alleen maar worden afgebroken tussen de b en de e – dan kun je er ook handmatig een soft hyphen tussen zetten: web­editor. Het script slaat dit woord dan verder over.
« Ga terug
