Canvas element has only basic supports for text, making it difficult to create and experiment with typographic layouts. Pts provides additional functions to help you position text contents on canvas. In this guide, we will take a look at these features.
First, specify a rectangular area (specified by a
Group) and a text string. Optionally, you can also specify where the text should be placed vertically, as well as the characters used for abbreviation when the text truncates. For example:
form.textBox( area, "hello world", "bottom", "..." );
Below is a demo of truncated text at placed at top, middle, and bottom of a a rectangle. Move your pointer over to change the size of the area.
Canvas API already provides
textAlign for text alignments. Pts makes these more convenient via
alignText function. Use it with
textBox to position your text within a rectangular area.
textBoxgives you lots of options to organize your typographic layout.
form.paragraphBox( area, "hello world", 1.5, "middle" );
The text overflow will be cropped by default. If you prefer to let them overflow, set the
crop parameter to
false. If your text contains multiple paragraphs, you may separate them with line breaks (
\n). For example:
form.paragraphBox( area, "hello \n\n world", 1.5, "middle", false );
The following demo shows 2 paragraphs with different line-height and alignments and no crop.
For long paragraphs, you may consider using
fontWidthEstimate. This will use a simple heuristic to estimate text width, which is less accurate but may be faster.
Hope these functions will give you more control over text on canvas, especially when you want to play with typographic experiments. However, putting text on canvas may not be a good approach in many cases. For example, it has poor accessibility (cannot be read for screen reader) and cannot be indexed by search engines.
And we will be adding similar functions to support for SVG text too. Stay tuned!
The text layout functions are currently implemented in
// put text content in an area defined by a Group form.textBox( area, content ); // put in bottom, use "..." when truncated form.textBox( area, content, "bottom", "..." ); // align text before putting into textBox form.alignText("left", "top").textBox( area, content ); // put multi-line text in a box with line-height of 1.5 form.paragraphBox( area, content, 1.5 ); // multi-line text center aligned, place in middle and allow overflow form.alignText("center").paragraphBox( area, content, 1.5, "middle", false ); // Use heuristics to estimate font width form.fontWidthEstimate(true).paragraphBox( area, content );