RTL 言語の地域では、読み書きは右から左に行われます。したがって、ほとんどのインターフェースエレメントを反転させ、正しく表示されるようにする必要があります。
例として、Facebook の LTR (Left-to-Right) 設計と RTL を比較します:
以下の模式図で、LTR 設計がどのように反転されているかに注目してください:
ユーザーインターフェースを反転させると、次の変更が行われます:
- テキストフィールドのアイコンはフィールドの反対側に表示されます。
- ナビゲーションボタンは逆の順序で表示されます。
- 方向を示すアイコン (矢印やページングなど) は反転します。
- テキスト (RTL 言語に翻訳された場合) は右揃えになります。
次の項目は反転しません:
- 方向を示さないアイコンや画像 (カメラなど)
- 数字 (時計の数字や電話番号など)
- チャートやグラフ (X 軸と Y 軸は常に同じ方向になります)
- ビデオコントロールとタイムラインインジケータ (前述のとおり)
- 時計
- 音符と楽譜
ネイティブ モバイル ジェネレーターを使用すると、これがプラットフォームによって自動的に実行されます。GeneXus アプリケーションは RTL 言語を使用していることを認識し、必要に応じて反転処理が行われます。
[ Base CSS ] プロパティが "None" に設定された
Design System オブジェクト (DSO) を使用するアプリケーションは、アプリケーションの言語の方向を一致させるための
"dir" 属性とともに生成されます。しかし、適用されるスタイルが、それぞれのケースに応じて適切に表示させるためのガイドラインに従っていることを確認することが重要です。
既に RTL
テーマがある場合は、以下の手順に従って
Design System オブジェクト (DSO) に変換します:
[ Base CSS ] プロパティの値が None 以外である Theme オブジェクトを使用する Web アプリケーションを使用する場合は、2 つの Theme オブジェクトが必要です。1 つは標準の LTR インターフェースで使用し、もう 1 つは既定構成の反転に使用します。各種コントロールおよびテーマクラスに正しい設定を適用する必要があります。
- IDE でテーマを比較し、方向やカスタムプロパティの変更点を確認し、それらを自分の RTL テーマに適用します。いくつか例を挙げると、フロート、方向、テキスト配置などが該当します。設計によっては、外側余白や内側余白などの変更が必要になることもあります。
- rtlcss.com などの外部サイトを使用して RTL CSS を直接生成し、それを GeneXus にインポートし直します。
- 新しい空の DSO を作成し、 [ Base CSS ] プロパティを、Bootstrap v3 RTL を使用するように変更します。
- 必要なクラスを調整するか、前述のように新しいクラスを作成します。
RTL スタイルを追加する方法
GeneXus アプリケーションのローカライズ