Registreren

[Mauz]

Inleiding
Het zal voor de meesten onder ons een bekend verschijnsel zijn. Het komt praktisch overal voor. Iemand typt een super lang woord en meteen wordt je layout uit het fatsoen getrokken. In dit artikel bespreken we een zelf gemaakte PHP functie die dit voorkomt.


Hyphen en soft-hyphen
Alvorens we de functie maken gaan we eerst wat algemene informatie over dit onderwerp verschaffen. In de wereld van afbreekstreepjes kennen we twee soorten, te weten de hyphen en de soft-hyphen. De hyphen is simpelweg het zichtbare afbreekstreepje: "-". De soft-hyphen verschilt niet veel van hyphen. Het enige verschil is dat de soft-hyphen standaard een breedte heeft van nul pixels en dus niet te zien is. Maar wanneer je de soft-hyphen in een lang woord zet die afgebroken moet worden, dan wordt hij zichtbaar en ziet hij er net zo uit als de hyphen.

Ter verduidelijking een stukje code:

HTML

Code: Alles selecteren

<p>Dit is een paragraaf meteenheel&shy;langwoorderin.</p>

Je ziet dat er in het 'lange' woord een ­ zit, dat is de soft-hyphen (ook wel 'verlegen afbreekstreepje'). Wanneer de tekst in het vak past zal de output als volgt zijn:

Dit is een paragraaf meteenheellangwoorderin.

Maar wanneer het niet past zal het afgebroken worden en zal de soft-hyphen zichtbaar worden.

Dit is een paragraaf meteenheel-
langwoorderin.

Nu is er alleen één probleem bij het gebruik van de soft-hyphen. Deze wordt namelijk niet in alle browsers ondersteund. Bijvoorbeeld Internet Explorer rendeert ­ pas vanaf versie 5. Aangezien de meeste mensen uptodate zijn is dat geen probleem.

Echter is IE<5 niet de enige. Firefox doet helemaal niks met de soft-hyphen, zie Bug #9101 en Bug #31304.

Dit is erg jammer, omdat we onze functie hier op moeten aanpassen, zodat het crossbrowser werkt.


PHP's wordwrap
De wrap-functie die we gaan maken lijkt onzinnig. PHP heeft tenslotte deze functie er ook al in zitten, namelijk de wordwrap().

Deze functie kent vier parameters. Enkel de eerste is verplicht, de andere drie zijn optioneel.

1. string: de string die gewrapt moet worden.
2. width: hiermee geef je aan om de hoeveel tekens een woord gewrapt moet worden. Als je deze leeg laat zal 75 gebruikt worden.
3. break: het teken waarmee je wrapt. Standaard is dit "\n".
4. cut: hiermee geeft je aan of PHP woorden in stukken mag hakken. In dat geval dien je een 1 te geven. Standaard staat dit uit.

Twee voorbeelden om alles te verduidelijken:

PHP

Code: Alles selecteren

<?php
echo wordwrap( "Dit voorbeeld moet het gebruik van de functie wordwrap demonstreren.", 5 );
?>

Zal geven:

Dit voorbeeld
moet het
gebruik
van de
functie
wordwrap
demonstreren.

En:

PHP

Code: Alles selecteren

<?php
echo wordwrap( "Nu geven wij ook een teken en de cut parameter mee.", 5, "\n", 1 );
?>

Geeft:

Nu ge
ven w
ij oo
k een
teken
en de
cut p
ararm
er me
e.

Ik zal uitleggen waarom deze functie niet optimaal werkt. Wanneer je in HTML een stuk tekst, zonder opmaak, typt worden regels netjes afgebroken. Wanneer je over deze tekst de wordwrap van PHP gooit zal de zin worden afgebroken na het opgegeven aantal tekens. Maar dat is niet wat we willen. We willen dat de tekst gewoon wordt weergeven. Pas wanneer een woord te lang is moet deze worden voorzien van een soft-hyphen. Dan wordt het woord pas afgebroken als hij de layout dreigt te verknoeien.


MCwrap
Onze functie is dus een verbeterde versie van de wordwrap van PHP. Wat onze functie doet is niet naar het aantal tekens in een zin kijken, maar naar de losse woorden. Wanneer dus een los woord te lang is, zal deze worden voorzien van een soft-hyphen.

In de functie hebben we een browsercheck ingevoerd. Wanneer de website met Firefox wordt bekeken zal de hyphen gebruikt worden. Bij alle andere browsers wordt de soft-hyphen gebruikt.

De commentaren in de functie geven aan wat er gebeurt met de input.

PHP

Code: Alles selecteren

<?php
function MCwrap( $tekst, $len = 75 )
{
   // Breek de tekst in woorden. Breek op whitespace of een hyphen.
   $woorden = preg_split( "/[\s\-]+/", $tekst );
 
   $vervang = array();
 
   // Ga elk woord langs.
   foreach( $woorden as $woord )
   {
      // Controleer de lengte van het woord.
      if( strlen( $woord ) > $len )
      {
         // Afbreekteken bepalen aan de hand van de browser
         $teken = eregi( "Firefox", $_SERVER['HTTP_USER_AGENT'] ) ? "- " : "&shy;";
         $vervang[ $woord ] = wordwrap( $woord, $len, $teken, 1 );
      }
   }
   // Return de tekst met de te lange woorden vervangen.
   return strtr( $tekst, $vervang );
}
?>

Een demostratie:

PHP

Code: Alles selecteren

<?php
$str = "Deze zin bevat een aantal woorden die langer zijn dan zes tekens.";
 
echo MCwrap( $str, 6 );
?>

Dit geeft in Firefox:

Deze zin bevat een aantal-woorde-n die langer zijnda-nzeste-kens.

En in de andere browsers:

Deze zin bevat een aantal&shy;­woorde&shy;­n die langer zijnda­&shy;nzeste&shy;­kens.

Wanneer je het scherm van je browser dan kleiner maakt zal de output bijvoorbeeld zo worden:

Deze zin
bevat een
aantal­
woorden
die langer
zijnda-
nzestekens.

Nu hebben we bewust bij deze voorbeelden een lage lengte aan gehouden om de functie te demonstreren. In de realiteit zet je dit aantal veel hoger zodat (vooral in Firefox) de (soft-)hyphen niet direct verschijnt in elk woord wat een beetje lang is.

De functie staat, zonder tweede parameter op 75, net als de wordwrap van PHP.