Ändra teckenstorlek med javascript

Just nu jobbar jag på ett uppdrag där kunden vill att besökare själva skall kunna ändra teckenstorleken på deras webbplats.

Jag hade sett den här typen av funktioner på andra sidor och trodde därför att det skulle vara enkelt att söka sig fram till en färdig lösning på Google som gick att använda.

De flesta funktioner som jag hittade byggde på att man med hjälp av javascript läste in alla element som hade en viss tagg och sedan ökade på eller minskade teckenstorleken för varje element som hittades.

Exempel:

var els = document.getElementsByTagName("P");
var numexp = /[^0-9]+/;
for(i=0;i<els.length;i++){
   els[i].style.fontSize = (els[i].style.fontSize.replace(numexp,"") + 1)+"px";
}

Visst, detta är väl ett sätt att göra det på, men jag jobbar aldrig med teckenstorlek i pixlar utan endast med relativ textstorlek, vanligtvis med hjälp av em.

Dessutom tyckte jag att det såg bökigt ut att behöva tillämpa en ny textstorlek på varje element på hemsidan som innehåller text.

När jag kodar en hemsida så sätter jag vanligtvis en "default"-teckenstorlek via CSS, oftast i HTML-taggen eller BODY-taggen i stilmallen.

För att teckenstorleken skall vara så lik som möjligt i alla webbläsare så har jag kommit fram till att denna lösning fungerar bäst:

html {
font-size:68.75%;
}
body {
font-size:1em;
font-family:Verdana,Tahoma,sans-serif;
color:#303030;
}

Genom att sätta en teckenstorlek i procentform för HTML-taggen och i ett relativt format i body-taggen får jag stor möjlighet att bestämma teckenstorleken i alla övriga element på hemsidan.

Vill jag sen att t.ex ett "div"-element skall ha större teckenstorlek så sätter jag bara "font-size:1.2em;" för det elementet i stilmallen.

I och med att jag använder denna teknik så lyckades jag förenkla javascriptet avsevärt.

Eftersom allt innehåll är relativt till den teckenstorlek jag sätter i HTML/BODY-taggarna så räcker det med att jag ökar/minskar teckenstorleken för hemsidans BODY för att all text skall påverkas.

Så här ser javascriptet ut:  

function adjustFontSize(t){
 switch(t){
  case "bigger":
   var body = document.getElementsByTagName("BODY");
   
   var numexp = /[^0-9.]+/;
   if(typeof body[0].style.fontSize == "undefined" || body[0].style.fontSize == ""){
    var fz = 1;
   }else{
    
    var fz = Number(body[0].style.fontSize.replace(numexp,""));
   }
   body[0].style.fontSize = (fz+0.1)+"em";
  break;
  case "smaller":
   var body = document.getElementsByTagName("BODY");
   
   var numexp = /[^0-9.]+/;
   if(typeof body[0].style.fontSize == "undefined" || body[0].style.fontSize == ""){
    var fz = 1;
   }else{
    
    var fz = Number(body[0].style.fontSize.replace(numexp,""));
   }
   body[0].style.fontSize = (fz-0.1)+"em";
  break;
 }
}

 

 

När du har lagt in scriptet på din hemsida kan du själv välja hur du vill presentera möjligheten för besökaren att ändra teckenstorleken. Vanligaste sättet är att använda två bilder som illustrerar större teckenstorlek samt mindre teckenstorlek.

Exempel:
Ändra teckenstorlek

För den vänstra ikonen så lägger jag in funktionsanropet som ökar teckenstorleken, ex: "<img src="storre_text.jpg" onclick="adjustFontSize('bigger');">".

För den högra ikonen så lägger jag in funktionsanropet för att minska teckenstorleken, ex "<img src="mindre_text.jpg" onclick="adjustFontSize('smaller');">".

Om du vill sätta ett max/min-värde för hur stor eller liten text besökaren skall ha rätt att sätta så kan du helt enkelt bädda in detta i javascriptet.

Exempel:

var maxSize = 1.5;
var minSize = 0.7;

function adjustFontSize(t){
 switch(t){
  case "bigger":
   var body = document.getElementsByTagName("BODY");
   
   var numexp = /[^0-9.]+/;
   if(typeof body[0].style.fontSize == "undefined" || body[0].style.fontSize == ""){
      var fz = 1;
   }else{
      var newSize = Number(body[0].style.fontSize.replace(numexp,"")) + 0.1;
      if(newSize <= maxSize){    
        body[0].style.fontSize = newSize+"em";
      }else{
       alert('Du använder redan den största tillåtna teckenstorlek på hemsidan.');

      }
  }
  break;
  case "smaller":
   var body = document.getElementsByTagName("BODY");
   
   var numexp = /[^0-9.]+/;
   if(typeof body[0].style.fontSize == "undefined" || body[0].style.fontSize == ""){
     var fz = 1;
   }else{
     var fz = Number(body[0].style.fontSize.replace(numexp,""));
   }

    var newSize = Number(body[0].style.fontSize.replace(numexp,"")) - 0.1;
    if(newSize >= minSize){    
      body[0].style.fontSize = newSize+"em";

   }else{
      alert('Du använder redan den minsta tillåtna teckenstorlek på hemsidan.');

   }
  break;
 }
}

 Om du har några frågor kan du maila mig på info@objx.se.