Calibrate
Contact

Hoe mijn site lay-out zich aanpast aan de leesrichting van elke gebruiker

Thomas De Vriese

Thomas De Vriese

Front-end developer

Als front-end ontwikkelaar ben je voortdurend op zoek naar manieren om efficiënter te werken en om de gebruikservaring van de bezoeker te verbeteren. Eén van de manieren om dit te bereiken, is door gebruik te maken van CSS logical properties and values. Deze eigenschappen bieden niet alleen een meer intuïtieve manier om elementen te stijlen, ze dragen ook bij aan een betere code-opmaak en bovendien geven ze een meerwaarde aan de gebruiker.

Flexibiliteit in tekstoriëntatie

Eén van de grootste voordelen van logische CSS-eigenschappen is dat ze zich aan passen aan verschillende schrijf- en leesrichtingen. In plaats van specifieke eigenschappen te gebruiken voor links-naar-rechts (LTR) en rechts-naar-links (RTL) talen, worden nu de logische assen automatisch aangepast. Inhoud met “tekst-align: start” zal in een LTR taal links uitgelijnd worden en met dezelfde code zal deze tekst in een RTL taal zich rechts uitlijnen.

In plaats van te vertrouwen op fysische richtingen, past de logica zich automatisch aan de context van de gebruiker. Ongeacht de taal of tekstrichting, zorgt dit voor een consistent uiterlijk en voor duidelijke, makkelijk te onderhouden code.

Wat zijn 'logical properties and values'?

Traditioneel bepalen we de afmetingen van elementen op een website met fysische eigenschappen. Zo hebben ze een hoogte en een breedte of kunnen we elementen positioneren van boven naar onder en van links naar rechts. Maar ook marges, padding, border-radius en alignment worden met fysische eigenschappen bepaald. Met CSS Logical properties and values koppelen we de oriëntatie van elementen aan twee logische assen.

logical

Block & inline

De as van de leesrichting is de “inline” as en daarop staat de “block” as. Iedere as heeft een “start” en een “end” punt.

Zo wordt bijvoorbeeld “width” nu “inline-size”, “height” wordt “block-size” en “padding-top” wordt “padding-block-start”.

Betere ondersteuning voor internationale websites

Websites evolueren en richten zich meer en meer op een wereldwijd publiek. Met een groeiende vraag naar meertalige en internationale websites is het gebruik van 'logical properties and values' van essentieel belang. Door het aanpassen van het “dir” attribuut, zal de lay-out zich aanpassen aan de leesrichting. Extra aanpassingen na een vertaling naar een RTL-taal blijven beperkt. 

<html dir=”ltr”>
<html dir=”rtl”>

Het “dir” attribuut informeert browsers dat de inhoud in LTR of in RTL-modus moet worden weergegeven. Dit attribuut werd vroeger ook gebruikt om voor elke CSS-klasse de specifieke stijling voor RTL aan te passen.

Voorbeeld hoe het vroeger was:

.quote {
  margin-left: 1rem; /* LTR */
}

[dir="rtl"] .quote {
  margin-left: 0;
  margin-right 1rem; /* RTL*/
}

Met 'logical properties and values' kan dit nu in één regel code:

.quote {
  margin-inline-start: 1rem;
}

Meer voorbeelden van logische CSS-eigenschappen

/* height: 1rem; */
block-size: 1rem; 

/* max-width: 1rem; */
max-inline-size: 1rem;

/* text-align: right; */
text-align: end;

/* right: 1rem; */
inset-inline-end: 1rem;

/* border-bottom-width: 1rem; */
border-block-end-width: 1rem;

/* padding-left: 1rem; */
padding-inline-start: 1rem;

/* border-top-right-radius: 1rem; */
border-start-end-radius: 1rem;
left

De lay-out past zich nu aan de leesrichting aan

Left to right lay-out:

right

Right to left lay-out:

Tips voor het schrijven van goede RTL CSS

  • Gebruik logische eigenschappen van bij de start van een project en gebruik ze overal. Wanneer er nog enkele fysische CSS declaraties in het project staan, zal dit een ongewenst effect geven in een RTL omgeving. Test daarom voldoende.
  • Bij het aanpassen van de leesrichting krijgen enkel CSS properties die te maken hebben met lay-out en tekst flow een ander visueel resultaat. Iconen of shadows zullen, zonder extra code, gewoon hun weergave behouden.
  • Afbeeldingen en pictogrammen moeten mogelijk worden aangepast in RTL-lay-outs om de visuele balans en context te behouden. Met de :dir pseudo klasse kunnen we ook voor properties die met paint te maken hebben, de richting aanpassen.
    :where(.breadcrumbs, .pager):dir(ltr) svg {
  scale: -1 1;
}
  • Lay-outs opgemaakt met flexbox en grid passen zich ook aan de leesrichting aan, wat ook flexbox en grid maken gebruik van de logische “inline” en “block” assen.

Conclusie

Het gebruik van 'logical properties and values' biedt tal van voordelen voor ontwikkelaars, variërend van flexibiliteit en onderhoudsgemak tot verbeterde internationale ondersteuning en toekomstbestendigheid. Door deze aanpak te omarmen, kun je efficiënter werken en hoogwaardige webervaringen leveren aan een wereldwijd publiek.