Line-height og browserforskelle

Tekst som inline-elementer

Da jeg begyndte at lære mig selv at lave hjemmesider, undrede og irriterede det mig helt fra starten, at tekst kan placere sig forskelligt afhængigt af hvilken browser der benyttes til fremvisning af hjemmesiden. Jeg brugte derfor et godt stykke tid på at teste og opdagede, at når jeg brugte 'display: inline' i stylesheetet forsvandt problemet. Teksten – hvad enten det var brødtekst med 'p' eller overskrifter med for eksempel 'h1' - placerede sig præcis samme sted uanset browser!

Efter at have brugt 'display: inline' på al tekst et godt stykke tid, gik det gradvist op for mig, at jeg samtidig fratog mig selv muligheden for at layoute med egenskaberne for block-elementer som for eksempel 'margin-bottom', da denne 'property' blandt andre som udgangspunkt ikke kan bruges for inline-elementer.

Jeg måtte til slut erkende, at jeg nok alligevel ikke havde fundet den guldrandede løsning, og at jeg hellere måtte bruge tekst-elementerne som block-elementer frem for inline-elementer, og i stedet finde ud hvad det er der gør, at browserne placerer tekst forskelligt.

Forskelle i Line-height

Når jeg indsætter brødtekst på en hjemmeside ved at bruge 'p' som container, indsætter browseren automatisk et tomt område mellem hver linie, så teksten bliver lettere at læse - dette kaldes 'line-height', og kan justeres afhængig af typografi, længde og bredde af tekstafsnittet etc.

Den medfødte værdi for 'line-height' er 'normal', og i browserens eget stylesheet svarer det til cirka 120% af bogstavernes højde ('font-size') fordelt i top og bund af hver linie tekst. De 120% er imidlertid kun en anslået værdi - når det kommer til stykket, bruger browserne hver især forskellige værdier til udregningen af 'line-height', hvilklet betyder, at afstanden mellem linierne i en blok af tekst varierer afhængigt af browser.

Afstand i top og bund

'Line-height' laver afstand BÅDE i bunden og i toppen af et bogstav. Højden af 'line-height' deles altså på hver sin side af den enkelte tekst-linie – uanset om der er en eller flere sætninger. Så har jeg en 'line-height' på 20px, vil afstanden mellem bogstaverne altså fordeles ligeligt i top og bund med 10px hver – har jeg to tekst-linier, vil det give 20 px i mellemrummet mellem de to linier og 10px over og under linierne. Dette gælder i det mindste for fonte på Windows styresystemet - på Apple enheder skal 'line-height' angiveligt kun blive indsat UNDER bogstaverne?!

Browsertest

Som allerede nævnt varierer værdien for 'line-height' fra browser til browser. Nok er der kun tale om variationer på ganske få pixels, men er teksten indsat i en menu med begrænset højde for de enkelte emner, er forskellen tydelig. Se herunder hvor den samme sætning vises i Firefor, Opera, Chrome og IE9 samtidigt – her er der ingen styling for 'line-height' i mit stylesheet, så den enkelte browser definerer altså selv værdien af 'line-height':

CSS
p  {
	font-family: Trebuchet MS, Arial, sans-serif;
	font-size: 20px;
	color: white;
	margin: 0;
}
Default line-height i forskellige browsere

Default line-height i Firefox, Opera, Chrome og IE9

Ved at give line-height en værdi, fortæller jeg hver af de 4 browsere, hvor høj en linie-afstand texten skal have – det er altså slut med selv at bestemme:

CSS
p  {
	font-family: Trebuchet MS, Arial, sans-serif;
	font-size: 20px;
	color: white;
	line-height: 1.0;
	margin: 0;
}
Line-height med mrgin: 0; i forskellige browsere

line-height: 1.0; i Firefox, Opera, Chrome og IE9

Brug et Reset CSS

Konklusionen er, at 'line-height' bør defineres eller nulstilles, hvis jeg ønsker, at min tekst vises på samme måde i alle browsere. Det gøres lettest ved bruge et 'Reset CSS' - læs mere om hvad det er, og hvordan det bruges i denne artikel, hvor jeg i øvrigt også undersøger hvordan browserne automatisk indsætter 'margin' i top og bund af al tekst.

Værdier for line-height

Ligesom med andre HTML-elementer har jeg flere forskellige muligheder, når jeg sætter værdien for 'line-height': pixel, rem, em og procent – hver værdi har sin beretiggelse og funktion. Men når det kommer til 'line-height', er der faktisk endnu en mulighed – nemlig at sætte værdien uden en endelse – altså med kun tal ('numbers') ligesom jeg gjorde i eksemplet ovenfor. Når værdien for 'line-height' som i eksemplet defineres med 'numbers', beregner browseren 'line-height' ud fra størrelsen af bogstaverne ('font-size'):

Statisk eller relativ værdi for font-size

Når jeg bruger 'numbers' til at definere line-height med beregnes afstanden ud fra 'font-size' - uanset om størrelsen af 'font-size' er sat med en statisk (for eksempel 'pixel' eller 'point') eller en relativ værdi (for eksempel 'em' eller 'procent*). Er font-size sat med en relativ værdi som 'rem', vil line-height tilsvarende skaleres op og ned i forhold til 'font-size' – også selvom et fallback med en statisk værdi for ældre browsere er indskrevet også.

  • 1.0 er den tættest mulige linieafstand
  • 2.0 giver en linie-afstand svarende til font-size + den tættest mulige linieafstand
  • 3.0 giver en line-height dobbelt så høj som font-size + den tættest mulige linieafstand
Line-height sat med 'numbers'

Line-height sat med 'numbers'

Bestemme størrelse af line-height

En god tommelfinger-regel er, at line-height for elementet 'p' defineret med 'numbers' bør ligge et sted mellem 1.2 og 1.5. Jeg kan som udgangspunkt bruge samme værdi for overskrifter sat med 'h1' til 'h6', men det er slet ikke utænkeligt, at jeg i forhold et givent layout ønsker at definere 'line-height' anderledes for en overskrift end for brødtekst, ligesom typografi generelt også har stor betydning.

Typografi

At bestemme højde af 'line-height' - og tage beslutninger om typografi generelt - er i sidste ende et spørgsmål om layout kontra læsevenlighed. Det kommer an på øjet der læser! Jeg må prøve mig lidt frem, gerne spørge nogle andre, og altid huske på, at medmindre teksten har en decideret kunstnerisk funktion bør letlæseligheden altid bør prioriterres højere end layout.

  • Tekstens betydning:
    Det kan være afgørende for 'line-height' hvad bogstaverne beskriver. Det kommer helt an på layoutet – for eksempel har en overskrift som aldrig knækker over i 2 tekstlinier, måske brug for mere afstand end brødteksten.
  • Skrifttype:
    Selve skrifttypen ('font') har også betydning for valget 'line-height' – er det en ”kunstnerisk” 'font' med for eksempel store udsving i bund og top på ”g” eller ”h” skal der selvfølgelig større afstand linierne end hvis det er en vertikalt ”flad” 'font.
  • Linielængde:
    Har jeg meget lange linier tekst, er det fornuftigt at øge 'line-height' – dette gør teksten mere læsevenlig. Fylder teksten omvendt ikke særlig meget horizontalt, kan jeg mindske line-height. Læs mere om linie-længde.

justeringer med CSS

Justeringer i toppen

I forhold til et givet layout kan der være situationer, hvor jeg ønsker at line-height ikke tilføjes i toppen. Her har jeg 2 løsninger, som vises i en test med elementet 'p' indsat i block-elementet box uden angivelse af højde - indholdet bestemmer altså højden:

.box {
	padding: 4px;
	margin: 10px;
	border: 2px solid red;
	background: #333;
}
Block-element uden indhold
Løsning 1:
p  {
	font-family: Trebuchet MS, Arial, sans-serif;
	font-size: 20px;
	color: white;
	margin: 0;
	line-height: 2.0;
	position: relative;
	top: -10px;
}
Løsning 2:
p  {
	font-family: Trebuchet MS, Arial, sans-serif;
	font-size: 20px;
	color: white;
	margin: 0;
	line-height: 2.0;
	margin-top: -10px;
}
justering af line-height i toppen af teksten
  • Løsning 1:
    Sammenligner jeg højden af 'line-height' med udgangspunktet i den sidste kasse i højre side, er den samlede højde af 'line-height' bevaret – det eneste der er sket ved at give 'p' en negativ værdi i 'top' er, at teksten er trukket 10px opad og efterladt 10px i bunden af div'en 'box'. Sagt på en anden er 'margin' for 'p' bevaret, og div'en 'box' har derfor samme højde.
  • Løsning 2:
    Defineres 'p' med en negativ 'margin' i toppen, har det indflydelse på højden af tekstafsnittet - teksten rykker 10px højere op, men i modsætning til løsning 1 trækkes de fra i bunden, så teksten samlet set bliver lavere.

Justeringer i bunden

Ved hjælp af margin-bottom kan jeg bestemme afstanden i bunden af et tekstafsnit – dette kan være nyttigt i forhold til typografien rent layoutmæssigt. Ved at indsætte ekstra afstand i bunden af teksten, kan jeg lettere indikere overgangen fra et afsnit til et andet:

CSS
p  {
	font-size: 20px;
	color: white;
	margin: 0;
	line-height: 1.2;
	margin-bottom: 20px;
}
justering af line-height i bunden af teksten