Propriétés logiques pour les flottements et le positionnement

Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.

Propriété ou valeur logique	Propriété ou valeur physique
float: inline-start	float: left
float: inline-end	float: right
clear: inline-start	clear: left
clear: inline-end	clear: right
inset-inline-start	left
inset-inline-end	right
inset-block-start	top
inset-block-end	bottom
text-align: start	text-align: left
text-align: end	text-align: right

En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de inset.

Propriété logique	Objectif
inset-inline	Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.
inset-block	Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.
inset	Cette propriété définit les valeurs des quatre décalages.

Les valeurs physiques utilisées avec les propriétés float et clear sont left, right et both. Les valeurs logiques définies par la spécification sont inline-start et inline-end et qui peuvent correspondre à left et right selon le mode d'écriture.

Dans l'exemple ci-après, on a deux boîtes : la première flotte avec float: left et la deuxième avec float: inline-start. Si on modifie la propriété writing-mode pour la passer en vertical-rl ou si on modifie direction en rtl, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec inline-start suit la direction et le mode d'écriture.

Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques top, right, bottom et left.

Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.

De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :

• inset-block-start
• inset-block-end
• inset-inline-start
• inset-inline-end.

Dans l'exemple qui suit, on utilise les propriétés inset-block-start et inset-inline-end afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a position: relative. En modifiant la propriété writing-mode afin d'utiliser la valeur vertical-rl ou en ajoutant direction: rtl, on pourra voir comment la boîte relative reste dans la direction du texte.

Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.

• inset — elle permet de définir les quatre décalages avec une correspondance physique.
• inset-inline — elle permet de définir les décalages sur l'axe en ligne
• inset-block — elle permet de définir les décalage sur l'axe de bloc

La propriété text-align peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser left et right, on pourra utiliser start et end. Dans l'exemple suivant, on définit text-align: right pour le premier bloc et text-align: end pour le second.

Si on modifie la valeur de direction pour la passer à rtl, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.

Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (start et end) plutôt que des alignements basés sur les directions physiques.