de drie a’s rechts bovenin zorgen ervoor dat alles voor iedereen leesbaar blijft. Ikzelf vind het fijn als ik de mogelijkheid heb om text te vergroten als ik lange lappen moet lezen. Je kunt dit in FireFox doen met ctrl +, maar een linkje is net zo makkelijk.

De code is vrij simpel, maar ik leg het toch even uit.

Note: Kies voor bron weergeven om te zien hoe het bij dit blog werkt

Eerst de css:
body { font-family: Arial, Verdana, sans-serif; font-size:62.5% /* Makes 1 em 10px and 1.4 em 14px and so on */ }

Je kunt zien dat ik de font-size op 62.5% zet. Dit doe ik omdat dan 1em precies 10px is. Op deze manier kun je de (betere) manier van font grootte aanwijzen, terwijl je toch precies weet hoeveel pixels het wordt.

De javascript code ziet er zo uit:

function changeFontSize(size) { body = document.getElementsByTagName("body")[0] body.style.fontSize = size + "%" }

De functie zoekt naar de body tag en geeft hem een andere waarde mee voor font-size (in dit geval de grootte die je in je html code meegeeft, hier kom ik zo op terug).

De html code om dit stukje javascript aan te roepen ziet er bij mij zo uit:
<div id="usability"> <a id="smallfont" href="#" onClick="changeFontSize(50)">A</a> <a id="mediumfont" href="#" onClick="changeFontSize(62.5)">A</a> <a id="largefont" href="#" onClick="changeFontSize(80)">A</a> </div>

Je kunt zien dat ik het aantal procent meegeef in de onClick. Op deze manier kun je zoveel links maken als je wilt met allemaal verschilende font groottes.

Om deze javascript aan te roepen moet je het in je html voegen, of je maakt er een link naar. Hieronder staan de twee mogelijkheden.

Link:

Plaats fontsize.js in de root map van je website en roep hem als volgt aan
<script type="text/javascript" src="/fontsize.js" /></script>

Of plaats alles direct in de head van je html file

<head> <script type="text/javascript"> function changeFontSize(size) { body = document.getElementsByTagName("body")[0] body.style.fontSize = size + "%" } </script> </head>

Hopelijk heb je er wat aan om zo je website of blog iets gebruiksvriendelijker te maken voor je bezoekers.

Note: Kies voor Opslaan als

Download de .js file hier