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.