Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.

Lorsqu'on définit la taille d'un objet,la spécification sur les propriétés et les valeurs logiques permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurslogiques, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeursphysiques en combinaison avec ces propriétés et ces valeurs logiques.

Correspondances pour les dimensions

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é physiquewidth serait équivalente à la propriété logiqueinline-size.

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

Exemple pourwidth etheight

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

Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avechorizontal-tb. En modifiant cette valeur pour la passer àvertical-rl, on verra que le premier exemple, qui utilisewidth etheight, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utiliseinline-size etblock-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é.

Exemple pourmin-width etmin-height

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

Dans l'exemple suivant, vous pouvez passer le mode d'écriture envertical-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.

Exemple pourmax-width etmax-height

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

Mots-clés logiques pourresize

La propriétéresize définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiqueshorizontal etvertical. 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 etresize: block permettra de le redimensionner sur l'axe en bloc.

La valeurboth 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.