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 that 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 horizontal
locations in a font's
em square
(the grid used to design font outlines) in relation to font
des-
cenders
. Basically, font glyphs like lowercase
p
and
y
that traditionally extend “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.
TheHTML5CanvasAPIonlinehasaneatgraphicthatattemptstoexplainbaseline.Wecould
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 as follows:
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.
