HTML and CSS Reference
In-Depth Information
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.
Vertical alignment
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:
top
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.
hanging
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.
middle
The dead vertical center baseline. We will use
middle
to help us vertically center
the text in Text Arranger.
alphabetic
The bottom of vertical writing script glyphs such as Arabic, Latin, and Hebrew.
ideographic
The bottom of horizontal writing script glyphs such as Han Ideographs, Katakana,
Hiragana, and Hangul.
bottom
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
following code:
context.textBaseline = "top";
