Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC22 · 34 min · Accessibility & Inclusion / SwiftUI & UI Frameworks

Get it right (to left)

Discover how to develop your app so that it can be localized into "right-to-left" languages such as Arabic and Hebrew. We’ll take you through important considerations for these languages, share solutions to challenges, and provide best practices for delivering a great right-to-left experience in your app.

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 9 snippets

Control orientation example swift · at 12:55 ↗ 
struct ContentView: View {
    var body: some View {
    VStack(alignment: .leading) {
        Button(action: {}) {
            Label("Preview", systemImage: "arrowtriangle.forward.fill")
        }.labelStyle(IconOnRightLabelStyle())
            
            HStack() {
                Button(action: {}) {
                    Label("Left", systemImage: "arrow.left")
                }.labelStyle(TitleAndIconLabelStyle())

                Button(action: {}) {
                    Label("Right", systemImage: "arrow.right")
                }.labelStyle(IconOnRightLabelStyle())
            }.environment(\.layoutDirection, .leftToRight)
        }.padding()
    }
}
Control orientation custom label style example swift · at 14:22 ↗ 
struct IconOnRightLabelStyle : LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.title
            configuration.icon
        }
    }
}
Control orientation example swift · at 14:43 ↗ 
struct ContentView: View {
    var body: some View {
    VStack(alignment: .leading) {
        Button(action: {}) {
            Label("Preview", systemImage: "arrowtriangle.forward.fill")
        }.labelStyle(IconOnRightLabelStyle())
            
            HStack() {
                Button(action: {}) {
                    Label("Left", systemImage: "arrow.left")
                }.labelStyle(TitleAndIconLabelStyle())

                Button(action: {}) {
                    Label("Right", systemImage: "arrow.right")
                }.labelStyle(IconOnRightLabelStyle())
            }.environment(\.layoutDirection, .leftToRight)
        }.padding()
    }
}
Control orientation example—keeping controls from reversing swift · at 18:58 ↗ 
struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Picker(selection: $textStyle, label: Text("Text Style")) {
                Text("B").tag(TextStyle.bold)
                Text("I").tag(TextStyle.italic)
                Text("U").tag(TextStyle.underline)
                Text("S").tag(TextStyle.strikethrough)
            }.pickerStyle(.segmented)

            Picker(selection: $alignment, label: Text("Alignment")) {
                Image(systemName: "text.alignleft").tag(TextAlignment.left)
                Image(systemName: "text.aligncenter").tag(TextAlignment.center)
                Image(systemName: "text.alignright").tag(TextAlignment.right)
           }.pickerStyle(.segmented)
             .environment(\.layoutDirection, .leftToRight)
        }
    }
}
Control orientation example—form with multiline text alignment modifier swift · at 22:38 ↗ 
var body: some View {
   Form {
        TextField("Password:", text: $password)
        TextField("Verify:", text: $verifyPassword)
        TextField("Password Hint:\n(Recommended)", text: $passwordHint)
            .multilineTextAlignment(.trailing)
    }.padding()
}
Set up Auto Layout in code swift · at 27:14 ↗ 
myView.leadingAnchor.constraint(equalTo: mySuperView.leadingAnchor, constant:16)
Digits in Arabic swift · at 29:05 ↗ 
myLabel.string = String(localized: "There are \(peopleInChat) people in this chat.",
                        comment: "Label indicating number of chat participants")

Text("There are \(peopleInChat) people in this chat.",
     comment: "Label indicating number of chat participants")
Digits in Arabic swift · at 30:12 ↗ 
myLabel.string = String(localized: "This application supports \(3) file formats.",
                        comment: "Label showing number of supported file formats
                        (number is always 3)")
Numbers in RTL text swift · at 31:41 ↗ 
myLabel.stringValue = String(localized: "\(percentComplete.formatted(.percent)) complete")

Resources