Text

Text shows a string in any size, color or font, and different parts of it can each have their own color.

Light

Dark

TextLive preview soon

Basics

Text { "Hello, Barton" }
Text { "Settings", font_size = 18.f, color = Color::WHITE }

Without a color or size, text uses the theme's text color at 13px. Lines break at \n, and text doesn't wrap on its own.

Text takes the same layout and style props as other views, so padding, backgrounds and borders work as expected.

Fonts

Two fonts are built in: a sans-serif used by default, and a monospaced one.

Text { "let x = 1;", font = Font::MONO }

Other fonts load like any asset:

View render(Assets& assets) const {
    const auto serif = assets.load<Font>("fonts/Lora.ttf");

    return Text { "Chapter One", font = serif, font_size = 24.f };
}

Spacing between lines is set with line_height.

Runs

A run is a stretch of text that shares the same formatting. In "a pink word", the text splits into three runs, and only the middle one is pink.

A single Text can hold several runs in a row. Each Run sets its own color, and plain strings in between use the text's color:

Text {
    "Build ",
    Run { "succeeded", color = Color::GREEN },
    " in 2.4s",
}