Text

Display a string of text with single style.

Overview

The Text widget is the most basic way to display text in Shaft. It shows a string with consistent styling throughout.

Basic Usage

Text("Hello, World!")

import Foundation
import JavaScriptKit
import Shaft
import ShaftWeb

Shaft.backend = ShaftWebBackend { _ in
    JSObject.global.document.querySelector("canvas")
}

runApp(TextDemoApp())

final class TextDemoApp: StatelessWidget {
    func build(context: any BuildContext) -> any Widget {
        Column(crossAxisAlignment: .start, spacing: 16) {
            Text("Text Widget")
                .textStyle(.init(fontSize: 24, fontWeight: .bold))

            SizedBox(height: 8)

            // Basic text
            Text("Basic text with default styling")

            // Styled text
            Text("Large bold text")
                .textStyle(.init(fontSize: 20, fontWeight: .bold))

            Text("Colored text")
                .textStyle(.init(color: Color(0xFF_FF6B6B)))

            Text("Custom font weight and size")
                .textStyle(
                    .init(
                        fontSize: 18,
                        fontWeight: .w600
                    ))

            // Max lines and overflow
            Text(
                "This is a very long text that will be truncated after one line if it exceeds the available width",
                overflow: .ellipsis, maxLines: 1
            )

            // Multiple style properties
            Text("Combined styling")
                .textStyle(
                    .init(
                        color: Color(0xFF_4A90E2),
                        fontSize: 16,
                        fontWeight: .bold
                    ))
        }
        .padding(.all(24))
    }
}

Styling Text

Use .textStyle() to customize appearance:

Text("Styled Text")
    .textStyle(.init(
        color: Color(0xFF_FF6B6B),
        fontSize: 20,
        fontWeight: .bold
    ))

Text Style Properties

TextStyle(
    color: Color?,           // Text color
    fontSize: Float?,        // Font size in points
    fontWeight: FontWeight?, // Font weight (.normal, .bold, .w100-w900)
    fontStyle: FontStyle?,   // .normal or .italic
    letterSpacing: Float?,   // Space between letters
    wordSpacing: Float?,     // Space between words
    height: Float?,          // Line height multiplier
    decoration: TextDecoration?, // .underline, .lineThrough, .overline
    decorationColor: Color?, // Color of decoration
    decorationStyle: TextDecorationStyle?, // .solid, .double, .dotted, etc.
)

Font Weights

Text("Thin").textStyle(.init(fontWeight: .w100))
Text("Light").textStyle(.init(fontWeight: .w300))
Text("Normal").textStyle(.init(fontWeight: .normal))  // .w400
Text("Medium").textStyle(.init(fontWeight: .w500))
Text("Semibold").textStyle(.init(fontWeight: .w600))
Text("Bold").textStyle(.init(fontWeight: .bold))      // .w700
Text("Black").textStyle(.init(fontWeight: .w900))

Text Alignment

Control how text aligns within its container:

Text("Left aligned")
    .textAlign(.left)      // Default

Text("Center aligned")
    .textAlign(.center)

Text("Right aligned")
    .textAlign(.right)

Text("Justified text")
    .textAlign(.justify)

Text Overflow

Handle text that doesn’t fit:

Text("Long text that will be clipped", overflow: .clip)

Text("Long text that will fade out", overflow: .fade)

Text("Long text...", overflow: .ellipsis)  // Most common

Text("Long visible text", overflow: .visible)

Line Limits

Limit number of lines:

Text(
    "This text will wrap to multiple lines if needed",
    maxLines: 2,
    overflow: .ellipsis
)

// Single line only
Text("One line", maxLines: 1)

Soft Wrap

Control line breaking:

// Allow wrapping (default)
Text("Text that can wrap", softWrap: true)

// Force single line
Text("Text on one line", softWrap: false)

Rich Text

For text with multiple styles, use TextSpan:

Text(
    textSpan: TextSpan(
        text: "Hello ",
        style: TextStyle(fontSize: 16),
        children: [
            TextSpan(
                text: "World",
                style: TextStyle(
                    color: Color(0xFF_FF6B6B),
                    fontWeight: .bold
                )
            ),
            TextSpan(text: "!")
        ]
    )
)

Selection

Enable text selection:

Text(
    "Selectable text",
    selectionColor: Color(0xFF_B3D4FF)
)

Parameters

See Also

• Button - Buttons use Text for labels
• TextField - Input text from users
• Widget Styling - More about styling