RTL

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

このページでは

慣れます

まずはじめに紹介ページを読み、Bootstrap に慣れることをお勧めします。実行したら、RTL を有効にする方法について、ここを読み続けてください。

また、RTL へのアプローチの原動力となっている RTLCSS プロジェクトも参照してください。

実験的機能

RTL 機能はまだ実験段階であり、おそらくユーザーのフィードバックに従って進化するでしょう。何かを発見したか、提案する改善がありますか? 問題を開いてください。あなたの洞察を得たいと思っています。

必須 HTML

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

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL の例

いくつかある RTLの例の 1 つから始めてください。

アプローチ

RTL サポートを Bootstrap に組み込むアプローチには、CSS の記述方法と使用方法に影響を与える 2 つの重要な決定があります。

まず、 RTLCSSプロジェクトでビルドすることにしました。これにより、LTR から RTL に移行する際の変更とオーバーライドを管理するための強力な機能が得られます。また、1 つのコードベースから 2 つのバージョンの Bootstrap を構築することもできます。
次に、論理プロパティアプローチを採用するために、いくつかの方向性クラスの名前を変更しました。あなたのほとんどは、フレックスユーティリティのおかげで、論理プロパティを既に操作してleftいrightます。これにより、クラス名と値がオーバーヘッドなしで LTR と RTL に適したものになります。startend

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

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

ソースからカスタマイズ

カスタマイズに関しては、変数、マップ、および mixin を利用することをお勧めします。このアプローチは、 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;
}

代替フォントスタック

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

たとえば、Helvetica NeueLTRHelvetica Neue Arabicのフォントから RTL のフォントに切り替えるには、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、.rtlRTL ファイルの場合はが追加されます。これで、同じページで両方のファイルを使用できるようになり、コンポーネントラッパーで.ltror.rtlを使用するだけで、一方または他方の方向を使用できるようになりました。

エッジケースと既知の制限

このアプローチは理解できますが、次の点に注意してください。

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

ブレッドクラムセパレーターは、独自の新しい変数を必要とする唯一のケースです。つまり、$breadcrumb-divider-flippedデフォルトで$breadcrumb-divider.

RTL