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.
A paragraph text layer has a fixed size and supports automatic hyphenation and advanced text formatting. If a text in a paragraph text layer does not fit the bounding rectangle by height, it is cropped. The size of the bounding rectangle can be changed in the editor manually. Customer's Canvas handles paragraph text as either rich or plain text. Rich text supports advanced formatting and the wrapping feature, whereas plain bounded text has a plain format and provides copyfitting.
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 following screenshot shows the previously created text loaded into the editor.
To create a point 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 is a bounded text that allows multiple font styles in a single layer along with advanced paragraph formatting.
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 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 <TOS> and <RT> markers, you can define how Customer's Canvas will handle the corresponding paragraph layer - as rich or plain text. By default, rich text opens.
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 just 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 upto three lines of 15 characters each.
You can enable the copyfitting feature for plain text to avoid changing the bounds of the original text area, regardless of user input.