Skip to main content Skip to docs navigation
View on GitHub

RTL

レイアウト、コンポーネント、ユーティリティ全体でBootstrapの右から左へのテキストのサポートを有効にする方法を学びます。

On this page

慣れる

まず、Getting Startedの紹介ページを読んでBootstrapに慣れることをお勧めします。一通り読み終えたら、ここに戻ってRTLを有効にする方法を読み続けてください。

RTLへのアプローチを支えるRTLCSSプロジェクトについても読むことをお勧めします。

BootstrapのRTL機能はまだ実験的です。ユーザーフィードバックに基づいて進化します。何か見つけたり、改善の提案がありますか？イシューを開いてください。お客様の洞察をお待ちしています。

必要なHTML

Bootstrap搭載ページでRTLを有効にするには、2つの厳密な要件があります。

  1. <html>要素にdir="rtl"を設定します。
  2. <html>要素にlang="ar"のような適切なlang属性を追加します。

そこから、CSSのRTLバージョンを含める必要があります。たとえば、RTLが有効になっているコンパイルおよび圧縮されたCSSのスタイルシートは次のとおりです:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-pY+WKBwnAVGe36lfg2lNvHbPwGAatjJUT4ULPagTeMPLRokRdDLUAgZjDwZek0kb" crossorigin="anonymous">

スターターテンプレート

この変更されたRTLスターターテンプレートに上記の要件が反映されていることがわかります。

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-pY+WKBwnAVGe36lfg2lNvHbPwGAatjJUT4ULPagTeMPLRokRdDLUAgZjDwZek0kb" crossorigin="anonymous">

    <title>مرحبًا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبًا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-jdSIJTK9l6XwXj3RixpVDXtMcA2bFd9O81RlLAwhpr2oXRqvQP88rr16IeFXTgFE" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-L0XZBFD+a5R/Q+jXRJXW+YY6nKl+MBLAye9ktyaUBtVGzgUqd6RLzfYvnkfwyaJV" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL例

いくつかのRTL例のいずれかから始めてください。

アプローチ

BootstrapにRTLサポートを構築するアプローチには、CSSの記述と使用方法に影響を与える2つの重要な決定が伴います:

  1. まず、RTLCSSプロジェクトでビルドすることにしました。 これにより、LTRからRTLに移行する際の変更とオーバーライドを管理するための強力な機能が得られます。また、1つのコードベースから2つのバージョンのBootstrapをビルドできます。

  2. 次に、論理プロパティアプローチを採用するために、いくつかの方向クラスの名前を変更しました。 ほとんどの方は、flexユーティリティのおかげで論理プロパティとすでにやり取りしています。これらは、leftやrightのような方向プロパティをstartとendに置き換えます。これにより、クラス名と値がオーバーヘッドなしでLTRとRTLに適したものになります。

たとえば、margin-leftの.ml-3の代わりに.ms-3を使用します。

ソースSassまたはコンパイルされたCSSを介してRTLで作業することは、デフォルトのLTRとそれほど変わらないはずです。

ソースからのカスタマイズ

カスタマイズに関しては、変数、マップ、ミックスインを活用することが望ましい方法です。このアプローチは、RTLCSSの仕組みのおかげで、コンパイルされたファイルから後処理される場合でも、RTLに対して同じように機能します。

カスタムRTL値

RTLCSS値ディレクティブを使用すると、RTLに対して変数が異なる値を出力するようにできます。たとえば、コードベース全体で$font-weight-boldのウェイトを減らすには、/*rtl: {value}*/構文を使用できます:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

これにより、デフォルトCSSとRTL CSSに対して次のように出力されます:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

代替フォントスタック

カスタムフォントを使用している場合、すべてのフォントが非ラテン文字をサポートしているわけではないことに注意してください。汎ヨーロッパからアラビア語のファミリーに切り替えるには、フォントスタックで/*rtl:insert: {value}*/を使用してフォントファミリーの名前を変更する必要がある場合があります。

たとえば、LTRのHelvetica NeueフォントからRTLのHelvetica Neue Arabicに切り替えるには、Sassコードは次のようになります:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

LTRとRTLを同時に使用

同じページでLTRとRTLの両方が必要ですか？RTLCSS String Mapsのおかげで、これは非常に簡単です。@importをクラスでラップし、RTLCSSのカスタム名前変更ルールを設定します:

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

SassとRTLCSSを実行すると、CSSファイルの各セレクターに.ltrが付加され、RTLファイルには.rtlが付加されます。これで、同じページで両方のファイルを使用でき、コンポーネントラッパーで.ltrまたは.rtlを使用するだけで、どちらかの方向を使用できます。

LTRとRTLの組み合わせ実装で作業する際に考慮すべきエッジケースと既知の制限:

  1. .ltrと.rtlを切り替える際は、それに応じてdirとlang属性を追加してください。
  2. 両方のファイルを読み込むと、実際のパフォーマンスのボトルネックになる可能性があります: 最適化を検討し、ファイルの1つを非同期で読み込むことを試してみてください。
  3. この方法でスタイルをネストすると、form-validation-state()ミックスインが意図したとおりに動作しなくなるため、自分で少し調整する必要があります。#31223を参照。

このプロセスを自動化し、単一のスタイルシート内で両方向に関するいくつかのエッジケースに対処したいですか？その場合は、ソースファイルを処理するためのPostCSSプラグインとしてPostCSS RTLCSSの使用を検討してください。PostCSS RTLCSSは、方向反転プロセスを管理するために内部でRTLCSSを使用しますが、反転された宣言をLTRとRTLの異なるプレフィックスを持つルールに分離します。これにより、同じスタイルシートファイル内で両方の方向を持つことができます。これにより、ページのdirを変更するだけで(または、プラグインを適切に設定すれば特定のクラスを変更して)、LTRとRTLの方向を切り替えることができます。

PostCSS RTLCSSを使用してLTRとRTLの組み合わせ実装を構築する際に考慮すべき重要事項:

  1. html要素にdir属性を追加することをお勧めします。こうすることで、方向を変更したときにページ全体が影響を受けます。また、それに応じてlang属性も追加してください。
  2. 両方向を含む単一のバンドルは、最終的なスタイルシートのサイズを増加させます(平均して20%-30%): 最適化を検討してください。
  3. PostCSS RTLCSSは、CSSルールを削除しないため、/* rtl:remove */ディレクティブと互換性がないことに注意してください。/* rtl:remove */、/* rtl:begin:remove */、および/* rtl:end:remove */ディレクティブを、それぞれ/* rtl:freeze */、/* rtl:begin:freeze */、および/* rtl:end:freeze */ディレクティブに置き換える必要があります。これらのディレクティブは、対象のルールまたは宣言に現在の方向でプレフィックスを付けますが、RTL対応物を作成しません(RTLCSSのremoveと同じ結果)。

パンくずリストのケース

パンくずリストの区切り文字は、独自の新しい変数を必要とする唯一のケースです。具体的には$breadcrumb-divider-flippedで、デフォルトは$breadcrumb-dividerです。

追加リソース