Endre fontstørrelse

Hva

Et moment som stadig dukker opp i tilpassing av vevsider er fontstørrelse. Vi kan ønske å justere denne som et ledd i responsive design, og vi kan ønske å ha kontroll over dette dersom brukeren vil zoome ut eller inn. Ofte er browserens zoom-funksjon en grei løsning, men vi kan se litt på en alternativ strategi. Du kan klikke på de tre A-ene opp til høyre. Det er det som er beskrevet som eksepel 1 nedenfor som er i aksjon

Vi vet at fontstørrelse kan angis på mange måter:

Enhet	Beskrivelse	Bruk
px	Antall bildepunkter på skjermen	Gir oss god kontroll, men det er krevende å oppdatere alle spesifikasjonene dersom vi endrer skjermstørrelse eller ønsker å zoome hele eller deler av skjermbildet
pt	Metrisk mål. (72 pts = 1 inch)	Bør brukes bare på materiale som skal printes. Vil gi ulikt resultat på ulike skjermer, avhengig av oppløsning.
em	En relativ angivelse i forhold til den størrelsen som elementet arver	Svært anvendelig siden vi kan foreta en proposjonal endring av størrelser, se eksempel 1 nedenfor
%	Nesten det samme som em	Svært anvendelig siden vi kan foreta en proposjonal endring av størrelser, se eksempel 2 nedenfor

Forholdet mellom px, pt, em og % er blandt annet drøftet av Kyle Schaeffer. [1]

Eksempel 1

Vi bruker em. Strategien her er å definere en tekststørrelse i body selectoren i stilsettet, f.eks slik:

body{
	...
	font-size: 14px;
	...
}

Alle andre (nesten) fontangivelser er angitt, ikke i pixelstørrelse, men som em. F.eks.

.mymenuItem{
	font-size: 1.1em;
}

em angir altså størrelsen i fohold til den størrelsen som arves. Hvis vi endrer font-size i body fører det til at de andre settingene blir endret. Hvis vi har angitt 14px i body vil 2em tilsvare 28 pixler.

Du ser raskt at det fører til noen problemer på denne siden. Menyen blir for stor og koden over følger ikke med. Alt dette lar seg lett håndtere hvis denne strategien hadde vært fulgt konsekvent fra begynnelsen av designprosessen. Det vil også være greitt å sette noen begrensninger på størrelsen, i Javascriptet og/eller i stilsettet.

Et eksempel på et Javascriptet som gjør jobben er slik:

// read this from body:font-size
// on startup
var originalSize;
// updated 
var currentSize;
// sheetId is id of style-element 
// for instance:
//('tmpcss','body','font-size')
function getClassRuleValue(sheetId,rule,name){
    // the stylesheet element, as a styleshhet
    var styleSheet=document.getElementById(sheetId).sheet;
    // loop rules   
    var myrules=styleSheet.cssRules;
    for(i=0; i < myrules.length; i++){
        if(myrules[i].selectorText==rule){
            for(p in myrules[i].style){
                if(myrules[i].style.getPropertyValue(name)){
                    return myrules[i].style.getPropertyValue(name);
                }
            }
        }
    }
    return null;
}
// for instance:
//('testcss','body','font-size','18px')
function setClassRuleValue(sheetId,rule,name,val)
{
    // the stylesheet element, as a styleshhet
    var styleSheet=document.getElementById(sheetId).sheet;
    // loop rules   
    var myrules=styleSheet.cssRules;
    console.log(myrules);
    for(i=0; i < myrules.length; i++){
        if(myrules[i].selectorText==rule){
            for(p in myrules[i].style){
                if(myrules[i].style.getPropertyValue(name)){
                    myrules[i].style.setProperty(name,val,null);
                    return;
                }
            }
        }
    }
}
// it might be a good idea to put
// some limits on (min and max) size
function increase(d){
    currentSize=""+(parseFloat(currentSize)+d)+"px";
    setClassRuleValue('tmpcss','body','font-size',currentSize)
}
function decrease(d){
    currentSize=""+(parseFloat(currentSize)-d)+"px"
    setClassRuleValue('tmpcss','body','font-size',currentSize)
}
function setOriginal(){
    currentSize=originalSize;
    increase(0);
}
function readOriginalSize(sheetId,rule,name,defaultValue){
    originalSize=getClassRuleValue(sheetId,rule,name);
    if(!originalSize)
        originalSize=defaultValue;
    currentSize=originalSize;
}

Du kan inspisere en enklere side her
test1.html https://borres.hiof.no/respons/calcfont/test1.html

Eksempel 2

Alternativet til em er å bruke %. Det er en god del diskusjn om hvilke av de to en skal velge for å oppnå best fleksibilitet. Strategien vil i all hovedsak bli som i eksempelet over, men det er litt forskjellig fundament. Utgangspunktet for forskjellen er at (nesten?) alle nettlesere har en ferdig deinert fontstørrelse. Hvis du lage en absolitt minimalistisk web-side uten noe css, vil du kunne inspisere et p-element og se at det har en størrelse på 16px. Vi kan ta utgangspunkt i denne størrelsen i stedet for å definere en verdi i css beskrivelsen av body slik vi gjorde i eksempelet ovenfor, og betrakte denne verdien som 100%. Så kan vi endre stiler enten med % eller med em siden begge jo er angivelser relativt til det vi finner i dokumentet eller egentlig i det elementet som omslutter det elementet vi spesifiserer.

Vi kan lage følgende konstruksjon dersom vi vil justere nettleserens default verdi

body{
	...
	font-size: 75%;
	...
}

Det vil da (nesten) alltid bety at de har spesifisert en basis på 12px.

Så kan vi spesifiserer andre elementer slik, relativt til den verden vi har bestemt i body:

.mymenuItem{
	font-size: 1.1em;
}

eller slik

.mymenuItem{
	font-size: 110%;
}

Arv

Merk at teksstørrelse, font-size, arves i vevsidens boksmodell. Den enkle siden nedenfor ser slik ut
test0.html https://borres.hiof.no/respons/calcfont/test0.html

<!DOCTYPE html>
<html lang="no">
<head>
	<meta charset="UTF-8" />
	<title>test 0</title> 
<style>
	body{font-size:100%}
	p,.container{font-size:1.5em}
</style>	
</head>

<body> 
	<h1>Overskrift</h1>
	<div class="container">
		<p>i container og i p</p>
		i container men utenfor p
	</div>
</body>
</html>

Referanser

CSS Font-Size Kyle Schaeffer kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ 14-03-2016