Contact us
Skip to main content

Text engines

The Design Editor supports two text engines:

  • Aurigma's proprietary WYSIWYG text engine called TextWhizz.
  • HTML-based WYSIWYG text engine.

Difference​

TextWhizz​

TextWhizz is the default text engine. 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:

  1. On mobile devices.
  2. 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. 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.

Setting up Text Engines​

You can 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, and the html will force the HTML-based 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 is not supported in the current implementation of the TextWhizz engine. If a text element has this feature, it is edited in a pop-up box or in the Rich text editor.

Pop-up boxes also appear when a limit on the number of characters was defined.

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

Was this page helpful?