Uitgevulde tekst instellen met CSS

click fraud protection

Een van de eigenschappen van de typografie van een website die u tijdens de ontwikkeling van een site kunt aanpassen, is hoe de tekst van de site wordt uitgevuld. Standaard wordt websitetekst links uitgelijnd en dit is hoeveel sites hun tekst verlaten. De enige andere opties zijn rechts gerechtvaardigd, wat zeldzaam is, of volledig gerechtvaardigd.

Uitgevulde tekst is een tekstblok dat zowel aan de linker- als aan de rechterkant wordt uitgelijnd, in tegenstelling tot slechts één van die zijden (wat de uitvulling met "links" en "rechts" doet). Het dubbel gerechtvaardigd effect wordt bereikt door de woord- en letterruimten in elke tekstregel aan te passen om ervoor te zorgen dat elke regel dezelfde lengte heeft. Dit effect heet volledige rechtvaardiging. Tekst uitvullen in CSS met behulp van de tekst-uitlijnen eigendom.

Hoe werkt rechtvaardiging?

De reden dat je vaak een ongelijke rand aan de rechterkant van een tekstblok ziet, is dat elke regel tekst niet even lang is. Sommige regels hebben meer woorden of langere woorden, terwijl andere minder of kortere woorden bevatten. Om dat tekstblok te rechtvaardigen, moeten aan sommige regels extra spaties worden toegevoegd om alle regels gelijk te maken en consistent te maken.

instagram viewer

Elke webbrowser heeft zijn eigen algoritme voor het toepassen van de extra spaties binnen een regel. De browsers kijken naar woordlengte, woordafbreking en andere factoren om te bepalen waar de spaties moeten worden geplaatst. Als gevolg hiervan kan uitgevulde tekst er van browser tot browser niet hetzelfde uitzien. U kunt er echter zeker van zijn dat grote browserondersteuning goed is voor het rechtvaardigen van tekst met CSS.

Tekst uitvullen

Tekst uitvullen met CSS vereist een tekstgedeelte om uit te vullen. Meestal gebruikt u alinea's met tekst, omdat grote blokken tekstcontext die meerdere regels beslaan, worden gemarkeerd met alinea-tags.

Nadat u een tekstblok hebt om uit te vullen, hoeft u alleen maar de stijl in te stellen op uitvullen met de CSS-eigenschap text-align style. Pas deze CSS-regel toe op een geschikte selector om het tekstblok te laten renderen zoals bedoeld.

Wanneer tekst uitvullen?

Veel mensen houden van het uiterlijk van uitgevulde tekst vanuit een ontwerpstandpunt, vooral omdat het een zeer consistent, afgemeten uiterlijk creëert, maar er zijn nadelen aan het volledig uitvullen van tekst op een webpagina.

Ten eerste kan uitgevulde tekst moeilijk te lezen zijn. Dit komt omdat wanneer u tekst uitvult, er soms veel extra ruimte kan worden toegevoegd tussen sommige woorden op de regel. Die inconsistente hiaten kunnen de tekst moeilijker leesbaar maken. Dit is vooral belangrijk op webpagina's, die al moeilijk te lezen zijn vanwege verlichting, resolutie of andere hardwarekwaliteit. Het toevoegen van ongebruikelijke spaties aan de tekst kan een slechte situatie nog erger maken.

Naast de leesbaarheidsuitdagingen, komen de lege ruimtes soms met elkaar overeen om "rivieren" van witruimte in het midden van de tekst te creëren. Die grote gaten in de witruimte kunnen echt voor een ongemakkelijke weergave zorgen. Bovendien kan uitvulling op extreem korte regels regels veroorzaken die één woord bevatten met extra spaties tussen de letters zelf.

Dus wanneer moet u tekstuitvulling gebruiken? De beste tijd om tekst uit te vullen is wanneer de regels lang zijn en de lettergrootte klein is - iets dat moeilijk te garanderen is op responsieve websites waar regellengtes veranderen op basis van schermgroottes. Er is geen vast getal voor de lengte van de regel of de grootte van de tekst; je moet je gezond verstand gebruiken.

Nadat u de tekstuitlijningsstijl hebt toegepast om tekst uit te vullen, test u deze om er zeker van te zijn dat de tekst geen rivieren van witruimte bevat - en test u deze op verschillende formaten. De eenvoudigste test vereist niets ingewikkelder dan je eigen samengeknepen ogen. De rivieren vallen op als witte vlekken in een verder grijs tekstblok. Als u rivieren ziet, moet u de tekstgrootte of de breedte van het tekstblok wijzigen om de tekst opnieuw te laten lopen.

Gebruik de uitvulling alleen nadat u deze heeft vergeleken met links uitgelijnde tekst. U houdt misschien van de consistentie van volledige uitvulling, maar de standaard links uitgelijnde tekst is meestal beter leesbaar. Uiteindelijk moet u tekst rechtvaardigen omdat u ervoor heeft gekozen om de tekst te rechtvaardigen voor ontwerpdoeleinden en hebt bevestigd dat uw site gemakkelijk leesbaar blijft.

instagram story viewer