Mijn-eigen-website.nl

Automatisch woorden afbreken in html

Voorkom lelijke witruimtes op je pagina door het hyphenate-script automatisch woorden te laten afbreken.

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: ­.

Automatische woordafbreking met hyphenate.js

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 andere optie is in je stylesheet aan je koppen en paragrafen de css-eigenschap hyphens: auto; toe te voegen, maar het nadeel van deze methode is dat hij lang niet in alle browsers werkt. Daarom heb ik zelf op mijn website het hyphenate-script geïnstalleerd. Als je het beeldscherm waarop je dit leest even versmalt, zie je vanzelf op allerlei plaatsen woordafbrekingen verschijnen!

Om van het hyphenate-script gebruik te kunnen maken, wordt aangeraden je html-pagina's op te slaan in utf-8 (lees hier meer over de verschillende karaktersets waarin je je webpagina's kunt opslaan). Zijn je html-pagina's in een andere karakterset opgeslagen (bijvoorbeeld ISO-8859-1), dan kun je het hyphenate-script nog steeds gebruiken, maar voor een optimale werking wordt aanbevolen je pagina's in utf-8 op te slaan.

Verder moet je 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 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 een element met het id tekstvak automatisch laten afbreken, dan wordt dat: <div id="tekstvak" 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!

Aanpassingen

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid