Posición, tamaño, origen, rotación
Colocar un componente exactamente donde se quiere.
pos y origin van siempre juntos
Es el punto que hay que entender antes que nada, porque los dos no hablan de lo mismo:
pos— dónde, en la PANTALLA, se coloca el componente.origin— qué punto DEL COMPONENTE se coloca en ese sitio.
Uno es una posición en la pantalla, el otro un punto del componente. Es el encuentro de ambos lo que decide dónde aparece el componente.
pos — una posición en la pantalla
<pos>0.1 0.2</pos>Estos dos números se miden desde la esquina superior izquierda de la pantalla: 0 0 es esa esquina, 1 1 la esquina inferior derecha.
Lo más sencillo es leerlos como porcentajes — es exactamente lo mismo: 0.1 = 10 %, 0.2 = 20 %, 0.5 = 50 %. Así que pos 0.1 0.2 es 10 % del ancho y 20 % de la altura.
pos no dice nada del componente en sí: es un simple punto en la pantalla. Lo que decide qué parte del componente se posa ahí es origin.
origin — qué punto DEL COMPONENTE
origin responde a la otra mitad de la pregunta: ahora que sabemos dónde en la pantalla, ¿qué parte del componente viene a posarse ahí?
Estos nueve valores son los más corrientes, pero cualquier pareja entre 0 y 1 funciona:
Por defecto, origin vale 0 0 — la esquina superior izquierda del componente. Por eso un componente sin origin se extiende hacia la derecha y hacia abajo desde su pos.
El ejemplo que lo aclara todo
Tomemos una imagen apaisada en una pantalla 16:9:
<pos>0.5 0.5</pos>
<origin>1 1</origin>pos 0.5 0.5 es el centro de la pantalla. Se podría creer que la imagen quedará centrada. No lo está: origin 1 1 designa la esquina inferior derecha de la imagen, y es esa esquina la que se posa en el centro.
La imagen queda por tanto entera arriba a la izquierda del centro.
Para centrar de verdad
<pos>0.5 0.5</pos>
<origin>0.5 0.5</origin>Esta vez es el centro de la imagen lo que se posa en el centro de la pantalla.
La tabla completa
origin | El punto del componente posado sobre pos |
|---|---|
0 0 | esquina superior izquierda — el valor por defecto |
0.5 0 | centro del borde superior |
1 0 | esquina superior derecha |
0 0.5 | centro del borde izquierdo |
0.5 0.5 | el centro |
1 0.5 | centro del borde derecho |
0 1 | esquina inferior izquierda |
0.5 1 | centro del borde inferior |
1 1 | esquina inferior derecha |
Para qué sirve realmente
Sin origin, todo componente se coloca por su esquina superior izquierda: para centrar algo habría que calcular 0.5 − ancho/2, y recalcular cada vez que el ancho cambia.
Con origin, ya no se calcula nada:
| Lo que se quiere | pos | origin |
|---|---|---|
| centrado en pantalla | 0.5 0.5 | 0.5 0.5 |
| pegado al borde derecho | 1 … | 1 … |
| pegado al borde inferior | … 1 | … 1 |
| centrado abajo | 0.5 1 | 0.5 1 |
Es especialmente útil para un logotipo de sistema, cuyo ancho cambia de una máquina a otra: con origin, queda alineado pase lo que pase.
size — el tamaño impuesto
<size>0.3 0.2</size>El componente hace exactamente ese tamaño. Para una imagen, eso significa que se deforma para llenar la caja.
Dar solo uno
Pon 0 en el otro: la dimensión que falta se calcula para conservar las proporciones.
<size>0.3 0</size> <!-- 30 % de ancho, altura proporcional -->⚠️ No es lo mismo que keepratio o maxSize, aunque ambos conserven las proporciones:
| Escritura | Lo que se garantiza |
|---|---|
size 0.3 0 | el ancho hace exactamente 30 %; la altura sigue, sea cual sea — puede desbordar |
maxSize 0.3 0.2 | la imagen cabe en la caja: gana la dimensión más restrictiva, el ancho puede por tanto reducirse |
Dicho de otro modo: size con un cero impone una restricción, maxSize impone dos.
maxSize — el tamaño máximo, sin deformar
<maxSize>0.3 0.2</maxSize>La imagen se agranda o se reduce conservando sus proporciones para caber en la caja. Por tanto rara vez ocupa toda su superficie.
Para un logotipo de sistema, casi siempre lo que hace falta es
maxSize. Los logotipos no tienen la misma forma de una máquina a otra: consize, algunos quedarían aplastados.
size acompañado de keepratio da el mismo resultado que maxSize — y suele ser la escritura preferida, porque dice el tamaño deseado en lugar de un límite:
<size>0.3 0.2</size>
<keepratio>true</keepratio> <!-- ⚠️ todo en minúsculas -->maxSize solo existe en image y video.
rotation y rotationOrigin
<rotation>90</rotation>
<rotationOrigin>0.5 0.5</rotationOrigin>rotation está en grados, sentido horario. rotationOrigin designa el punto alrededor del cual pivota el componente, en sus propias proporciones. Sin rotationOrigin, el pivote es la esquina superior izquierda (0 0) — escribe 0.5 0.5 para girar alrededor del centro.
La rotación se aplica a las imágenes, los bloques de color, los vídeos y los bloques Markdown. Un texto girado se dibuja con inclinaciones pequeñas pero desaparece a 90°; un texto deslizante girado solo dibuja su fondo, nunca su texto. Para un título vertical, pasa por una imagen o un bloque Markdown.
La profundidad (
zIndex) y el apagado (disabled) tienen su propia página: Profundidad y visibilidad.