Format Text in SwiftUI

Written by Team Kodeco

Formatting text is important when designing user interfaces, as it helps emphasize certain aspects of your text and makes it easier for your users to read. In SwiftUI, formatting text is simple, as you can easily apply various appearance styles to your text.

To format text in SwiftUI, you can use the fontWeight, italic, underline and strikethrough modifiers.

For example, say you want to create a Text view with the word “Hello” in bold and italic, and the word “World” underlined. You can achieve this with the following code:

struct ContentView: View {
  var body: some View {
    Text("Hello ")
      .fontWeight(.bold)
      .italic()
    + Text("World")
      .underline()
  }
}

The preview should look as follows:

In this example, you use the fontWeight modifier to make the “Hello” text bold, and the italic modifier to italicize it. Then, you use the + operator to concatenate another Text view that displays the “World” text, and apply the underline modifier to it to underline it.

You can also apply multiple formatting styles by chaining the modifiers together. For example:

struct ContentView: View {
  var body: some View {
    Text("Hello, World!")
      .fontWeight(.semibold)
      .italic()
      .underline()
      .strikethrough(true, color: .red)
  }
}

The preview should look as follows:

Here, you use the fontWeight modifier with a value of .semibold, the italic modifier, the underline modifier and the strikethrough modifier with a value of true to cross out the text with a red line.

Styling Text with Markdown

SwiftUI’s Text view provides two ways of styling your text with Markdown: directly within the Text view and using an AttributedString. Using Markdown directly within a Text view can be convenient for static text, but you’ll need to use AttributedString for dynamic strings or when you want to apply styles to different parts of the string programmatically.

Using Markdown Directly in Text

You can include Markdown directly within a Text view to apply certain styles. Here’s an example:

struct ContentView: View {
  var body: some View {
    Text("**Bold** and _italic_ text!")
  }
}

The preview should look like:

This renders a Text view with “Bold” in bold text and “italic” in italic text.

Using AttributedString for Advanced Styling

For more advanced or dynamic styling, AttributedString is the tool of choice. It lets you apply different styles to different parts of the string. You can mix SwiftUI modifiers with AttributedString attributes. Importantly, the attributes applied through AttributedString take precedence over SwiftUI modifiers.

Here’s an example that applies different styles to different parts of a text:

let quote = """
**"Be yourself;** everyone else is _already taken._"
- **Oscar Wilde**
"""
let attributedQuote = try! AttributedString(markdown: quote)

struct ContentView: View {
  var body: some View {
    Text(attributedQuote)
      .font(.system(size: 16, weight: .medium, design: .serif))
      .foregroundColor(.blue)
  }
}

The preview should look as follows:

In this example, the AttributedString uses Markdown syntax to make “Be yourself;” and “Oscar Wilde” bold and “everyone else is already taken.” italic. When this AttributedString is passed to the Text view, these styles are preserved.

Notice that when you apply the font and foregroundColor modifiers to the Text view, these styles apply to the entire text, but they don’t override the bold and italic styles specified by the AttributedString. This is because styles applied through AttributedString take precedence over SwiftUI modifiers.