Propriétés logiques pour le dimensionnement

Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (horizontal-tb) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique width serait équivalente à la propriété logique inline-size.

Si on utilisait un mode d'écriture vertical, inline-size aurait correspondu à height.

Propriété logique	Propriété physique
inline-size	width
block-size	height
min-inline-size	min-width
min-block-size	min-height
max-inline-size	max-width
max-block-size	max-height

Les propriétés logiques correspondant à width et height sont : inline-size pour la taille sur la dimension en ligne et block-size, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer width par inline-size et height par block-size et on obtiendra le même résultat.

Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec horizontal-tb. En modifiant cette valeur pour la passer à vertical-rl, on verra que le premier exemple, qui utilise width et height, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise inline-size et block-size, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.

Il existe également des propriétés logiques correspondantes pour min-width et min-height : min-inline-size et min-block-size. Celles-ci fonctionnent de la même façon que inline-size et block-size mais paramètrent une taille minimale plutôt qu'une taille fixe.

Dans l'exemple suivant, vous pouvez passer le mode d'écriture en vertical-rl et observer l'effet obtenu. Là encore, on utilise la propriété physique (min-height) sur le premier exemple et la propriété logique (min-block-size) sur le second.

Enfin, on peut utiliser max-inline-size et max-block-size afin de remplacer les propriétés physiques max-width et max-height. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.

La propriété resize définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques horizontal et vertical. La propriété resize peut désormais s'utiliser également avec des valeurs logiques : resize: inline permettra de redimensionner un objet sur l'axe en ligne et resize: block permettra de le redimensionner sur l'axe en bloc.

La valeur both peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.