4. Fonts

4.1. MicroUI Fonts

MicroUI manages pixelated fonts (bitmap). These fonts have to be pre-generated at application compile time. The input font format is an internal MicroUI implementation format called EJF. The EJF fonts can be located in the application ROM section or external flash memory (SDcard, etc.). MicroUI implementation does not provide a low-level API to render a string with an EJF font.

digraph { rankdir=LR; { ttf [label="ttf", shape=note] ejf [label="ejf", shape=note] raw [label="raw", shape=note] fd [label="Font Designer", shape=rect] fg [label="Font Generator", shape=rect] app [label="Application", shape=rect] ge [label="Graphical Engine", shape=rect] i [label="", image="images/applist_50.png", shape=plaintext] } subgraph flow { ttf -> fd -> ejf -> fg -> raw -> app -> ge -> i } }

To use a font as a MicroUI Font, the source font (TTF, JPG, etc.) must be first converted in EJF format. Then the output file must be available in the MicroEJ application classpath. Then its path must be added in a file whose extension is .fonts.list. This file allows the MicroEJ platform to know which fonts have to be embedded.

Refer to the MicroEJ official documentation https://docs.microej.com/en/latest/PlatformDeveloperGuide/uiFont.html and https://docs.microej.com/en/latest/PlatformDeveloperGuide/uiFontGenerator.html to have more information about the MicroUI Font engine.

4.2. TrueType/OpenType Fonts

TrueType and OpenType are vector font formats used in MicroEJ applications thanks to the MicroVG library.

The advantages of vector fonts are:

  • there is no need to preprocess the font file;
  • the font can take any size and opacity specified at runtime;
  • transformations are easier to apply;
  • gradient colors can be applied to them.

TrueType and OpenType fonts can optionally contain kerning information. Kerning is character spacing adjustment defined for couples of characters. For instance, the space between V and A in VA is reduced.

Warning

TrueType Collection (TTC) files are not handled since the VectorFont library only loads the first font face (for instance, ArialRegular and ArialBold are two faces of font) from the file. There must be only one face per file.

TrueType and OpenType font files (TTF) can be directly included as resources in the project to make them available in the application classpath.

Warning

The paths must be added in a file whose extension is .resources.list to be included in the application resources.

digraph foo { rankdir=LR; { ttf [label="ttf", shape=note] app [label="Application", shape=rect] ge [label="Graphical Engine", shape=rect] i [label="", image="images/applist_50.png", shape=plaintext] } subgraph flow { ttf -> app -> ge -> i } }

Text is rendered by the FreeType library, which uses the VG Lite engine to render glyph shapes.

Refer to MicroVG VectorFont documentation for more details.