Moddable SDK and Monotype Spark offer scalable font rendering on low-cost embedded hardware

Often the best way for a person to interact with a product is using a screen. Computers and mobile phones have long used screens as their primary means of communicating information to the user. As Internet of Things (IoT) products move from the early adopter phase to the mainstream, many of them will incorporate displays to ease configuration by customers, provide additional features and reduce support costs. To render a modern user interface on the screen, scalable fonts are invaluable. They provide users with crisp, readable text at the optimal size, and product designers with the ability to use typography to imbue the product with brand character.

While rendering text well is still challenging, particularly on inexpensive hardware, Monotype and Moddable are now offering technology that makes it easier to deliver high-quality scalable fonts to embedded devices without the need for time-consuming integration efforts By joining forces, we provide designers with the flexibility to use text creatively without burdening embedded software engineers with a myriad of new text challenges such as rendering, measuring, internationalization, performance, caching and memory use.

Monotype provides users with an unparalleled library of distinctive fonts, and Monotype Spark™, a remarkably efficient and high-quality rendering engine for embedded devices. Moddable integrates the Monotype Spark engine into its modern SDK for building rich, animated user interfaces for low-cost embedded devices that incorporate a display. Unlike most embedded GUI solutions, the Moddable SDK uses standard JavaScript for UI development—the same language used to bring web pages to life—with all source code openly available.

Design flexibility

The integration of Monotype Spark into the Moddable SDK provides designers of IoT products with unmatched flexibility and breadth of text rendering options. Benefits include:

• Anti-aliased rendering, ensuring smooth edges on all glyphs
• Works with any TrueType font: For best results on embedded devices, Monotype offers TrueType fonts tuned specifically to reduce memory requirements and improve rendering performance.
• Combine several fonts on a single screen
• Scale fonts to arbitrary size
• Mix multiple font sizes on a single screen
• Combine multiple fonts, font sizes, and colors in a single line
• Smoothly animate text movement
• Fade text in and out
• Blend text against any background
• Render glyphs using outlines for scale, squash, stretch, and rotate effects
• Precise character spacing with optional kerning
• Control leading between individual lines of text

Logo Tween - The characters of the Moddable logo are animated into place, smoothly scaling as they enter and exit.

Text Styles - The Open Sans TrueType font is used to exercise the layout features of the Piu user interface framework. All glyphs are rendered on-demand on the embedded device.

Bouncing Glyphs - Four glyph outlines from the Burlingame Pro font are animated in real time by independently modifying their horizontal and vertical scales.

Word Clock - A text based clock that allows the user to select their preferred text size and style.

High quality anti-aliased text at all sizes

Engineering power

Moddable has integrated the Monotype Spark engine with the Moddable SDK, so IoT application engineers can immediately start building their user interface. Because the Moddable SDK uses JavaScript as its primary programming language, developers implement user interfaces more quickly than in traditional embedded development tools such as in C or C++. All measurement and rendering of text is implemented in native C code for maximum performance.

Additional features include:

• Render simple user interfaces using the Poco rendering engine
• Build sophisticated animated touch user experiences using the Piu user interface framework
• Use fonts directly from flash memory - no file system required
• All text strings stored in UTF-8 for full Unicode compliance for international markets
• Render most languages directly, including Japanese, Simplified Chinese, and Traditional Chinese
• For rendering complex scripts and bi-directional layout (e.g Thai and Arabic) Monotype Shaper Spark may be enabled
• Localization framework built into Moddable SDK to easily build user interfaces that support multiple languages
• Extensive documentation for Poco rendering engine and Piu user interface framework
• Dozens of example applications
• Moddable SDK runtime and tools source code available on GitHub

Embedded resource use

When building software for embedded devices, numbers are essential to evaluate if a technology can be used in your project. Of course, each deployment is unique so the numbers will vary. These numbers should only be used as approximate guidelines.

• Rendering anti-aliased animated text at 60 FPS
• 20 KB RAM for renderer (only needed when rendering new glyphs into cache)
• 4 to 6 KB for rendered glyph cache (using Moddable's unique weighted run-length algorithm)
• 100 KB code for Monotype Spark rendering engine
• 300 to 600 KB code for Moddable SDK (including graphics renderer, user interface engine, JavaScript engine, etc)
• 160 MHz MCU. All software running from flash ROM (XIP)

Note: These numbers are based on an ESP32 MCU. Similar results are seen on ARM MCUs and x86 processors.

Supports all screen orientations with no impact on memory use or performance

TrueType/OpenType fonts work efficiently for embedded

A common challenge in embedded software development effort is adapting standard technologies from computer and mobile for use on microcontrollers with at least an order of magnitude less power. The benefits of using standard technologies include the re-use of proven designs, the ability to use existing tools, and lower total cost of development. Unfortunately, many standards used on computers and mobile were not designed for use in products powered by embedded processors. JavaScript was created for computers and has continued to evolve with the expectation it will be used only on computers and powerful mobile devices. Moddable has done considerable work to allow the modern JavaScript language to be used on embedded microcontrollers. Similarly, Monotype has invested heavily to make TrueType/OpenType fonts work efficiently on embedded microcontrollers. For maximum efficiency, TrueType fonts need to be adapted for use on embedded.

The Moddable SDK is available from the Moddable GitHub repository. Licensing options are explained on the Moddable web site. The Monotype Spark integration for the Moddable SDK is available for no additional cost to organizations with a valid Monotype Spark license.

Monotype has developed extensions to TrueType fonts to optimize their use in embedded products:

• Fonts may be compressed with a Monotype's CCC algorithm to reduce the amount of flash storage memory required. Compressing fonts does not significantly impact rendering performance. Compression results vary by font. The fonts in the Monotype SDK compress by approximately 15%.
• Fonts may be optimized for the product's screen depth - for example, including data only required for 1-bit rendering or 8-bit gray rendering.
• For fonts with composite glyphs such as those used in many Asian languages, the size of rendering hints is reduced by hinting the components of a composite glyph separately and then hinting the overall composite glyph, to just make some adjustments.
• The glyphs included in the font can be selected to only include those required by the product.
• Standard TrueType hints are not supported because they are inefficient on embedded. For best results, Monotype embedded hinting may be applied. If no hints are available, auto-hinting is applied.
• To support complex international layouts, including Thai and Arabic, Monotype transforms standard layout tables in TrueType to a more compact, more efficient format.

Monotype has implemented the Spark font rendering engine designed to meet the needs of embedded product designers:

• Fonts can be rendered at 1, 2, 4, or 8 bit gray to eliminate unnecessary format conversation by matching the display of the target device.
• Fonts can be rendered rotated at 0, 90, 180, and 270 degrees to match the display, eliminating a separate rotation step during rendering.
• Implements fast Monotype hints and drop-out control to deliver high quality anti-aliased glyphs
• All calculations are performed using fixed point math so no FPU is required and software floating point calculations are not used.
• Pure ANSI C implementation for ease in porting

Availability

The Moddable SDK with support for the Monotype Spark engine is available now.

The Monotype Spark engine is available today.

The Moddable SDK is available from the Moddable GitHub repository. Licensing options are explained on the Moddable web site. The Monotype Spark integration for the Moddable SDK is available for no additional cost to organizations with a valid Monotype Spark license.

Support

Both Monotype and Moddable offer development support for customers building products using their respective technologies.