Text Elements in Customer's Canvas

Customer's Canvas supports such text types as point (a string without a fixed width), bounded, plain, and rich formatted text. This topic dwells on these text types and their features.

Point Text

Point text represents a text block of variable width. Point text does not support automatic text wrapping. If a user changes the text in this element, then it causes the text block width to change. Customer's Canvas loads point text layers from PSD templates in plain format.

The following screenshot shows point text in the editor.

Point text in the web-to-print editor.

Creating a Text Element in the Editor

To create a plain text element in Customer's Canvas, click Add text on the Text menu, on the Toolbox.

The Add text button.

Note, this is the default configuration of the Toolbox. To configure a custom toolbox, refer to the Customizing User Interface topic.

A Text Placeholder

Text placeholders allow you to specify a prompt that motivates users to fill in a text box. In Customer's Canvas they look as follows:

The text placeholder.

In this example, you can see that the Type a name prompt does not act as a regular text string, and the user does not have to remove it before entering their own text.

You can enable a placeholder by using the <TPH> marker in either a Photoshop or InDesign template.

In the case where a user leaves the placeholder unfilled, the prompt does not appear in the hi-res output. However, you may want to indicate on proof images that the placeholder should contain a text. To enable this, set the rendering.proofImageShowStubContent property to true in clientConfig.json.

Character and Line Count

You can specify the maximum count and length of text lines, which the user is allowed to enter into a specific point or bounded text layer. The <TMLC> marker defines the maximum line count in a point text element. <TMLL> allows you to set up the maximum length of text lines. For example, if you add the <TMLL_10><TMLC_2> markers to a layer name, you can observe the following counter in the lower-right corner of the text popup.

The point text limits for a number of characters and lines.

If you do not specify these markers, the user is allowed to enter as many characters and lines as they want.

Bounded Text

In contrast to point text, bounded text takes a rectangular area and has a fixed width and height. Users can change the size of the bounding rectangle and rich formatting in the editor. If such a text does not fit the bounding rectangle by height, it is cropped. This text type has additional features: rich formatting, autofit, text wrapping, and more. Let us discuss them in detail.

Rich Formatted Bounded Text

Customer's Canvas loads paragraph text layers from Photoshop and text frames from InDesign as rich formatted bounded text by default.

This text type uses a special editor allowing your users to specify an individual style for every character. You can configure this Rich text editor. For example, you can disable irrelevant controls, enable the WYSIWYG mode, and more. Rich formatted bounded text may have columns and wrap around other elements or inside shapes.

The following screenshot shows rich formatted text in Customer's Canvas.

Rich text in the web-to-print editor.

To create a rich formatted text element in the editor, click the Rich text command on the Text menu.

Plain Bounded Text

This text type has bounds but uses the same editor as point text.

Plain bounded text in the web-to-print editor.

In PSD and IDML templates, you can activate this mode by using <RT_false>. The <RT> marker activates the following modes for bounded text:

<RT_true> keeps rich text formatting.
<RT_false> enables plain formatting (if there are different styles in a text element, then the first style is applied to the entire text and the rest are ignored).
<RT_auto> keeps rich text format only if this layer contains different styling.

Also, Customer's Canvas activates this mode when you enable copyfitting.

Creating Plain Bounded Text in the Editor

To allow your users to create bounded text in the editor, you need to enable the Bounded text command in the Toolbox. You can do this by adding the BoundedText action to the Toolbox.buttons array in clientConfig.json.

The Add bounded text button.

Multicolumn Text

When your users add rich formatted text to the canvas, the one-column text appears by default. To allow them to create multicolumn text with rich formatting, set the createMultiColumnText property to true. You can define this configuration parameter in clientConfig.json or through IConfiguration.

Customer's Canvas supports multicolumn text imported from InDesign templates. In Photoshop templates, you can enable columns by using the <TCC> marker.

Vertical Alignment

From the Top Toolbar, you can vertically align both rich formatted and plain bounded text types within their bounds.

The Vertical alignment buttons.

To specify vertical alignment in PSD or IDML templates, add the <TVA_xxx> marker to a text element. There are top, center, and bottom values available for this marker. For example, <TVA_top> automatically aligns text with the top bound of the layer.

<TVA_xxx> is ignored if the layer contains the <TCC> marker defining a column count or the <PBT> marker getting the text wrapped inside a shape. If any of these markers are used in a paragraph layer name, the text string is aligned with the upper bound and the alignment cannot be changed. The default value is top; it is used if a layer name does not contain <TVA>.

Character Count

For rich formatted text, unlike point and plain bounded text, you cannot limit the number of lines. Instead, Customer's Canvas allows for limiting a maximum number of characters that users can enter in the Rich Text Editor.

The <TCL_n> marker enables this feature for rich formatted text in PSD and IDML templates, where n is a maximum possible number of characters allowed in the corresponding element. For example, <TCL_200> allows users to enter up to 200 characters. It will not accept any new characters if the user reaches the limit.

The character counter. The character counter reaches the limit.

The character count turns red if a user reaches the limit.

Copyfitting

For plain bounded text, you can enable copyfitting. The <TOS> marker defines how to change the text if it goes out of its bounds. For example, Customer's Canvas can crop it or fit it into the bounding rectangle. You can specify how to shrink such text - by either scaling the text or changing the font size - by using the <TSM> marker.