Most of us develop our apps in English, so we get used to the "left-to-right" (LTR) flow. But if you're targeting a global audience, you can't just translate the strings and call it a day. In languages like Arabic or Hebrew, the entire mental model of the UI flips. If you've hardcoded "left" and "right" anywhere in your layout, your app is going to look broken the moment a user switches their system language.

Building a Direction-Aware Profile Row

I want to build a simple user profile row. It’ll have an avatar on one side, a name and email in the middle, and a "Verified" badge on the other. To make this work across both LTR and RTL, the golden rule is to stop thinking in terms of left and right and start thinking in leading and trailing.

In SwiftUI, leading means "where the text starts" and trailing means "where it ends." In English, leading is left. In Arabic, leading is right. Let's see how that looks in code:

struct ProfileRow: View {
    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: "person.circle.fill")
                .resizable()
                .frame(width: 50, height: 50)
            
            VStack(alignment: .leading) {
                Text("Amira Mansour")
                    .font(.headline)
                Text("amira@example.com")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
            
            Spacer()
            
            Image(systemName: "checkmark.seal.fill")
                .foregroundColor(.blue)
        }
        .padding()
    }
}

Notice I used alignment: .leading in the VStack. Because I didn't specify .left, SwiftUI will automatically flip that alignment to the right when the app is run in an RTL locale. The HStack also handles the order of elements automatically. The avatar will be on the left in English and on the right in Arabic without me changing a single line of code.

The Offset Trap

Here is where I usually mess up. Let's say I want to add a little visual flair—maybe I want the verified badge to slightly overlap the edge of the row. My instinct is to just nudge it over with an offset.

I'll add this to the badge image:

.offset(x: 10)

When I test this in English, it looks great. It pushes the badge 10 points to the right. But when I switch the simulator to Arabic, the layout flips, but the offset doesn't. The badge is now being pushed 10 points to the right, which in an RTL layout actually pushes it further away from the center, potentially clipping it off the screen or creating a weird gap. I've just created a bug that only exists for a fraction of my users.

Correcting Directional Shifts

To fix this, we can't use a raw number for the X-offset if that offset is intended to be "towards the end of the line." We need to make the offset value dynamic based on the current layout direction.

I can use the @Environment(\.layoutMode) property, but a cleaner way to handle "directional" offsets in a simple row is to avoid .offset entirely and use padding or a negative spacer. However, if you absolutely need a coordinate shift, you have to check the direction manually:

@Environment(\.layoutDirection) var direction

// ... inside the view ...
.offset(x: direction == .rightToLeft ? -10 : 10)

By checking layoutDirection, I'm explicitly telling the app: "If we are in RTL mode, move the element in the opposite direction." It's a bit more verbose, but it's the only way to ensure your "flair" doesn't become a "fail" in different locales. Now, whether the user is in New York or Cairo, the badge sits exactly where it should relative to the edge of the screen.

📋 Practical Task

The RTL-Compliant Settings Toggle

Build a "Settings Toggle" component that consists of a label on the leading side, a toggle switch on the trailing side, and a small "info" icon (info.circle) positioned immediately to the left of the toggle.

Requirements:

• Use HStack and Spacer to ensure the layout flips correctly between LTR and RTL.
• The "info" icon must maintain its position relative to the toggle (it should always be "before" the toggle in the reading order).
• Add a custom .offset(x: ...) to the info icon to move it slightly closer to the toggle, but implement a check using @Environment(\.layoutDirection) so the offset flips direction correctly in RTL mode.