Het beschrijven van je corpsgrootte.

Bron: http://www.sceneone.nl/tekst/corps.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Waar ik het in dit onderdeel over ga hebben is eigenlijk een samenvatting van een artikel wat ik tegenkwam. Het gaat over het werken met corpsgrootte en hoe je dat (volgens de auteur van het artikel) het beste kon doen. Ik vond het zo'n aardige oplossing dat ik besloot het over te nemen.
Ik moet je zeggen dat op het moment dat ik dit schrijf ik er nog niet mee gewerkt heb, maar het kan eigenlijk niet fout gaan. Ik heb het getest in allerlei browsers en het werkt wonderbaarlijk goed, zelfs Internet Explorer begrijpt het.

Het originele artikel is geschreven door Richard Rutter en vind je hier

Oké, hoe te beginnen

Er zijn een paar manieren om de afmeting van je corps aan te geven. De meest voor de hand liggende is in pixels. En die kunnen we niet gebruiken met de vriendelijke groeten van Internet Explorer. Wanneer we onze corpsgrootte beschrijven in 'px' staat IE het de gebruikers niet meer toe om via de browser de corpsgrootte te wijzigen.
Aangezien wij van de gebruikers vriendelijke websites zijn willen wij dat een bezoeker altijd via de browser zelf kan bepalen hoe groot het corps moet zijn. En dus kunnen wij onze corpsgrootte in ons css niet beschrijven in 'px'.

Hoe dan wel?

Een prima manier om je corpsgrootte te beschrijven in je css is in procenten. De bezoekers van je website hebben op die manier alle vrijheid om zelf de corpsgrootte nog aan te passen, dus no problem.
Een andere goede eenheid om je font in te beschrijven is de em.
De wat? De 'em'. Hierover dadelijk meer.
Het artikel waar ik het hierboven over had gaat uit van het werken met een combinatie van '%' en 'ems'.
Laten we eerst het werken met procenten eens onder de loep nemen.

corpsgrootte in procenten

Het eerste wat je moet weten is de standaard corpsgrootte, dus zonder dat jij er in je css iets aan veranderd hebt. Dit is door W3C vastgesteld op 16px.
Dus:

CSS: p.groot{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 100%;
}

p.kleiner{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
}
HTML: <p class="groot">Dit corps is in de css op 100% gezet en is dus 16px.</p>
<p class="kleiner">Dit corps is in de css op 80% gezet en is dus 80% van 16px. Hoeveel dat is mag je zelf uitrekenen.</p>

bekijk het resultaat

corpsgrootte in em's

We gaan opnieuw uit van de standaard corpsgrootte, 16px. De afspraak is dat 1em gelijk is aan die standaard corpsgrootte.
Als je online gaat navragen (op forums etc.) wat nou precies die maat em is kan het gebeuren dat er een hele discussie losbarst. Een hardnekkig verhaal is, dat een 'em' zijn afmeting ontleent aan de hoofdletter 'M' van de Times New Roman. Anderen beweren weer dat dat niet klopt, want.......hele verhalen.
Volgens mij is een 'em' 16px en daarmee basta.
Dus:

CSS: p.groot{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1em;
}

p.nog_groter{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.2em;
}

p.kleiner{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
}
HTML: <p class="groot">Dit corps is in de css op 1em (=100%) gezet en is dus 16px.</p>
<p class="nog_groter">Dit corps is in de css op 1.2em (=120%) gezet en is dus 120% van 16px.</p>
<p class="kleiner">Dit corps is in de css op 0.8em (=80%) gezet en is dus 80% van 16px.</p>

bekijk het resultaat

Let op

Of je nu met procenten werkt of met em's, je moet opletten met geneste elementen (een child-element van een bepaald parent-element noemen we een genest element). De afmetingen die je in je css aan het corps van de verschillende elementen geeft worden als het ware bij elkaar opgeteld.
Bekijk het resultaat van het volgende voorbeeld maar eens.

CSS: p{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.9em;
}

span{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.9em;
}
HTML: <p>Geneste <span>elementen</span> kunnen voor onverwachte verrassingen zorgen.</p>

bekijk het resultaat

Wat er gebeurt is het volgende.
De <span> is een child van de <p>. De corpsgrootte voor <p> staat op 0.9em. Omdat de <span> een child is van de <p> staat daarmee de corpsgrootte voor de <span> eigenlijk ook al op 0.9em.
Als je vervolgens in je css de corpsgrootte voor de <span> nóg een keer op 0.9em zet, zet je hem dus eigenlijk op 0.9em van 0.9em (is 90% van 90% = 81%). De corpsgrootte van de <span> staat dus eigenlijk op 0.81em.

corpsgrootte in procenten in combinatie met em's

Dan nu naar het artikel van Richard Rutter en het trucje wat hij daarin beschrijft.
Zoals we hierboven gezien hebben nemen child-elementen automatisch de corpsgrootte van hun parent-element over. Dat gegeven gaan we gebruiken. Om in één klap de corpsgrootte van alle elementen naar een eenvoudig werkbaar getal te zetten gebruiken we het element <body>. Alle andere html elementen zijn immers altijd een child van het element <body>.
We zetten de corpsgrootte van de body op 62.5% (62.5% van de standaard 16px = 10px). Alle denkbare html elementen die je vervolgens wilt gebruiken hebben een corpsgrootte van 10px en dat rekent lekker makkelijk.
Kijk maar naar het volgende voorbeeld:

CSS: body{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%; /* = 10px */
}

p.groot{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.4em; /* = 14px */
}

p.klein{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.2em; /* = 12px */
}

li{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.5em; /* = 15px */
}

address{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1em; /* = 10px */
}
HTML: <p class="groot">We weten dat de 'em' altijd uitgaat van de standaard van 16px. We hebben die standaard in de body teruggebracht tot 10px.</p>
<p class="klein">Met 10px kunnen we eenvoudig rekenen. Deze paragraaf (met de class 'klein') heeft een font-size van 1.2em (is 1.2 x 10px = 12px).</p>

<ul>
<li>en het mooie is</li>
<li>dat het werkt</li>
<li>in alle browsers</li>
<li>zowel op Mac als PC</li>
</ul>

<address>met de groeten van Richard Rutter</address>

bekijk het resultaat

Je kunt je corpsgrootte dus aangeven in '%' of 'em'.
Gebruik liever geen 'px' in verband met het gebrek aan gebruikers vriendelijkheid in Internet Explorer.
Het trucje van Richard Rutter helpt je om handig met de corpsgrootte om te gaan. Maar nog belangrijker is dat het werkt in alle browsers!
Let op geneste elementen en ook tekst in een <td> wil nog wel eens voor verrassingen zorgen.

Ik heb ook nog wat handige tips over het gebruik van font-family.

naar het begin van de pagina