Position, taille, origine, rotation
Placer un composant exactement où on veut.
pos et origin vont toujours ensemble
C’est le point qu’il faut avoir compris avant tout le reste, parce que les deux ne parlent pas de la même chose :
pos— où, dans l’ÉCRAN, on pose le composant.origin— quel point DU COMPOSANT on pose à cet endroit.
L’un est une position dans l’écran, l’autre un point du composant. C’est la rencontre des deux qui décide de l’endroit où le composant apparaît.
pos — une position dans l’écran
<pos>0.1 0.2</pos>Ces deux nombres se mesurent depuis le coin haut-gauche de l’écran : 0 0 est ce coin, 1 1 le coin bas-droit.
Le plus simple est de les lire comme des pourcentages — c’est exactement la même chose : 0.1 = 10 %, 0.2 = 20 %, 0.5 = 50 %. Donc pos 0.1 0.2, c’est 10 % de la largeur et 20 % de la hauteur.
pos ne dit rien du composant lui-même : c’est un simple point dans l’écran. Ce qui décide de quelle partie du composant vient s’y poser, c’est origin.
origin — quel point DU COMPOSANT
origin répond à l’autre moitié de la question : maintenant qu’on sait où dans l’écran, quelle partie du composant vient s’y poser ?
Ces neuf valeurs sont les plus courantes, mais n’importe quelle paire entre 0 et 1 fonctionne :
Par défaut, origin vaut 0 0 — le coin haut-gauche du composant. C’est pour cela qu’un composant sans origin s’étend vers la droite et vers le bas à partir de sa pos.
L’exemple qui fait tout comprendre
Prenons une image paysage dans un écran 16:9 :
<pos>0.5 0.5</pos>
<origin>1 1</origin>pos 0.5 0.5, c’est le centre de l’écran. On pourrait croire que l’image y sera centrée. Elle ne l’est pas : origin 1 1 désigne le coin bas-droit de l’image, et c’est ce coin-là qu’on vient poser au centre.
L’image se retrouve donc entièrement en haut à gauche du centre.
Pour centrer vraiment
<pos>0.5 0.5</pos>
<origin>0.5 0.5</origin>Cette fois c’est le centre de l’image qu’on pose au centre de l’écran.
Le tableau complet
origin | Le point du composant posé sur pos |
|---|---|
0 0 | coin haut-gauche — la valeur par défaut |
0.5 0 | milieu du bord haut |
1 0 | coin haut-droit |
0 0.5 | milieu du bord gauche |
0.5 0.5 | le centre |
1 0.5 | milieu du bord droit |
0 1 | coin bas-gauche |
0.5 1 | milieu du bord bas |
1 1 | coin bas-droit |
À quoi ça sert vraiment
Sans origin, tout composant est posé par son coin haut-gauche : pour centrer quelque chose, il faudrait calculer 0.5 − largeur/2, et recalculer à chaque fois que la largeur change.
Avec origin, on ne calcule plus rien :
| Ce qu’on veut | pos | origin |
|---|---|---|
| centré à l’écran | 0.5 0.5 | 0.5 0.5 |
| collé au bord droit | 1 … | 1 … |
| collé au bord bas | … 1 | … 1 |
| centré en bas | 0.5 1 | 0.5 1 |
C’est particulièrement utile pour un logo de système, dont la largeur change d’une machine à l’autre : avec origin, il reste aligné quoi qu’il arrive.
size — la taille imposée
<size>0.3 0.2</size>Le composant fait exactement cette taille. Pour une image, cela veut dire qu’elle est déformée pour remplir la boîte.
N’en donner qu’une seule
Mettez 0 à l’autre : la dimension manquante se calcule pour conserver les proportions.
<size>0.3 0</size> <!-- 30 % de large, hauteur proportionnelle -->⚠️ Ce n’est pas la même chose que keepratio ou maxSize, même si les deux conservent les proportions :
| Écriture | Ce qui est garanti |
|---|---|
size 0.3 0 | la largeur fait exactement 30 % ; la hauteur suit, quelle qu’elle soit — elle peut déborder |
maxSize 0.3 0.2 | l’image tient dans la boîte : la dimension la plus contraignante gagne, la largeur peut donc être réduite |
Autrement dit : size avec un zéro impose une contrainte, maxSize en impose deux.
maxSize — la taille maximale, sans déformer
<maxSize>0.3 0.2</maxSize>L’image est agrandie ou réduite en conservant ses proportions pour tenir dans la boîte. Elle en occupe donc rarement toute la surface.
Pour un logo de système, c’est presque toujours
maxSizequ’il faut. Les logos n’ont pas la même forme d’une machine à l’autre : avecsize, certains seraient écrasés.
size accompagné de keepratio donne le même résultat que maxSize — et c’est souvent l’écriture qu’on préfère, parce qu’elle dit la taille voulue au lieu d’une limite :
<size>0.3 0.2</size>
<keepratio>true</keepratio> <!-- ⚠️ tout en minuscules -->maxSize n’existe que sur image et video.
rotation et rotationOrigin
<rotation>90</rotation>
<rotationOrigin>0.5 0.5</rotationOrigin>rotation est en degrés, sens horaire. rotationOrigin désigne le point autour duquel le composant pivote, dans ses propres proportions. Sans rotationOrigin, le pivot est le coin haut-gauche (0 0) — écrivez 0.5 0.5 pour tourner autour du centre.
La rotation s’applique aux images, aux blocs de couleur, aux vidéos et aux blocs Markdown. Un texte tourné se dessine aux petites inclinaisons mais disparaît à 90° ; un texte défilant tourné ne dessine que son fond, jamais son texte. Pour un titre vertical, passez par une image ou un bloc Markdown.
La profondeur (
zIndex) et l’extinction (disabled) ont leur propre page : Profondeur et visibilité.