HTML and CSS Reference
Font Baseline and Alignment
You have options to align text on HTML5 Canvas both vertically and horizontally.
These alignments affect the text in relation to Canvas itself, but only to the invisible
bounding box that would surround the text's topmost, bottommost, rightmost, and
leftmost sides. This is an important distinction because it means these alignments affect
the text in ways that might be unfamiliar to you.
The font baseline is the vertical alignment of the font glyphs based on predefined hor-
izontal locations in a font's em square (the grid used to design font outlines) in relation
to font descenders. Basically, font glyphs, like lowercase p and y that traditionally ex-
tend “below the line,” have descenders . The baseline tells the canvas where to render
the font based on how those descenders relate to other glyphs in the font face.
The HTML5 Canvas API online has a neat graphic that attempts to explain baseline.
We could copy it here, but in reality, we think it's easier to understand by doing , which
is one of the main reasons we wrote the Text Arranger application.
The options for the context.textBaseline property are:
The top of the text em square and the top of the highest glyph in the font face.
Selecting this baseline will push the text the farthest down (highest y position) the
canvas of all the baselines.
This is a bit lower than the top baseline. It is the horizontal line from which many
glyphs appear to “hang” from near the top of their face.
The dead vertical center baseline. We will use middle to help us vertically center
the text in Text Arranger.
The bottom of vertical writing script glyphs such as Arabic, Latin, and Hebrew.
The bottom of horizontal writing script glyphs such as Han Ideographs, Katakana,
Hiragana, and Hangul.
The bottom of the em square of the font glyphs. Choosing this baseline will push
the font the farthest up (lowest y position) the canvas.
So, for example, if you want to place your text with a top baseline, you would use the
context.textBaseline = "top";