Dynamic Font Loading and Styling (Rich Text)

I have been working on a UI framework for the last year and as a part of this process, I came across the need to develop a dynamic font system.

I wanted to design a system that allowed rich text styles and paragraph like properties.

The system allows fonts to be loaded at runtime for less intensive games but also provided a batching system for loading multiple font sizes and styles in a single font description file.

The system includes:

  • Runtime font face loading
  • Indentation
  • Sub and super scripting
  • Underlining, strikethrough and bar decorations
  • Dynamic line spacing (based on the largest font in the line)
  • Paragraph before and after spacing.
  • Special paragraph indents like hanging and first line.

Text styling utilises record types introduced in C# 9, allowing for quick copying of the immutable type with modification using the with keyword.

Example

Runtime Loaded Sizing

Paragraph Implementation

        Paragraph p = new();

        p.Format = new ParagraphFormat() { 
            AfterSpacing = 0 , 
            BeforeSpacing = 0, 
            LeftIndent = 0, 
            RightIndent = 0, 
            LineSpacing = 0
        };

Writing to Paragraphs

        p.Write("The quick brown fox jumps over the lazy dog.");

        p.WriteLine("The quick brown fox jumps over the lazy dog.",
                    TextStyle.Default with { Face = Fonts.GetFace("Arial", 24) });

        p.WriteIndexed("&*Test: &0Hello this \nis &*style&0 0, &1this is style 1", 
            TextStyle.DefaultBold with { ForegroundColor = Color.Yellow},
            TextStyle.Default with { ForegroundColor = Color.Purple, Face = Fonts.GetFace("Arial", 30)},
            TextStyle.DefaultSub
            );*/
2 Likes

Any Examples of your UI?

1 Like

Thanks for showing some interest :slight_smile:
I’m happy to share its progress! it is however in its early stages and has a few kinks.

Just an example of a couple of controls

Every control or what I call ‘View’, is a Box Model object that allows for Margins, Padding and a Border. just like HTML and Dom objects, these can be manipulated to an insane degree to achieve a variety of layouts.

Each view is positioned using a unit space system and units currently supported are cm, mm and inches. On windows, these units can represent and scaled perfectly using DPI calculations so you can create perfectly sized and scaled interfaces if required (work is required for other platform support).

The layout system utilises two main methods for sizing and positioning, these are named ‘OnMeasure’ and ‘OnLayout’ respectively. These methods contain the basic layout and sizing logic required to determine the view’s bounds and its children. The beauty of these is you can override these methods and apply your own logic.

The system also has styling and an XML representation to separate business logic from presentation.
by no means is this system needed for all use cases but it has been implemented to reduce chaos and allow more flexibility.

XML Examples

Overall the UI Libary has these elements:

  • Tree Structure
  • View Styling
  • XML representation
  • Data binding
  • XML Resouce Definitions
  • Unit based scaling and positioning
  • Context Management (Game states)
  • IDrawable interface for all view rendering, allowing for TextureRegions, Textures and solid colours to be used interchangeably with background and content areas.
  • A collection of flexible views (Linear layout, Absolute layout, Grid layout, Button, ImageView, TextView, ComboBox etc…)
2 Likes