Swift Academy · Lesson

Right-to-Left and Layout Direction

Support RTL languages and mirrored layouts.

Right-to-Left and Layout Direction is a free Swift Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Swift Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Languages That Read Right-to-Left

Arabic, Hebrew, Persian, and Urdu are written right-to-left (RTL). For these users the entire interface should mirror: navigation back buttons point right, lists align to the right edge, and progress flows from right to left. Supporting RTL is a core part of internationalization.

// RTL locales include: ar, he, fa, ur
// The whole UI mirrors, not just the text.

Leading and Trailing, Not Left and Right

The golden rule: design with leading and trailing instead of left and right. Leading is where reading starts (left in English, right in Arabic). When you use leading/trailing, the system mirrors your layout for free in RTL.

// SwiftUI uses leading/trailing automatically:
// HStack { Image(...); Text("Title") }
// .padding(.leading, 16)  // flips in RTL
let edge = "leading mirrors automatically"
_ = edge

Reading layoutDirection

SwiftUI exposes the current direction through the layoutDirection environment value, which is either .leftToRight or .rightToLeft. Read it when you need direction-dependent logic, such as choosing a chevron asset.

// In a SwiftUI View:
// @Environment(\.layoutDirection) var direction
// let chevron = direction == .rightToLeft
//     ? "chevron.left" : "chevron.right"
let ltr = "leftToRight"
let rtl = "rightToLeft"
print(ltr, rtl)

Mirroring SF Symbols and Images

Many SF Symbols mirror automatically. For directional custom images, mark them to flip with the layout direction so an arrow that points forward keeps pointing forward in RTL. The modifier flipsForRightToLeftLayoutDirection controls this.

// SwiftUI:
// Image("forwardArrow")
//   .flipsForRightToLeftLayoutDirection(true)
let shouldFlip = true
_ = shouldFlip

Forcing a Direction

Occasionally a subview must keep a fixed direction — for example a phone number or a left-to-right code snippet inside an RTL layout. Override it with the environment(\.layoutDirection, _) modifier on just that subtree.

// Keep a code block LTR even in an RTL app:
// CodeView(snippet)
//   .environment(\.layoutDirection, .leftToRight)
let forced = "leftToRight subtree"
_ = forced

Text Alignment and multilineTextAlignment

Use .leading and .trailing for text alignment too. A paragraph aligned .leading hugs the right edge in Arabic automatically. Avoid .left/.right which never flip.

// Text(longBody)
//   .multilineTextAlignment(.leading) // flips in RTL
let alignment = "leading flips, left does not"
_ = alignment

Bidirectional Text

RTL paragraphs often embed LTR runs (URLs, numbers, English brand names). The Unicode Bidirectional Algorithm handles ordering, but you can wrap ambiguous runs with directional isolate characters to prevent visual scrambling.

import Foundation
// First-strong isolate keeps an embedded run intact
let isolated = "\u{2068}example.com\u{2069}"
print(isolated.count > 0)

Semantic Content for Non-Mirroring Views

Some controls — media transport buttons, timelines — should NOT mirror because their meaning is physical, not reading-based. UIKit's semanticContentAttribute (.playback, .spatial, .forceLeftToRight) tells the system when to keep a fixed direction.

// UIKit example:
// playbackBar.semanticContentAttribute = .playback
// mapOverlay.semanticContentAttribute = .spatial
let keepFixed = "playback / spatial do not mirror"
_ = keepFixed

Testing RTL Without Translating

You do not need an Arabic translation to test mirroring. Run the app with the Right-to-Left Pseudolanguage in the scheme's app-language setting. The UI mirrors using your existing strings so you can spot hardcoded .left/.right bugs instantly.

// Edit Scheme > Run > Options >
//   App Language: Right-to-Left Pseudolanguage
let test = "mirror without real translations"
_ = test

Common RTL Bugs

Watch for these:

Hardcoded .left/.right alignment or padding.
Manually positioned views using fixed x offsets.
Custom directional images that fail to flip.
Back chevrons or sliders that point the wrong way.
Concatenated bidirectional strings that scramble.

// Replace fixed offsets with leading/trailing layout
// so AutoLayout / SwiftUI can mirror them.
let rule = "prefer leading/trailing everywhere"
_ = rule

An RTL-Ready Row

A well-built row uses leading/trailing throughout, lets symbols flip, and forces direction only where semantics demand it. Such a view needs zero changes to look correct in both English and Arabic.

// HStack {
//   Image(systemName: "star")
//   Text("Favorite")
//   Spacer()
//   Image(systemName: "chevron.forward") // mirrors
// }
// .padding(.horizontal, 16)
let ready = "row mirrors automatically"
_ = ready

Quick Check

Recall the core principle of RTL-safe layout.

Recap

You learned to support right-to-left languages:

Design with leading/trailing, never left/right.
Read the layoutDirection environment for direction-dependent logic.
Flip directional images; override direction for fixed subtrees like code or phone numbers.
Use semanticContentAttribute for playback/spatial controls that must not mirror.
Test with the RTL pseudolanguage before shipping.

Frequently asked questions

Is the “Right-to-Left and Layout Direction” lesson free?

Yes — the full text of “Right-to-Left and Layout Direction” is free to read here on the web, and the Swift Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Swift Academy course, upgrade to CoddyKit PRO.

What will I learn in “Right-to-Left and Layout Direction”?

Support RTL languages and mirrored layouts. You practise Swift Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Swift Academy?

No prior experience is required. Swift Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Right-to-Left and Layout Direction” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Swift Academy lesson?

Yes. Every Swift Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Swift Academy