Starte med stort bogstav

Paw Hermansen

10. september 2009

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.

Fordi trykte bogstaver er så små målt i centimeter eller tommer, måler man dem i point (pt) og pica. Se Wikipedia – Point (typography) for en historisk gennemgang.

1 tomme = 72 pt
1 tomme = 6 pica
1 tomme = 25,4 mm
1 pica = 12 pt
1 pica = 4,2333 mm
1 pt = 0.3528 mm
2p4 = 2 pica + 4 pt

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.

Eksempler hvor store bogstaver fylder de midterste 5/7 af font-size
Eksempler hvor store bogstaver fylder de midterste 5/7 af font-size

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.

Et stort bogstav med fire liniers bogstaver ved siden af med hjælpestreger

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

k = antal af de små linier
h = liniehøjden af de små linier
s = skrifthøjden af den lille skrifttype
H = liniehøjden af den store linie
S = skrifthøjden af den store skrifttype

 

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.

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.

<html>
<style>
.big4 {
float: left;
font-size: 77.2pt;
line-height: 63.5pt;
}
.big5 {
float: left;
font-size: 99.6pt;
line-height: 79pt;
}
.colored {
color: #DD6666;
background-color: #DDFFBB;
}
</style>
<body style="width: 200px; font-size: 10pt; line-height: 16pt;">

<p><span class="big4">H</span>ickory dickory dock.
The mouse ran up the clock. The clock struck one.
The mouse ran down. Hickory dickory dock.</p>

<p><span class="big5 colored">H</span>ickory dickory dock.
The mouse ran up the clock. The clock struck one.
The mouse ran down. Hickory dickory dock.</p>

</body>
</html>

Kommentarer

Endnu ingen kommentarer til Starte med stort bogstav. Du er meget velkommen til at komme med dine kommentarer, forslag eller nye ideer.

Skriv en kommentar