Rich Text Editor

Products like books, magazines, booklets, etc. may contain large text areas. Large plain texts are boring, and they make catching the main idea at first sight difficult. So, if your users want to create eye-catching products that attract attention, they can use rich text. Rich text provides such formatting options as style (bold, italic, and underline), font, size, and color.

The web-to-print designer allows for creating rich text areas using the Rich text editor, as described in this topic. Also, rich text provides the text wrapping feature that allows for controlling how images are displayed in text areas, whether text wraps around them or pictures are just put above/behind text without changing its layout. This feature is discussed in the Text Wrapping topic.

To add rich text objects to your products:

  1. Switch the web-to-print designer to the advanced mode by clicking the Switch to advanced editing button. If there is no such button, then the designer is already in the advanced mode or this mode is disabled.
  2. Click the Text button and then click Rich text.

    The Rich text command.

  3. Enter the text, format it, and then click the Insert button.

    The Rich text editor.

After a rich text area is added to a product, you can change its size. If the text is too big to be displayed in the area, it will be cropped. Rich text elements do not resize automatically when text is being typed in.

The Rich text editor supports spell checking, which is discussed in the Customizing User Interface topic.

In the last screenshot, you can see that the Rich text editor interface contains the usual text formatting elements. Let us go through them:

To change a value of a formatting element, you can select one from a drop-down list. If the element defines a numeric value, you can type it in.

Selecting the font size with an arbitrary value.

Cut, Copy, Paste, Undo, and Redo

The first button group in the Rich text editor contains the following buttons (from left to right): Cut, Copy, Paste, Paste as plain text, Paste from Word, Undo, and Redo.

The edit operations.

Also, some of these operations can be done using the following key combinations:

  • Cut: Ctrl+X
  • Copy: Ctrl+C
  • Paste: Ctrl+V
  • Undo: Ctrl+Z
  • Redo: Ctrl+Y

Find, Replace, and Select All

The second button group in the Rich text editor contains the following buttons (from left to right): Find, Replace, and Select All.

The find-replace operations.

Special Characters

The last button in the upper row is Insert Special Character.

The Insert special character button.

It opens the Select Special Characters dialog shown in the following image.

Special characters.

This dialog closes after you select a character.

Font Style

To emphasize some words or sentences, you can use bold, italic, and underline font styles or any combination of them. The last button in this group clears all formatting for the selected text.

The Font style buttons.

Font Name

To change a font, select a text in the area, click the Font drop-down list, and then select a new font. To find details on how to add custom fonts to Customer's Canvas, refer to the Custom Fonts topic.

Selecting a font name.

Font Size

To change a font size, select a text in the area, click the Size drop-down list, and then select a value (in points). Also, you can type your own value of the font size.

Selecting a font size. Selecting the font size with an arbitrary value.

Font Color

To change a font color of a selected text, click Text Color.

Selecting a font color in the picker.

There is a palette with the predefined color set on the left side of the Text Color dialog, and a spectrum on the right side of the dialog. You can select a color from the palette or directly from the spectrum. To find out how to set up the palette, refer to the Colors topic.

Tracking

Tracking is the spacing between characters. Negative values make text narrower, positive values make it wider, and 0 is the default tracking of the font.

Text tracking.

Text Alignment

The following text alignment options are available: Left, Center, and Right.

The Text alignment buttons.

Note

Text alignment is applied to all text in the Rich text editor, not to a single paragraph.

Lists

The Rich text editor allows for creating numbered and bulleted lists.

Lists.

To change a list style, right-click on any element in the list. For numbered lists, you can set a number to start the list with and select a list type.

Numbered list properties.

For bulleted lists, you can change the bullet style.

Nested Lists

Also, you can create lists with hierarchy:

  • To demote the item to a lower numbering level (move the item to the right), press Tab.
  • To promote the item to a higher numbering level (move the item to the left), press Shift+Tab.

Leading

Leading is the spacing between base lines. The leading is measured in points. You can select its value from the predefined list or type in your own value.

Text leading.

If a leading value is lesser than a font size, then the text lines will overlap.

Note

Leading is applied to all text in the Rich text editor, not to a single paragraph.

First Line Indent

First line indent is an indentation that determines the distance of a paragraph's first line from the left margin. It is sized in points. You can select one of the predefined values or type in your own value.

The first line indent.

Before and After Paragraph Spacing

Before and after paragraph spacing is sized in points. You can select a value from the predefined list or type in another value.

Paragraph spacing.

Left and Right Indent

Paragraph left and right indents are sized in points. You can select a value from the predefined list or type in another value.

The left and right indent.

Character Count

You can limit the number of characters that the user can enter in rich text fields. The character count is shown in the lower-right corner.

The character counter. The character counter reaches the limit.

For more details, refer to Point and Rich (Paragraph) Text.

Zoom

If your users edit texts with extremely large/small font sizes in the Rich text editor, it can become a problem. The text can either be too small to see, or too big to fit in the editor window. To improve the user experience, you can enable resizing of the content in the window.

Move the slider in the lower-left corner to change the zoom level.

The zoom slider in the Rich text editor.

You can configure the slider and enable the auto-zoom feature through IConfiguration.

See Also

Manual