TextStyle

TextStyle

Apply various effects, custom font, colors and even more on your texts in UITextView and UITextField. If you apply any text style on you text field or text view, the styling framework takes the text, transforms it to attributed string and renders all the properties for you.

Table of Contents

• General setup
• Updating TextStyle
• Combining TextStyle
• Text Effects

General setup

Properties to be set on TextStyle are

• font
• foregroundColor
• backgroundColor
• paragraphStyle
• letterSpacing
• strikethrought
• underline
• obliqueness
• shadow
• writingDirectionOverrides
• baselineOffset

Paragraph Style

This style allows you to modify paragraph using [.alignment, .lineHeight] properties.

Text Decoration

It allows you to decorate the text by its Style which provides line of [.single, .thick, .double], any of [.dot, .dash, .dashDot, .dashDotDot] patterns. The decoration can be applied by word with particular color.

Shadow

Defines properties for applying shadow to text. You can pick from [color, opacity, offset, radius, shouldRasterizeLayer, rasterizationScale] properties.

General usage example

let h1 = TextStyle(
    .font(.preferredFont(forTextStyle: .largeTitle)),
    .foregroundColor(.black),
    .backgroundColor(.yellow),
    .letterSpacing(1.5),
    .paragraphStyle([
        .alignment(.natural),
        .lineHeight(2.5)
    ]),
    .strikethrought(TextDecoration(
        style: .thick,
        pattern: .dash
    )),
    .underline(TextDecoration(
        style: .single,
        pattern: .dashDotDot,
        byWord: true,
        color: .red
    ))
)

UILabel.appearance().textStyle = h1
UIButton.appearance().setTextStyle(h1, for: .normal)

let h1 = TextStyle(
    .font(.preferredFont(forTextStyle: .largeTitle)),
    .foregroundColor(.black),
    .backgroundColor(.yellow)
)

myLabel.textStyle = h1

Updating TextStyle

To update any text style with new effects or properties refer to .updating function. The function combines the properties from old style with passed properties. If the properties from old style include any of newly set ones, the right associativity rule is applied and only new ones are applied.

let footnote = TextStyle(
    .font(.preferredFont(forTextStyle: .footnote))
)

let blueFootnote = footnote.updating(.foregroundColor(.blue))

myLabel.textStyle = blueFootnote

let blueFootnote = TextStyle(
    .font(.preferredFont(forTextStyle: .footnote))
    .foregroundColor(.blue)
)

let redFootnote = blueFootnote.updating(.foregroundColor(.red))

myLabel.textStyle = redFootnote

Combining TextStyle

To create various styles and apply them generally in your application you can combine the styles by using + operator. Base styles can be defined and combined with special effects.

let blueFootnote = TextStyle(
    .font(.preferredFont(forTextStyle: .footnote))
    .foregroundColor(.blue)
)

let yellowBackground = TextStyle(
    .backgroundColor(.yellow)
)

myLabel.textStyle = blueFootnote + yellowBackground

let h1 = TextStyle(
    .font(.preferredFont(forTextStyle: .largeTitle)),
    .letterSpacing(1.5),
    .paragraphStyle([
        .alignment(.natural),
        .lineHeight(2.5)
    ]),
    .strikethrought(TextDecoration(
        style: .thick,
        pattern: .dash
    )),
    .underline(TextDecoration(
        style: .single,
        pattern: .dashDotDot,
        byWord: true,
        color: .red
    ))
)

let blue = TextStyle(
    .foregroundColor(.blue)
)

let yellowBackground = TextStyle(
    .backgroundColor(.yellow)
)

let secret = TextStyle(
    .writingDirectionOverrides([
        .rightToLeftOverride
    ])
)

let title = h1 + blue + yellowBackground

myLabel.textStyle = title
secretMessageLabel.textStyle = h1 + secret

TextEffects

Apply fancy effects to your text. Highlight one word or use regex pattern to highlight all special characters. if you want to insert image into your text, no problem.

let bigRed: TextStyle = ...
let bigGreen: TextStyle = ...
let smallCyan: TextStyle = ...

let bigRedFirstWord = TextEffect(
    style: bigRed,
    matching: First(occurenceOf: "Styles")
)

let bigGreenLastWord = TextEffect(
    style: bigGreen,
    matching: Block { $0.range(of: "awesome") }
)

let everyOtherTildaCyan = TextEffect(
    style: smallCyan,
    matching: Regex("~.*?(~)")
)

let tint = TextStyle(
    .foregroundColor(.red)
)

let logo: UIImage = ...
let logoBeforeCompanyName = TextEffect(image: logo, style: tint, matching: First(occurenceOf: "Inloop"))

let styleWithEffects = TextStyle(
    .font(.preferredFont(forTextStyle: .body)),
    .backgroundColor(.yellow),
    effects: [
        bigRedFirstWord,
        bigGreenLastWord,
        everyOtherTildaCyan,
        logoBeforeCompanyName
    ]
)