Meet us at Print 18. Chicago, IL. Sept. 30 - Oct. 2.

Point and 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. Customer's Canvas loads point text as plain text in one style.

A paragraph text layer has a bounding rectangle and is loaded as either rich text with advanced format or bounded text with plain format in Customer's Canvas. The size of the bounding rectangle can be changed in the editor manually. If such a text does not fit the bounding rectangle by height, it is cropped by default. For bounded text, you can enable copyfitting.

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:

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

    The Type Tool in Photoshop.

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

    Some point text.

  3. Click Done when you are finished.

    The Done button.

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 plain text element in the editor, click Add text on the Text menu, on the Toolbox.

The Add text button.

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.

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

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

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.

    The Type Tool in Photoshop.

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

    Some rich text.

  3. Click Done when you are finished.

    The Done button.

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.

The Toggle text orientation option in Photoshop.

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.

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

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.

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

Downloads