Position, Größe, Ursprung, Rotation
Eine Komponente genau dort platzieren, wo man sie will.
pos und origin gehören immer zusammen
Das ist der Punkt, den man vor allem anderen verstanden haben muss, denn die beiden sprechen nicht über dasselbe:
pos— wo, auf dem BILDSCHIRM, die Komponente platziert wird.origin— welcher Punkt DER KOMPONENTE dort platziert wird.
Das eine ist eine Position auf dem Bildschirm, das andere ein Punkt der Komponente. Das Zusammentreffen beider entscheidet, wo die Komponente erscheint.
pos — eine Position auf dem Bildschirm
<pos>0.1 0.2</pos>Diese zwei Zahlen messen sich von der oberen linken Ecke des Bildschirms: 0 0 ist diese Ecke, 1 1 die untere rechte.
Am einfachsten liest man sie als Prozentwerte — es ist genau dasselbe: 0.1 = 10 %, 0.2 = 20 %, 0.5 = 50 %. pos 0.1 0.2 heißt also 10 % der Breite und 20 % der Höhe.
pos sagt nichts über die Komponente selbst: Es ist ein bloßer Punkt auf dem Bildschirm. Was entscheidet, welcher Teil der Komponente dort landet, ist origin.
origin — welcher Punkt DER KOMPONENTE
origin beantwortet die andere Hälfte der Frage: Jetzt, da wir wissen wo auf dem Bildschirm — welcher Teil der Komponente legt sich dorthin?
Diese neun Werte sind die gebräuchlichsten, aber jedes Paar zwischen 0 und 1 funktioniert:
Standardmäßig ist origin 0 0 — die obere linke Ecke der Komponente. Deshalb erstreckt sich eine Komponente ohne origin von ihrer pos aus nach rechts und nach unten.
Das Beispiel, das alles erklärt
Nehmen wir ein Querformat-Bild auf einem 16:9-Bildschirm:
<pos>0.5 0.5</pos>
<origin>1 1</origin>pos 0.5 0.5 ist die Bildschirmmitte. Man könnte glauben, das Bild werde dort zentriert. Ist es nicht: origin 1 1 bezeichnet die untere rechte Ecke des Bildes, und diese Ecke wird in die Mitte gelegt.
Das Bild landet also vollständig oben links von der Mitte.
Um wirklich zu zentrieren
<pos>0.5 0.5</pos>
<origin>0.5 0.5</origin>Diesmal wird die Bildmitte in die Bildschirmmitte gelegt.
Die vollständige Tabelle
origin | Der auf pos gelegte Punkt der Komponente |
|---|---|
0 0 | obere linke Ecke — der Standardwert |
0.5 0 | Mitte der Oberkante |
1 0 | obere rechte Ecke |
0 0.5 | Mitte der linken Kante |
0.5 0.5 | die Mitte |
1 0.5 | Mitte der rechten Kante |
0 1 | untere linke Ecke |
0.5 1 | Mitte der Unterkante |
1 1 | untere rechte Ecke |
Wofür das wirklich gut ist
Ohne origin wird jede Komponente an ihrer oberen linken Ecke platziert: Um etwas zu zentrieren, müsste man 0.5 − Breite/2 rechnen — und jedes Mal neu rechnen, wenn sich die Breite ändert.
Mit origin rechnet man gar nichts mehr:
| Was man will | pos | origin |
|---|---|---|
| auf dem Bildschirm zentriert | 0.5 0.5 | 0.5 0.5 |
| am rechten Rand angedockt | 1 … | 1 … |
| am unteren Rand angedockt | … 1 | … 1 |
| unten zentriert | 0.5 1 | 0.5 1 |
Besonders nützlich für ein System-Logo, dessen Breite von Maschine zu Maschine wechselt: Mit origin bleibt es ausgerichtet, egal was kommt.
size — die vorgegebene Größe
<size>0.3 0.2</size>Die Komponente hat genau diese Größe. Für ein Bild heißt das: Es wird verzerrt, um die Box zu füllen.
Nur eine angeben
Setze die andere auf 0: Die fehlende Dimension wird berechnet, um die Proportionen zu erhalten.
<size>0.3 0</size> <!-- 30 % breit, proportionale Höhe -->⚠️ Das ist nicht dasselbe wie keepratio oder maxSize, auch wenn beide die Proportionen erhalten:
| Schreibweise | Was garantiert ist |
|---|---|
size 0.3 0 | die Breite beträgt genau 30 %; die Höhe folgt, wie auch immer — sie kann überlaufen |
maxSize 0.3 0.2 | das Bild passt in die Box: die einschränkendere Dimension gewinnt, die Breite kann also schrumpfen |
Anders gesagt: size mit einer Null setzt eine Schranke, maxSize setzt zwei.
maxSize — die Maximalgröße, ohne Verzerrung
<maxSize>0.3 0.2</maxSize>Das Bild wird unter Erhalt seiner Proportionen vergrößert oder verkleinert, um in die Box zu passen. Es füllt sie daher selten ganz aus.
Für ein System-Logo ist fast immer
maxSizerichtig. Logos haben nicht von Maschine zu Maschine dieselbe Form: Mitsizewürden manche plattgedrückt.
size zusammen mit keepratio ergibt dasselbe wie maxSize — und ist oft die bevorzugte Schreibweise, weil sie die gewollte Größe nennt statt einer Grenze:
<size>0.3 0.2</size>
<keepratio>true</keepratio> <!-- ⚠️ alles klein geschrieben -->maxSize existiert nur auf image und video.
rotation und rotationOrigin
<rotation>90</rotation>
<rotationOrigin>0.5 0.5</rotationOrigin>rotation ist in Grad, im Uhrzeigersinn. rotationOrigin bezeichnet den Punkt, um den die Komponente dreht, in ihren eigenen Proportionen. Ohne rotationOrigin ist der Drehpunkt die obere linke Ecke (0 0) — schreibe 0.5 0.5, um um die Mitte zu drehen.
Die Rotation gilt für Bilder, Farbblöcke, Videos und Markdown-Blöcke. Ein gedrehter Text zeichnet sich bei kleinen Neigungen, verschwindet aber bei 90°; ein gedrehter Lauftext zeichnet nur seinen Hintergrund, nie seinen Text. Für einen vertikalen Titel nimm ein Bild oder einen Markdown-Block.
Die Tiefe (
zIndex) und das Abschalten (disabled) haben ihre eigene Seite: Tiefe und Sichtbarkeit.