Point and Rich (Paragraph) Text

Depending on your task, you can choose one of the two types of text layers available in Photoshop: point or paragraph text. Customer's Canvas can load both of them either vertically or horizontally-oriented (however, users cannot change the orientation that was set in the PSD template). Loaded text layers are placed on the canvas and are available for a user to edit them.

Point text does not have a fixed size, and it does not support automatic hyphenation. If a user changes the text in a point text layer, then it causes its size to change.

Any paragraph text layer is loaded as rich text in Customer's Canvas. Rich text has a fixed size and supports automatic hyphenation and advanced text formatting. If a text in a rich text layer does not fit the bounding rectangle by height, it is cropped. The size of the bounding rectangle can be changed manually.

Warning

In some cases, scaled text may look blurred in Customer's Canvas, unlike the same string with the same font settings in Adobe Photoshop. To prevent such problems, do not apply the scale transform to text layers in your PSD templates. Increase the font size instead.

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:

On the Tools panel, click Type Tool, and then click Horizontal Type Tool or Vertical Type Tool.
Click where you want to place a text, and enter some text. To begin a new line, press enter.
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 Toggle Text Orientation option in Photoshop.

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

The previously created text loaded in the editor.

To create a point text element in the editor, click Add text on the Text menu, on the Left Toolbar.

The Add text button.

A Text Placeholder

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

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. Also, the prompt appears neither in the hi-res output nor on proof images.

Rich (Paragraph) Text

Rich text is a bounded text that allows multiple font styles in a single layer along with advanced paragraph formatting.

In Photoshop, rich text is called paragraph text. To create a paragraph text layer in Photoshop:

On the Tools panel, click Type Tool, and then click Horizontal Type Tool or Vertical Type Tool.
Drag to create a bounding rectangle, then enter some text. To start a new paragraph press Enter.
Click Done when you are finished.

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

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

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

The Toggle text orientation option in Photoshop.

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

The previously created text loaded in the editor.

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 RichTextDialogConfig.createMultiColumnText property 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.

The Vertical alignment buttons.

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 counter. The character counter 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.