Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers

Vrolijk je webpagina’s op met interessante initialen

Een bijzondere initiaal is niet moeilijk te maken en fleurt pagina’s met lange blokken tekst direct op.

Je kent ze vast wel van plaatjes van oude boeken: van die initialen (beginletters) die niet zomaar neergepend zijn, maar die eruitzien alsof er dagen werk aan is besteed. Die mooie beginletters die aan sommige alinea’s werden toegevoegd dienden o.a. als houvast: vaak werden teksten achter elkaar geschreven zonder veel witregels (en soms stonden er zelfs geen spaties tussen de woorden). Dan wordt het dus moeilijk om iets terug te vinden. Zo’n opvallende letter helpt de lezer daarbij.

Voor webpagina’s hoef je om bovenstaande reden natuurlijk geen mooie beginletter te gebruiken. Maar als je pagina uit heel veel blokken tekst bestaat, is dit wel een leuke manier om je pagina wat op te vrolijken. Hieronder leg ik je uit hoe je zo’n bijzondere initiaal maken kunt.

Je begint met de eerste letter van je alinea tussen een set span-tags te zetten. Dit span-element kun je nu afwijkende stijleigenschappen geven, bijvoorbeeld een afwijkend lettertype, een andere kleur, en misschien wat vetter en groter. Op die manier maak je op een simpele manier een bijzondere initiaal. De code van de initiaal hierboven is bijvoorbeeld:

<span style="font-size: 4.5em; font-family: Georgia, serif; color: firebrick; font-weight: bold; margin-right: -0.1em; line-height: .9;">J</span>

Je kunt hiermee natuurlijk nog eindeloos variëren. Een paar suggesties:

Zet de initiaal links naast je paragraaf neer, zodat hij er een beetje buiten valt. Daarvoor voeg je aan de paragraaf waarbinnen deze beginletter staat, de eigenschap text-indent toe. Je geeft die een negatieve waarde, zodat de kantlijn van de eerste regel naar links verspringt. De alinea moet je misschien tegelijkertijd iets naar rechts laten verspringen, zodat alles mooi onder elkaar komt te staan. Dat doe je met de eigenschap: margin-left. De code van deze initiaal:

<span style="font-size: 4.5em; font-family: Georgia, serif; color: #347C2C; font-weight: bold; margin-right: 0; line-height: .9;">Z</span>

Laat de initiaal naar beneden zakken, zodat hij niet meer boven de tekst uit steekt, maar de beginruimte van meerdere regels inneemt. Dit heet ‘verzonken’. Dat doe je met de eigenschappen: float: left, margin-top, en margin-bottom. Je moet waarschijnlijk een beetje spelen voordat je een goede verhouding hebt tussen lettergrootte, en de waarden voor margin-bottom en margin-top. Het is het mooiste als de onderkant van de beginletter op één lijn komt te staan met een van de regels. En dit is de code van de L:

<span style="font-size: 4.5em; font-family: Georgia, serif; color: midnightblue; font-weight: bold; margin-right: 0; float: left; margin: 4px 4px -2px 0; line-height: .9em;">L</span>

Nóg een suggestie voor een variatie: geef de initiaal de kleur van de achtergrond van je pagina, en zet het binnen een vakje met een afwijkende achtergrondkleur. Daarvoor moet je eerst de eigenschap background-color toevoegen en de tekstkleur (color) veranderen in wit bijvoorbeeld (als dat de achtergrondkleur van je pagina is). Verder heb je voor deze initiaal de eigenschappen display: inline-block en padding nodig. En waarschijnlijk moet je ook weer spelen met de waardes voor margin-top, margin-right en margin-bottom, net zo lang je tevreden bent met het resultaat. De code van deze letter:

<span style="font-size: 4.5em; font-family: Georgia, serif; background-color: firebrick; color: white; font-weight: bold; margin-right: 0; float: left; margin-top: 0.1em; margin-right: 0.08em; margin-bottom: 0em; display: inline-block; padding: 0.5em 0.25em; line-height: .9em; padding: 4px;">N</span>

Laat een achtergrondafbeelding zien, in plaats van een achtergrondkleur. Dat doe je met de eigenschap background-image. En geef je letter gelijk wat meer diepte met de eigenschap text-shadow. En deze code gaat schuil achter deze letter:

<span style="font-size: 4.5em; font-family: Georgia, serif; background-color: midnightblue; background-image: url(https://www.mijn-eigen-website.nl/images/groenblauw.jpg); color: white; font-weight: bold; margin-right: 0; float: left; margin-top: 0.1em; margin-right: 0.08em; margin-bottom: 0em; display: inline-block; padding: 0.5em 0.35em; text-shadow: 2px 2px 2px black; line-height: .9em; padding: 4px 10px;">L</span>

En ten slotte: gebruik een opvallend lettertype, bijvoorbeeld een lettertype van Google webfonts. Hier heb ik het lettertype Georgia bijvoorbeeld door het lettertype Jacques Francois Shadow, Daarvoor moet je in de head van je pagina’s een link naar het stylesheet van dit font zetten (deze link krijg je van Google), en dan kun je dit font gewoon op de normale manier aanroepen achter de eigenschap font-family. De code die ik heb gebruikt voor deze laatste letter is:

<span style="font-size: 4.5em; font-family: 'Jacques Francois Shadow', serif; color: midnightblue; font-weight: bold; float: left; margin: 0 0.01em; line-height: .9em; padding: 4px;">E</span>