Content opmaken met :first-letter
Soms wordt in een boek de eerste letter van een hoofdstuk heel groot gedrukt. Je ziet dat vaak in oude boeken. Soms is het lettertype van die eerste letter ook nog anders. Het ziet een beetje uit zoals deze paragraaf.
Je ziet een grote hoofdletter S. Deze heeft een andere kleur dat de rest van de tekst. Ook is het lettertype van de S anders. De tekst vloeit netjes om de eerste letter heen.
Op deze bladzijde wordt besproken hoe je dit doet.
- De code bestaat uit een CSS-class met de naam 'eerste' waar de pseudo-class :first-letter aan is gekoppeld, zie onderaan deze bladzijde.
- De eerste paragraaf heeft de class 'eerste', waardoor deze de grote letter krijgt.
- Aan de class 'eerste' is de pseudo-class first-letter toegevoegd. Je herkent een pseudo-class aan de dubbele punt die er voor staat.
- Er mag geen spatie staan tussen de naam van de class en de pseudo-class.
- Als je meer dan één paragraaf met een grote letter wilt laten beginnen, geef je die extra paragrafen gewoon de class + pseudo-class eerste mee.
- Toepassing van :first-letter is niet beperkt tot <p>-tags. Het werkt bij alle HTML-elementen waarmee je blokken tekst kunt weergeven.
- Zoals je zie werkt het ook met lijst-elementen <li> (binnen een ordered of een unordered list <ol> resp. <ul>).
- In dat geval blijven de bullets echter wel aan het begin van de regel staan. Dat staat niet fraai, dus let er wel goed
op dat het effect de verdere opmaak van je pagina geen geweld aan doet.
- De CSS-eigenschappen float:left en margin-right zijn noodzakelijk voor het effect.
- Let er op dat de bovenkant van de beginletter op de goede hoogte staat. Je regelt dat met line-height. Als je font-size of font-family verandert, moet je ook line-size aanpassen.
- Het is eigenlijk een kwestie van een beetje spelen met font-family, font-size, line-height en color om tot een goed resultaat te komen.
Het is mogelijk om de pseudo-class :first-letter te combineren met :first-line.
Dat doe je door aan het tekstblok (in dit geval een paragraaf) zowel de classes eersteRegel en eerste mee te geven:
<p class="eersteRegel eerste">De pseudo-class first-line wordt besproken in het item Content opmaken met :first-line.
Gebruik:
- De code staat in de <HEAD>.
- Referenties aan de class staan in de <BODY>, in de tags waar de nodig zijn.
De code van de class 'eerste' ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.eerste:first-letter { font-family:FontinRegular; float:left; color:#2B6CC4;
font-size:100px; line-height:85px; margin-right:10px }
/* Hieronder staat het webfont dat wordt gebruikt voor de eerste letter */
@font-face { font-family: 'FontinRegular';
src: url('fonts/fontin-regular-webfont.eot');
src: url('fonts/fontin-regular-webfont.eot?#iefix')
format('embedded-opentype'),
url('fonts/fontin-regular-webfont.woff') format('woff'),
url('fonts/fontin-regular-webfont.ttf') format('truetype'),
url('fonts/fontin-regular-webfont.svg#FontinRegular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
Opmerkingen:
- De paragrafen met een grote beginletter hebben de class 'eerste', waaraan een pseudo-class is toegevoegd. Dat is gedaan om onderscheid mogelijk te maken met de andere paragrafen in de tekst.
- Het is ook mogelijk om de pseudo-class direct aan een element (bijvoorbeeld een paragraph <p>) te koppelen:
p:first-letter { ... (enz.) }
- De CSS-eigenschap @font-face wordt uitgebreid besproken in het item "Niet-standaard fonts gebruiken".
