SoneSone
Typography

Tab stops & leaders

Aligned columns inside a single Text node, with optional dot leaders.

For tabular content where you don't need full table semantics — table of contents entries, financial line items, key/value pairs — a Text node with \t separators and tab stops is faster and cleaner than a Table.

Text("Name\tAmount\tDate")
  .tabStops(200, 320)
  .font("GeistMono")
  .size(12)

Each \t snaps the next segment to the next tab stop x-position.

Tab leaders

.tabLeader(char) fills the gap between segments with a repeating character. Classic Word-style tables of contents:

Text("Introduction\t1")
  .tabStops(360)
  .tabLeader(".")
  .size(13)

Any character works:

// Financial report — dash leader
Text("Revenue\t$1,200,000")
  .tabStops(300)
  .tabLeader("-")
  .size(13)

When to use this vs. Table

  • Tab stops — single line per row, ≤ 3 columns, no per-cell styling needed.
  • Table — multi-line cells, colspan/rowspan, cell backgrounds, complex per-cell content.

See Table for the full table API.