右から左への言語とレイアウト方向
RTL言語と左右反転されたレイアウトに対応します。
「右から左への言語とレイアウト方向」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。
右から左に読む言語
アラビア語、ヘブライ語、ペルシア語、ウルドゥー語は右から左（RTL）に書きます。これらのユーザーに対しては、インターフェース全体を左右反転させる必要があります。戻るナビゲーションボタンは右を指し、リストは右端に揃え、進行状況は右から左へ進むようにします。RTLへの対応は国際化の中心的な要素です。
// RTL locales include: ar, he, fa, ur
// The whole UI mirrors, not just the text.Left/RightではなくLeading/Trailing
重要な原則は、leftとrightではなくleadingとtrailingを使って設計することです。leadingは読み始める側を指します（英語では左、アラビア語では右です）。leading/trailingを使えば、RTLではシステムがレイアウトを自動的に左右反転してくれます。
// SwiftUI uses leading/trailing automatically:
// HStack { Image(...); Text("Title") }
// .padding(.leading, 16) // flips in RTL
let edge = "leading mirrors automatically"
_ = edgelayoutDirectionの読み取り
SwiftUIでは、現在の方向をlayoutDirection環境値から取得できます。値は.leftToRightまたは.rightToLeftのいずれかです。シェブロンのアセットを選ぶ場合など、方向に依存するロジックが必要なときに読み取ってください。
// 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)SF Symbolsと画像の左右反転
多くのSF Symbolsは自動的に左右反転します。方向を示すカスタム画像では、レイアウトの方向に応じて反転するよう指定してください。そうすれば、RTLでも前方を指す矢印は前方を指し続けます。これを制御するのがflipsForRightToLeftLayoutDirectionモディファイアです。
// SwiftUI:
// Image("forwardArrow")
// .flipsForRightToLeftLayoutDirection(true)
let shouldFlip = true
_ = shouldFlip方向の強制
RTLレイアウト内の電話番号や左から右に読むコードスニペットなど、サブビューで固定の方向を維持しなければならない場合があります。そのサブツリーだけにenvironment(\.layoutDirection, _)モディファイアを適用して上書きしてください。
// Keep a code block LTR even in an RTL app:
// CodeView(snippet)
// .environment(\.layoutDirection, .leftToRight)
let forced = "leftToRight subtree"
_ = forcedテキストの配置とmultilineTextAlignment
テキストの配置にも.leadingと.trailingを使ってください。.leadingで揃えた段落は、アラビア語では自動的に右端に寄ります。RTLで反転しない.left/.rightは避けてください。
// Text(longBody)
// .multilineTextAlignment(.leading) // flips in RTL
let alignment = "leading flips, left does not"
_ = alignment双方向テキスト
RTLの段落には、URL、数値、英語のブランド名など、LTRの文字列が含まれることがよくあります。Unicode双方向アルゴリズムが順序を処理しますが、曖昧な文字列を方向分離文字で囲むことで、表示が乱れるのを防げます。
import Foundation
// First-strong isolate keeps an embedded run intact
let isolated = "\u{2068}example.com\u{2069}"
print(isolated.count > 0)左右反転しないビューのセマンティックコンテンツ
メディアの再生操作ボタンやタイムラインなど、一部のコントロールは読み方向ではなく物理的な意味を持つため、左右反転すべきではありません。UIKitのsemanticContentAttribute（.playback、.spatial、.forceLeftToRight）を使うと、固定方向を維持するタイミングをシステムに伝えられます。
// UIKit example:
// playbackBar.semanticContentAttribute = .playback
// mapOverlay.semanticContentAttribute = .spatial
let keepFixed = "playback / spatial do not mirror"
_ = keepFixed翻訳なしでRTLをテストする
左右反転をテストするために、アラビア語へ翻訳する必要はありません。スキームのアプリ言語設定でRight-to-Left Pseudolanguageを選んでアプリを実行してください。既存の文字列を使ったままUIが左右反転するため、ハードコードされた.left/.rightの不具合をすぐに見つけられます。
// Edit Scheme > Run > Options >
// App Language: Right-to-Left Pseudolanguage
let test = "mirror without real translations"
_ = testRTLでよくあるバグ
次の点に注意してください:
- 配置やパディングに
.left/.rightをハードコードしている。 - 固定のxオフセットを使ってビューを手動で配置している。
- 方向を示すカスタム画像が左右反転しない。
- 戻るボタンのシェブロンやスライダーが間違った方向を指している。
- 双方向の文字列を連結した結果、表示が乱れる。
// Replace fixed offsets with leading/trailing layout
// so AutoLayout / SwiftUI can mirror them.
let rule = "prefer leading/trailing everywhere"
_ = ruleRTL対応の行
適切に構築された行では、全体を通してleading/trailingを使い、シンボルを左右反転できるようにし、セマンティクス上必要な場合にだけ方向を固定します。このようなビューなら、英語でもアラビア語でも正しく表示するための変更は一切必要ありません。
// HStack {
// Image(systemName: "star")
// Text("Favorite")
// Spacer()
// Image(systemName: "chevron.forward") // mirrors
// }
// .padding(.horizontal, 16)
let ready = "row mirrors automatically"
_ = readyクイックチェック
RTLに安全なレイアウトの中心原則を思い出してください。
まとめ
右から左に読む言語への対応方法を学びました:
- left/rightではなく、leading/trailingを使って設計してください。
- 方向に依存するロジックには、
layoutDirection環境値を読み取ってください。 - 方向を示す画像を左右反転し、コードや電話番号など方向を固定するサブツリーでは上書きしてください。
- 左右反転してはいけない再生操作や空間的なコントロールには、
semanticContentAttributeを使ってください。 - リリース前にRTL疑似言語でテストしてください。
AI チューターと学ぶ Swift — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 122
- レッスン
- 409
よくある質問
「右から左への言語とレイアウト方向」レッスンは無料ですか？
はい。「右から左への言語とレイアウト方向」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。
「右から左への言語とレイアウト方向」で何を学びますか？
RTL言語と左右反転されたレイアウトに対応します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Swift Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「右から左への言語とレイアウト方向」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwift Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- String Catalogとローカライズ文字列
- 複数形とStringsdict
- ロケール対応の書式設定
- 右から左への言語とレイアウト方向