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.

The Design Editor provides two text engines for manipulating text elements. The WYSIWYG text engine, which is enabled by default, allows your users to edit text elements right on the canvas. As an alternative, the Classic text engine uses pop-up boxes for editing plain text and uses the Rich text editor for working with rich formatting. Using the widgets.common.textFormattingEnabled parameter, which is true by default, you can specify whether all text elements will support rich formatting or not. You can also use the <TATF> marker to disallow rich formatting for a single element loaded from a product template.

This topic dwells on the 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 either plain or rich format, depending on the <TATF> marker.

The following screenshot shows point text in the Design Editor.

Point text in the web-to-print editor.

Creating a Text Element in the Editor

To create a point text element in the Design Editor, 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 the User Interface topic.

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. If such a text does not fit the bounding rectangle by height, it is cropped. Bounded text may have columns and wrap around other elements or inside shapes.

The following screenshot shows rich formatted text in the Design Editor.

Rich text in the web-to-print editor.

Creating Bounded Text in the Editor

To allow your users to create bounded text in the editor, you need to enable the Text Block 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 bounded text to the canvas, the one-column text appears by default. To allow them to create multicolumn text using the Classic text engine, 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, the Design Editor allows for limiting a maximum number of characters that users can enter in the Rich Text Editor when using the Classic text engine.

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 bounded text, you can enable copyfitting. In this mode, bounded text appears in plain format. 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.

Common Text Features

Defining Text Formatting in Templates

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

In PSD and IDML templates, you can enable plain formatting for a text element by using <TATF_f>. The <TATF> marker allows you to activate the following modes for text:

<TATF_t> keeps rich text formatting.
<TATF_f> enables plain formatting (if there are various styles in a text element, then the first style is applied to the entire text and the rest styles are ignored).
<TATF_null> enables the formatting that was defined in the widgets.common.textFormattingEnabled parameter.

A Text Placeholder

Text placeholders allow you to specify a prompt that motivates users to fill in a text box. In the Design Editor 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 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 number of lines and characters per line that the user is allowed to enter into plain point text or plain bounded text. The <TMLC> marker defines the maximum line count in a text element. <TMLL> allows you to set up the maximum number of characters per line. 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 pop-up box.

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.

OpenType Features

When you use OpenType features in your PSD and IDML templates, Customer's Canvas applies them to text elements. The following OpenType features are rendered by default if your font supports them:

Contextual Ligatures (Clig)
Cursive Positioning (Curs)
Glyph Composition/Decomposition (Ccmp)
Kerning (Kern)
Localized Forms (Locl)
Mark Positioning (Mark)
Mark to Mark Positioning (Mkmk)
Required Contextual Alternates (Rclt)
Required Ligatures (Rlig)
Standard Ligatures (Liga)

For the full list of supported OpenType features, you can refer to the specification of the Aurigma Graphics Mill library.