Det første bogstav i dette afsnit fylder fire linier. Det gøres dels i html og dels i css, men det kræver lidt omhyggelighed at får bogstaverne i den ønskede størrelse. De følgende afsnit forklarer matematikken bag og viser til slut den konkrete html og css.

Forskellige skrifttyper

Det ville så dejligt nemt, hvis bogstaverne i en skrift blot var på højde med skrifttypen – men det er de desværre ikke. For eksempel kan et stort bogstav som “A” i 12pt skrift-højde være 8,5pt højt.

Oven i købet er der forskelle fra skrifttype til skrifttype, og i html kan man aldrig være sikker på, hvilke skrifttyper, der er installeret på læserens maskine. Heldigvis er der tommelfingerregler, som de fleste af de normale skrifttyper følger. På figurerne nedenfor viser den grå baggrund skrifttypens højde (font-size) mens de røde streger skærer cirka den øverste og nederste syvende-del fra.

Eksemplerne viser flere ting.

• Højden på et stort bogstav er 5/7 af font-size.
• Bogstaverne centreres vertikalt, så der er lige meget plads over og under selve kroppen af bogstaverne.
• De to foregående punkter passer ikke helt, kun sådan cirka, men det er det bedste bud, vi har, når vi nu ikke kan være sikre på præcis hvilken skrifttype vores tekst vises med.

Målet

Det, vi ønsker at ende op med, er billedet nedenfor. Den lyse grå viser skrifttypens højde og som ovenfor skærer de røde streger cirka den øverste og nederste syvende-del af skrifttypens højde fra. Linierne skiller ved de hvide stiplede linier. På de små linier er liniehøjden større en skrifttypens højde, men på det store bogstav er det omvendt.

Vi kender størrelsen og linieafstanden på den normale, lille, skrift. Vi ønsker at finde størrelsen på det store bogstav, så overkanten af det store bogstav flugter med overkanten af bogstaverne på den øverste af de små linier. Tilsvarende forneden. Det ses tydeligt, at sålænge vi ikke beregner det til en helt bestemt skrifttype, så bliver det ikke præcist, – men det viser sig at være fint nok i alle normale tilfælde.

Matematikken

Først den nemme del:
  H = k*h, fordi det store bogstav så centreres om midten af de k små linier og derved placeres korrekt.

S kræver lidt mere omtanke. Højden af det store bogstav er 5/7 af det store bogstavs skrifthøjde, det vil sige, det der på figuren ovenfor er mellem de to røde streger. Dette er det samme som det, der er mellem de små liniers allerøverste og allernederste røde streg:
  S * 5/7 = (k – 1) * h + s * 5/7
det vil sige:
  S = 1.4 * (k – 1) * h + s

I vores eksempel, hvor det store bogstav skal fylde fire linier, har vi:
  k = 4
  h = 16pt
  s = 10pt
hvorved:
  H = 4 * 16pt = 64pt
  S = 1.4 * 3 * 16pt + 10pt = 77.2pt

Html og css

Det følgende eksempel viser hvordan ovenstående matematik puttes ind i html og css. Hvis man kopierer eksemplet ind i en html-fil og ser på den i en browser, kan man se to små teksteksempler, der starter med et stort “H”, – det første fylder fire linier og er sort, det næste fylder fem linier og er pyntet med farver.

Hvis det ikke virker, så kontroller venligst, at “gåseøjnene” er de helt almindelige og ikke er blevet ændret under kopieringen, som jeg har oplevet det.

I css hedder skrifttypens højde font-size og liniehøjden line-height, og den opmærksomme læser vil opdage, at liniehøjden ikke er korrekt i det følgende eksempel. Desværre er der øjensynligt en regnefejl i Firefox og Opera browserne (og måske flere?), der gør, at de små linier ikke folder sig tæt ind under det store bogstav. For at få det til at virke gør jeg liniehøjden på det store bogstav en lille smule mindre end det matematisk korrekte. Hvis der er nogen, der sidder med en bedre forklaring, så vil jeg meget gerne høre den.