Point and Paragraph Text

Point Text

Any point text area should be uniformly formatted to be loaded correctly in Customer's Canvas. If there are different font styles applied to a layer of that type, the first style is applied to the entire text and the other ones are ignored.

To create a point text layer in Photoshop:

1. On the Tools panel, click Type Tool, and then click Horizontal Type Tool or Vertical Type Tool.

   

2. Click where you want to place a text, and enter some text. To begin a new line, press enter.

   

3. Click Done when you are finished.

   

You can convert point text to paragraph text. To perform this, right-click a point text layer, and then click Convert to Paragraph Text.

To toggle between horizontal and vertical orientation, in the Options Bar, click Toggle text orientation.

The following screenshot shows the previously created text loaded into the editor.

To create a plain text element in the editor, click Add text on the Text menu, on the Toolbox.

A Text Placeholder

Text placeholders allow you to specify a prompt that motivates users to fill in a text box. You can enable a placeholder with the <TPH> marker. Set the prompt in a text layer in Photoshop, and then it appears on the canvas and in the Object Inspector.

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. Also, the prompt does not appear in the hi-res output. To enable prompts on proof images, set the rendering.proofImageShowStubContent property to true in clientConfig.json.

Character 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.

Paragraph Text

Paragraph text, unlike point text, has bounds. Customer's Canvas loads paragraph text as either rich or plain bounded text. Rich text allows multiple font styles in a single layer along with advanced paragraph formatting whereas plain bounded text has one style for a layer. By default, the editor handles paragraph text as rich text.

To create a paragraph text layer in Photoshop:

1. On the Tools panel, click Type Tool, and then click Horizontal Type Tool or Vertical Type Tool.

   

2. Drag to create a bounding rectangle, then enter some text. To start a new paragraph, press Enter.

   

3. Click Done when you are finished.

   

You can convert paragraph text to point text. To perform this, right-click a paragraph text layer, and then click Convert to Point Text. In the same way, you can convert point text to paragraph text.

To toggle between horizontal and vertical orientation, in the Options Bar, click Toggle text orientation.

You can add the <TPH> marker to a name of a paragraph layer to enable a text placeholder.

By using the <RT> marker, you can specify how Customer's Canvas should handle paragraph text:

• <RT_true> keeps rich text formatting.
• <RT_false> enables plain formatting.
• <RT_auto> keeps rich text format only if this layer contains different styling.

Rich Text in Customer's Canvas

The following screenshot shows the previously created text loaded into the editor as rich text.

To create a rich text layer in the editor, click the Rich text command on the Text menu. By default, the one-column text will be added. To create multicolumn rich text, the createMultiColumnText property of the Rich Text editor should be set to true. This could be done in clientConfig.json or through IConfiguration.

Vertical Alignment

You can vertically align rich text within its bounds from the Top Toolbar.

Add the <TVA_xxx> marker to a rich text layer to set a default text alignment mode. 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 rich text 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

Customer's Canvas allows for limiting a maximum number or characters that users can type into a specific rich text layer. The <TCL_n> marker enables this feature for rich text layers in PSD templates, where n is a maximum possible number of characters allowed in the 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 count turns red if a user reaches the limit.

Text Wrapping

One more great feature of rich text is the support for text wrapping, which allows for inserting an image into a text area. For more information see the Text Wrapping topic.

Plain Bounded Text in Customer's Canvas

In Photoshop, you can create plain bounded text as follows:

• If you add <TOS_FitToWidth> or <TOS_FitToBox> to the layer name, then paragraph layer appears as plain text with the copyfitting feature enabled.
• If you add the <RT_false> marker, Customer's Canvas converts this paragraph layer to plain text.

If there are different font styles applied to this layer, then the first style is applied to the entire text and the other ones are ignored.

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

Also, you may want to limit the number of lines or characters per line that your users can enter into this design element. In this case, you can use the <TMLC> and <TMLL> markers. For example, <TMLC_3><TMLL_15> limit the user input by three lines of 15 characters each.

You can enable the copyfitting feature to avoid changing the bounds of the original text area, regardless of user input.

See Also

Manual

• Copyfitting
• Text Wrapping
• Rich Text Editor
• Multi-Column Text

Downloads

• Point text sample
• Paragraph text sample