Het uitvullen van tekst is een veelvoorkomende taak in webdesign, omdat het helpt bij het creëren van een nette en professionele lay-out door de tekst gelijkmatig uit te lijnen langs zowel de linker- als de rechtermarge. In HTML5 wordt de uitvulling van tekst meestal afgehandeld met CSS (Cascading Style Sheets) in plaats van rechtstreeks in de HTML-tags.
Waarom tekst uitvullen?
Door tekst uit te lijnen, ontstaat een uniform tekstblok dat zowel aan de linker- als de rechterrand van een tekstvak is uitgelijnd, net als tekst in een krant of boek. Deze methode wordt vaak gebruikt om de esthetiek van alinea's te verbeteren, waardoor de tekst er verzorgder en overzichtelijker uitziet.
Tekst uitvullen met CSS in HTML5
U kunt tekst in HTML5 uitvullen met behulp van de tekst-uitlijning eigenschap in CSS. De tekst-uitlijning eigenschap bepaalt de horizontale uitlijning van tekst binnen een container. Om de tekst uit te lijnen, gebruikt u eenvoudig de waarde verantwoorden.
Zo doe je dat:
Voorbeeld:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voorbeeld van uitvullen van tekst</title>
<style>
/* CSS to justify the text */ p {
text-align: justify;
}
</style>
</head>
<body>
<h1>Hoe tekst in HTML5 uit te lijnen</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Nulla facilisi. Integer convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui. Nunc sit amet magna nisi. Integer-auctor is niet gevuld met vulputaat. Je leven wordt opgeschort als je een volutpat iaculis non sit amet mi hebt.
</p>
<p>
Aeneaanse tincidunt, arcu nec tincidunt aliquet, nisl risus maximus nunc, sed bibendum risus velit a augue. Curabitur suscipit, lectus id efficitur mollis, metus lectus tincidunt ligula, id luctus magna risus en sapien. Nulla facilisi. Proin elementum zit met purus en fermentum. Ut et velit a mi volutpat-auctor.
</p>
</body>
</html>
Uitleg:
- HTML-structuur:
- De
<h1>tag wordt gebruikt voor de kop, en twee<p>Tags worden gebruikt voor tekstparagrafen.
- De
- CSS:
- De
tekst-uitlijning: uitvullen;stijl wordt op alles toegepast<p>elementen. Dit zorgt ervoor dat de tekst binnen deze alinea-tags wordt uitgelijnd, wat betekent dat de tekst wordt uitgelijnd om zowel de linker- als de rechtermarge uit te lijnen.
- De
Alternatief: Tekst uitvullen voor specifieke elementen
Als u de uitlijning niet op alle alinea's wilt toepassen, maar alleen op specifieke alinea's, kunt u een klasse of ID gebruiken om specifieke elementen te specificeren.
Voorbeeld met behulp van een klasse:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voorbeeld van uitvullen van tekst</title>
<style>
/* CSS to justify only paragraphs with the class 'justify-text' */ .justify-text {
text-align: justify;
}
</style>
</head>
<body>
<h1>Hoe tekst in HTML5 uit te lijnen</h1>
<p class="justify-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Nulla facilisi. Integer convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui.
</p>
<p>
Deze alinea wordt niet uitgevuld omdat deze niet over de klasse "justify-text" beschikt.
</p>
</body>
</html>
In dit voorbeeld is alleen de alinea met de klasse tekst uitvullen is gerechtvaardigd en de tweede alinea blijft links uitgelijnd.
Waar u op moet letten:
- LeesbaarheidUitgevulde tekst kan soms ongelijke spaties tussen woorden veroorzaken, vooral als de regellengte kort is. Dit kan de leesbaarheid beïnvloeden. Het is belangrijk om de uitvulling op verschillende apparaten en schermformaten te testen om een heldere, leesbare weergave te garanderen.
- Afbreking:Uitgevulde tekst kan ook leiden tot onhandige woordafbrekingen. Om de tekstweergave te verbeteren, kunt u afbreking in CSS inschakelen met behulp van de
koppeltekenseigenschap (hoewel niet alle browsers deze functie ondersteunen).p { text-align: justify; hyphens: auto; /* Maakt automatische afbreking mogelijk */} - Alternatieve uitlijningen:Als u vindt dat de uitlijning er niet in alle gevallen goed uitziet, kunt u experimenteren met andere tekstuitlijningen, zoals
links,rechts, ofcentrum, met behulp van detekst-uitlijningeigendom.
Conclusie
Het uitlijnen van tekst in HTML5 is eenvoudig te bereiken met behulp van CSS met de tekst-uitlijning: uitvullen; eigenschap. Het helpt bij het creëren van duidelijke, professioneel ogende tekstblokken, zoals je ze vaak ziet in boeken, kranten en websites. Of je nu tekst over de hele pagina wilt uitlijnen of alleen voor specifieke elementen, CSS biedt een eenvoudige manier om deze functie te implementeren en aan te passen aan jouw behoeften.
Foto door Lucas
