Alignment — the 3×3 grid
Places the text inside its own layer. Each cell is labelled h / v, and sits where it says.
hAlign | 'start' · 'center' · 'end' |
|---|
vAlign | 'start' · 'center' · 'end' |
|---|
| aliases | 'left'/'right', 'top'/'middle'/'bottom' — exact synonyms, kept for existing code |
|---|
| defaults | hAlign: 'center', vAlign: 'middle' — so text centers unless you say otherwise |
|---|
Alignment is applied to the ink box (the glyphs actually drawn), not the
font's design box. So 'end' puts the lowest ink on the bottom edge: a word
with a descender rides its baseline higher than one without.
Manual positioning — the right column
An explicit coordinate overrides the alignment on that axis, and only that axis.
left / top | pixels (4) or a percentage string ('25%', resolved against the layer's own size). Unset by default. |
|---|
| mixing | {hAlign: 'center', top: 3} — centers horizontally, pins vertically. |
|---|
hOffset / vOffset | added after whichever mode placed the text, so they nudge an aligned position just as well as an explicit one. |
|---|
textBaseline | decides what an explicit top anchors. With the default 'top' it's the top of the em square, which sits slightly above the ink. |
|---|
The cells above inset their text by a few dots via the offsets: alignment puts the ink
flush against the edge, and a layer's borderWidth is drawn over its
content — it does not push the text inward the way outlineWidth does.