Webアプリケーションをアラビア語やヘブライ語に翻訳するのは、簡単なほうの半分です。難しいのは、ページ全体を右から左に読めるようにすることです。サイドバーは反対側に移り、ステッパーは右から数え、チャットの吹き出しは位置を入れ替え、ツリーは逆方向にインデントされます。これを手作業で行うには、dir属性、別ビルドのBootstrap、そしてこれまでに書いたすべてのカスタムCSSルールの第2版が必要になります。
sgcWebSockets 2026.10のsgcHTMLは、そのすべてを代わりに行います。言語を選べば、レイアウトはそれに従います。
たった1行
uses
sgcHTML_Locale;
sgcHTMLSetLanguage(htmlLangArabic);
これでコンポーネントの組み込みテキストが従来どおりアラビア語に切り替わり、さらにその後にレンダリングするすべてのページの方向も切り替わります。ほかの言語に戻せば、ページは再び左から右になります。
言語コードだけでも使えます
レイアウトのために組み込みの翻訳は必要ありません。ページの言語が右から左の言語であれば、それだけで十分です。
Site.Lang := 'he'; { Hebrew: right-to-left, no other change }
sgcHTMLは、アラビア語、ヘブライ語、ペルシア語、ウルドゥー語、パシュトー語、イディッシュ語、ディベヒ語、ウイグル語、中央クルド語、シンド語を、地域指定の有無にかかわらず認識するため、ar-EGやhe-ILも動作します。
ページで何が変わるか
<html>タグにdir="rtl"が付きます。- ページは通常のスタイルシートの代わりに、Bootstrapの右から左用スタイルシートを読み込みます。これはライブラリに埋め込まれていて
/bootstrap.rtl.min.cssで提供され、CDNオプションを使う場合はCDN上のコピーに切り替わります。独自のスタイルシートパスを指定している場合は、そのままになります。 - sgcHTMLコンポーネントはミラー表示されます。サイトのサイドバーとアイコンレール、ステッパー、タイムライン、チャット、プレゼンス、ツリービュー、スライダー、スプリッター、グリッドの列リサイズと固定列、通知、アバター、カンバンボードが対象です。
- チャート、ゲージ、計器、ガントの時間軸は、意図的にそのままの形状を保ちます。値のスケールや時間軸はデータであり、読む順序ではないからです。
左から右のページは変わりません
ミラー表示は、右から左のページの内部にだけ適用される追加ルールで実現されています。既存のルールは1つも書き換えられていないため、英語のページはこれまでとまったく同じマークアップでレンダリングされ、新しいCSS論理プロパティを理解しない古い組み込みブラウザーでも引き続き動作します。
方向を強制する
自動判定は、いつでも上書きできます。サイトコンポーネントのDir、およびページビルダー、ログインページ、BootstrapテンプレートのHtmlDirは、'rtl'または'ltr'を受け付けます。空のままにすると自動判定になります。
Site.Lang := 'ar';
Site.Dir := 'ltr'; { Arabic text, left-to-right layout }
C++Builderと.NET
C++Builderは同じユニットを使用します。.NET版にも同じ機能があり、出力も同じです。
sgcHTMLLocaleFactory.sgcHTMLSetLanguage(TsgcHTMLLanguage.htmlLangArabic);
site.Lang = "ar";
site.Dir = ""; // empty means automatic
試してみる
新しいデモ22.RTLは、1つのページを英語、アラビア語、ヘブライ語で表示し、比較のために左から右に強制するリンクも備えています。Delphi向けには2種類あり、コードで構築するDemos\60.HTML\01.RunTime\22.RTLと、フォームから構築するDemos\60.HTML\02.DesignTime\22.RTLがあり、C#版はdemos\60.HTML\22.RTLです。オンラインで開くこともできます。
コンポーネントの一覧は、sgcHTML製品ページをご覧ください。
次に読む
動画で見る
短い動画をeSeGeCeチャンネルで公開しています。
ご質問、フィードバック、移行のサポートが必要ですか？お問い合わせください。コードを書いた本人たちが返信します。