Skip to main content
GlassText provides full support for text alignment using SwiftUI’s standard alignment system. The library uses Core Text for precise multi-line text layout with accurate glyph positioning.

Basic alignment

Use the .multilineTextAlignment() modifier to control how text aligns:
GlassText("Left Aligned", glass: .regular)
    .multilineTextAlignment(.leading)

Alignment types

GlassText supports three alignment modes through SwiftUI’s TextAlignment enum:

Leading alignment

Aligns text to the left (or right in RTL languages):
GlassText("Left Aligned", glass: .regular)
    .multilineTextAlignment(.leading)

Center alignment

Centers text horizontally:
GlassText("Center Aligned", glass: .regular)
    .multilineTextAlignment(.center)
Center alignment is the default in the TextOutlineShape implementation.

Trailing alignment

Aligns text to the right (or left in RTL languages):
GlassText("Right Aligned", glass: .regular)
    .multilineTextAlignment(.trailing)

Multi-line alignment

Alignment becomes especially important with multi-line text:
GlassText("""
Multi-line
Glass Text
Left Aligned
""", glass: .regular)
.font(.system(size: 36, weight: .semibold))
.fontDesign(.serif)
.multilineTextAlignment(.leading)

Environment-based alignment

GlassText reads alignment from SwiftUI’s environment:
GlassText.swift:20
@Environment(\.multilineTextAlignment) private var multilineTextAlignment
This means alignment can be set at any level of the view hierarchy:
VStack {
    GlassText("First Line", glass: .regular)
    GlassText("Second Line", glass: .regular)
    GlassText("Third Line", glass: .regular)
}
.multilineTextAlignment(.center) // Applies to all GlassText views

Alignment implementation

The alignment logic is implemented in TextOutlineShape using Core Text:
TextOutlineShape.swift:58-63
let startX: CGFloat
switch alignment {
    case .leading: startX = 0
    case .center: startX = (maxWidth - lineWidth) / 2
    case .trailing: startX = maxWidth - lineWidth
}
The implementation calculates alignment offsets based on typographic bounds from Core Text, ensuring pixel-perfect alignment across different fonts and sizes.

Alignment with different content

Short vs. long lines

Alignment becomes visible when lines have different lengths:
GlassText("""
Short
Medium length line
Very long line of text here
""", glass: .regular)
.font(.title)
.multilineTextAlignment(.center)

With font designs

Combine alignment with different font designs:
VStack(alignment: .leading, spacing: 20) {
    GlassText("Default Design", glass: .regular)
        .fontDesign(.default)
        .multilineTextAlignment(.leading)
    
    GlassText("Serif Design", glass: .regular)
        .fontDesign(.serif)
        .multilineTextAlignment(.center)
    
    GlassText("Monospaced Design", glass: .regular)
        .fontDesign(.monospaced)
        .multilineTextAlignment(.trailing)
}

Complex layouts

Create sophisticated layouts by combining alignment with other modifiers:
VStack(spacing: 30) {
    GlassText("""
    Multi-line
    Glass Text
    Effect
    """, glass: .regular)
    .font(.system(size: 36, weight: .semibold))
    .fontDesign(.serif)
    .multilineTextAlignment(.center)
    
    HStack(spacing: 20) {
        GlassText("Left", glass: .regular.tint(.cyan))
            .multilineTextAlignment(.leading)
        
        GlassText("Right", glass: .regular.tint(.purple))
            .multilineTextAlignment(.trailing)
    }
}

Alignment with frames

When using frames, alignment determines how text positions within the available space:
GlassText("Aligned Text", glass: .regular)
    .font(.title)
    .multilineTextAlignment(.leading)
    .frame(maxWidth: .infinity, alignment: .leading)
The .frame(alignment:) parameter controls the view’s position in its parent, while .multilineTextAlignment() controls how text lines align within the text itself.

Technical details

Core Text precision

GlassText uses Core Text’s typographic bounds for accurate alignment calculations:
TextOutlineShape.swift:42-48
var lineWidths: [CGFloat] = []
var maxWidth: CGFloat = 0
for line in ctLines {
    let w = CGFloat(CTLineGetTypographicBounds(line, nil, nil, nil))
    lineWidths.append(w)
    maxWidth = max(maxWidth, w)
}
This ensures:
  • Accurate alignment across different scripts
  • Proper handling of ligatures and complex glyphs
  • Consistent alignment with font fallbacks

Glyph positioning

Each glyph is positioned precisely based on the alignment offset:
TextOutlineShape.swift:82-88
let g = glyphs[i]
guard let gPath = CTFontCreatePathForGlyph(runFont, g, nil) else { continue }
var t = CGAffineTransform(
    translationX: startX + positions[i].x,
    y: penY + positions[i].y
)
The combination of Core Text metrics and precise glyph positioning ensures professional typography quality across all alignment modes.

Build docs developers (and LLMs) love