/xcode-26

Styled Text Editing in SwiftUI

Overview

SwiftUI provides powerful tools for displaying and editing styled text. This guide covers the various ways to style text in SwiftUI, from basic formatting to advanced editing capabilities with AttributedString.

Key components for styled text in SwiftUI:

• Text: For displaying read-only styled text
• AttributedString: For creating rich text with multiple styles
• TextEditor: For editable rich text experiences

Basic Text Styling

Font Customization

// System fonts with different sizes
Text("Hello World")
    .font(.largeTitle)
    .font(.title)
    .font(.headline)
    .font(.subheadline)
    .font(.body)
    .font(.callout)
    .font(.footnote)
    .font(.caption)
    .font(.caption2)

// Custom font size
Text("Custom Size")
    .font(.system(size: 24))

// Font weight
Text("Bold Text")
    .fontWeight(.bold)
    .fontWeight(.semibold)
    .fontWeight(.medium)
    .fontWeight(.regular)
    .fontWeight(.light)
    .fontWeight(.ultraLight)

// Font design
Text("Different Design")
    .font(.system(.body, design: .serif))
    .font(.system(.body, design: .rounded))
    .font(.system(.body, design: .monospaced))

Text Color

// Basic color
Text("Colored Text")
    .foregroundColor(.blue)

// Using foregroundStyle (preferred in newer SwiftUI versions)
Text("Styled Text")
    .foregroundStyle(.red)

// Using ShapeStyle for gradients
Text("Gradient Text")
    .foregroundStyle(
        .linearGradient(
            colors: [.yellow, .blue],
            startPoint: .top,
            endPoint: .bottom
        )
    )

Text Decoration

// Bold and italic
Text("Bold Text").bold()
Text("Italic Text").italic()

// Bold and italic with conditional application
Text("Conditionally Bold")
    .bold(someCondition)
    .italic(anotherCondition)

// Underline
Text("Underlined Text")
    .underline()
    .underline(true, color: .red)

// Underline with pattern
Text("Patterned Underline")
    .underline(true, pattern: .dash, color: .blue)

// Strikethrough
Text("Strikethrough Text")
    .strikethrough()
    .strikethrough(true, color: .red)

// Strikethrough with pattern
Text("Patterned Strikethrough")
    .strikethrough(true, pattern: .dot, color: .green)

Text Alignment and Layout

// Text alignment
Text("Aligned Text")
    .multilineTextAlignment(.center)
    .multilineTextAlignment(.leading)
    .multilineTextAlignment(.trailing)

// Line spacing
Text("Text with\nline spacing")
    .lineSpacing(10)

// Line limit
Text("This text will be truncated if it's too long")
    .lineLimit(1)
    .lineLimit(nil) // No limit

// Truncation mode
Text("Truncated text...")
    .truncationMode(.head)    // ...end of text
    .truncationMode(.middle)  // start...end
    .truncationMode(.tail)    // start... (default)

Advanced Text Styling with AttributedString

Creating AttributedString

// Basic AttributedString
var attributedText = AttributedString("This is styled text")

// Styling specific ranges
var complexText = AttributedString("Red and Blue")
if let redRange = complexText.range(of: "Red") {
    complexText[redRange].foregroundColor = .red
}
if let blueRange = complexText.range(of: "Blue") {
    complexText[blueRange].foregroundColor = .blue
}

// Using AttributedString in Text view
Text(attributedText)

Common AttributedString Attributes

var text = AttributedString("Styled text example")

// Font attributes
text.font = .headline
text.foregroundColor = .blue

// Text presentation
text.backgroundColor = .yellow
text.underlineStyle = .single
text.underlineColor = .red
text.strikethroughStyle = .single
text.strikethroughColor = .green

// Inline presentation intent
text.inlinePresentationIntent = .stronglyEmphasized // Bold
text.inlinePresentationIntent = .emphasized // Italic

Combining Multiple Styles

var multiStyleText = AttributedString("Multiple styles in one string")

if let firstPart = multiStyleText.range(of: "Multiple styles") {
    multiStyleText[firstPart].font = .headline
    multiStyleText[firstPart].foregroundColor = .blue
}

if let secondPart = multiStyleText.range(of: "one string") {
    multiStyleText[secondPart].font = .body
    multiStyleText[secondPart].foregroundColor = .red
    multiStyleText[secondPart].backgroundColor = .yellow
}

Text(multiStyleText)

Text Editing with TextEditor

Basic TextEditor

struct SimpleTextEditorView: View {
    @State private var text = "Edit this text"
    
    var body: some View {
        TextEditor(text: $text)
            .frame(minHeight: 100)
            .border(Color.gray)
    }
}

Rich Text Editing with AttributedString

struct RichTextEditorView: View {
    @State private var text = AttributedString("This is some editable styled text...")
    
    var body: some View {
        TextEditor(text: $text)
            .frame(minHeight: 100)
            .border(Color.gray)
    }
}

Text Selection and Formatting

struct StyledTextEditingView: View {
    @State private var text: AttributedString = AttributedString("Select text to format")
    @State private var selection = AttributedTextSelection()
    
    @Environment(\.fontResolutionContext) private var fontResolutionContext
    
    var body: some View {
        VStack {
            TextEditor(text: $text, selection: $selection)
                .frame(height: 200)
                .border(Color.gray)
            
            HStack {
                // Bold button
                Button(action: {
                    toggleBold()
                }) {
                    Image(systemName: "bold")
                }
                
                // Italic button
                Button(action: {
                    toggleItalic()
                }) {
                    Image(systemName: "italic")
                }
                
                // Underline button
                Button(action: {
                    toggleUnderline()
                }) {
                    Image(systemName: "underline")
                }
                
                // Color picker
                ColorPicker("", selection: Binding(
                    get: { getSelectionColor() },
                    set: { setSelectionColor($0) }
                ))
            }
        }
    }
    
    private func toggleBold() {
        text.transformAttributes(in: &selection) {
            let font = $0.font ?? .default
            let resolved = font.resolve(in: fontResolutionContext)
            $0.font = font.bold(!resolved.isBold)
        }
    }
    
    private func toggleItalic() {
        text.transformAttributes(in: &selection) {
            let font = $0.font ?? .default
            let resolved = font.resolve(in: fontResolutionContext)
            $0.font = font.italic(!resolved.isItalic)
        }
    }
    
    private func toggleUnderline() {
        text.transformAttributes(in: &selection) {
            if $0.underlineStyle != nil {
                $0.underlineStyle = nil
            } else {
                $0.underlineStyle = .single
            }
        }
    }
    
    private func getSelectionColor() -> Color {
        let attributes = selection.typingAttributes(in: text)
        return attributes.foregroundColor ?? .primary
    }
    
    private func setSelectionColor(_ color: Color) {
        text.transformAttributes(in: &selection) {
            $0.foregroundColor = color
        }
    }
}

Custom Text Formatting Definition

// Define custom formatting constraints
struct MyTextFormatting: AttributedTextFormattingDefinition {
    typealias Scope = AttributeScopes.SwiftUIAttributes
    
    // Allow only specific font weights
    static let fontWeight = ValueConstraint(
        \.font,
        constraint: { font in
            guard let font = font else { return nil }
            let weight = font.resolve().weight
            return font.weight(weight == .bold ? .regular : .bold)
        }
    )
    
    // Allow only specific colors
    static let foregroundColor = ValueConstraint(
        \.foregroundColor,
        constraint: { color in
            guard let color = color else { return nil }
            // Toggle between red and blue
            return color == .red ? .blue : .red
        }
    )
}

// Use the custom formatting
struct CustomFormattedTextEditor: View {
    @State private var text = AttributedString("Custom formatted text")
    @State private var selection = AttributedTextSelection()
    
    var body: some View {
        TextEditor(text: $text, selection: $selection)
            .textFormattingDefinition(MyTextFormatting.self)
    }
}

Markdown Support in Text

SwiftUI's Text view supports a subset of Markdown for styling:

// Basic Markdown styling
Text("This is **bold** and *italic* text")

// Links in Markdown
Text("Visit [Apple](https://www.apple.com)")

// Combining Markdown with modifiers
Text("# Heading\nRegular text")
    .foregroundColor(.blue)

Markdown Limitations

• Text doesn't support all Markdown features
• No support for line breaks, soft breaks, or block-based formatting
• No support for lists, block quotes, code blocks, or tables
• No support for image URLs
• Whitespace is preserved according to inlineOnlyPreservingWhitespace parsing option

Best Practices

Performance Considerations

• Avoid creating new AttributedString instances frequently
• Cache complex AttributedString objects when possible
• Use appropriate text containers based on content size

Accessibility

// Make text more accessible
Text("Accessible Text")
    .font(.body)
    .dynamicTypeSize(.large)
    .accessibilityLabel("Alternative description")
    .accessibilityTextContentType(.plain)

Localization

// Localizable text
Text("hello.world")  // Looks for "hello.world" in Localizable.strings

// Localized text with styling
Text(LocalizedStringKey("**Bold** and *italic* text"))

// Localized text with variables
Text("Hello, \(username)")

References

• SwiftUI Text and Symbol Modifiers
• Applying Custom Fonts to Text
• Building Rich SwiftUI Text Experiences
• Creating Visual Effects with SwiftUI
• Text View Documentation
• AttributedString Documentation
• TextEditor Documentation