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.

Refers to the MicroEJ official documentation https://docs.microej.com/en/latest/ApplicationDeveloperGuide/classpath.html and https://docs.microej.com/en/latest/PlatformDeveloperGuide/fontGenerator.html to have more information about the MicroUI Font engine.

4.2. TrueType Fonts

TrueType is a vector font format used in MicroEJ applications thanks to the VectorFont 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 font 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 file per face.

TrueType 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 {
      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.