Text engines

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

Difference

TextWhizz

The default text engine in Design Editor since the version 6 is TextWhizz. It allows your users to edit all text elements right on the canvas providing a pixel-perfect result. The same code that parses fonts, draws glyphs, measures texts, etc. is used both on the client side 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.

However, under some circumstances this engine cannot be used:

On mobile devices.
When a text element contains some certain features, such as auto-scaled text, shadow effect, and some others.

HTML-based WYSIWYG

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.

Classic engine

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

WYSIWIG mode

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.

WYSIWYG Text Engine.

When you double-click the text element, controls for changing the text style appear in the Top Toolbar.

WYSIWYG Text Engine.

Note that auto-scaled text in not supported in the current implementation of the TextWhizz engine. If a text element has this 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.

Classic Text Engine.