- 4 minutes to read
The Design Editor supports three text engines:
- Aurigma's proprietary WYSIWYG text engine called TextWhizz
- HTML-based WYSIWYG text engine
- Classic server-side text rendering engine used in all Design Editors prior version 6.
The default text engine in Design Editor since the version 6 is TextWhizz. It allows your users for editing all text elements right on the canvas providing a pixel-perfect result both on the client and server side. The same code which parses fonts, draws glyphs, measures texts, etc is used both on the client and server side. Whenever possible, on a client side it is drawn through WebGL to provide a good performance.
This mode provides the best user experience and you can be always sure that the text created by the user will be exactly the same when you render a PDF print file. It is used by default.
However, under some circumstances it cannot be used:
- On mobile devices.
- When a text element contains some certain features, such as auto-scaled text, shadow effect, and some others.
It is quite similar to TextWhizz, however, it uses browser-based text engine to display text elements. For this reason, when Customer's Canvas generates a PDF file, the text element may look a bit different. For example, it may a bit different width which may cause a text to wrap to the next line.
Also, the HTML-based editor does not support all text features of TextWhizz or a classic engine. It won't work for the tricky text layouts and typography.
That's why this mode can be used when you don't care about getting a pixel-perfect result and when only basic text features are used. For example, if you always edit a single-line plain text items without boundaries, it may work fine.
By default, it falls back to HTML-based text engine on mobile screens. However, you may force this mode.
Unlike TextWhizz and HTML-based engines, the classic engine does not allow editing a text right on a design. A text is rendered on a server and a user manipulates with it as if it is an image.
To be able to edit a text element, you need to show an input string in a popup dialog or in a special text editor which supports rich text formatting (see the Rich text editor article for details).
Although this engine provides a poorer user experience, it supports max number of text features and works in all browsers and devices. Design Editor automatically falls back to this engine when neither TextWhizz nor HTML engine can be used.
Setting up Text Engines
You may turn off TextWhizz completely in the Design Editor app configuration. In the Aurigma.DesignAtoms.config file, you need to set the LegacyTextEngineEnabled parameter to
true. It will force the classic engine.
You may also control the text engine through the frontend configuration. Use the canvas.textEditor parameter. The
default value will have the Design Editor to choose it automatically, the
html will force the HTML-based engine, and
none will switch to the classic engine.
Working with the text
To change the content of text elements, you can use the Object Inspector or do it right on the canvas. To change the text style, you can use the Top Toolbar.
Click a text element once to change the appearance of the entire element, for example, its border, opacity, or z-order.
When you double-click the text element, controls for changing the text style appear in the Top Toolbar.
Note that the following features are not supported in the current implementation of the TextWhizz text engine:
- Text shadow
- Auto-scaled text
- Arched text
- Character count and line count limitations
If a text element has one or more of these features, then the Classic text engine runs and uses pop-up boxes or modal windows to edit text.
Classic Text Engine
This text engine uses pop-up boxes to edit text elements with plain formatting and the Rich text editor to change the content and style of rich-formatted text.
Click a text element once and change the content of the plain text element in either a pop-up box or the Object Inspector. To change the text style, you can use the Top Toolbar.
Pop-up boxes also appear when a limit on the number of characters was defined, even when using the WYSIWYG text engine.
To change rich-formatted text, double-click this element. As a result, the Rich text editor appears.