メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

右書き（RTL） v5.0.0新設


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

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.0.0新設

まず慣れる（Get familiar）

まず最初に「はじめに」のページを読んで、Bootstrapに慣れることを推奨。実行したらRTL（右書き）を有効にする方法についてこのページを読む。

また、RTLへのアプローチを強化するRTLCSSプロジェクトを読むことも推奨。

必要なHTML（Required HTML）v5.3.6時点

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

  1. <html> 要素に dir="rtl"（文字の方向を右から左に）を設定。
  2. <html> 要素に lang="ar"（アラビア語）などの適切な lang 属性を追加。

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

HTML<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css" integrity="sha384-MdqCcafa5BLgxBDJ3d/4D292geNL64JyRtSGjEszRUQX9rhL1QkcnId+OT7Yw+D+" crossorigin="anonymous">

スターターテンプレート（Starter template）v5.3.6時点

以下のRTLに変更されたスターターテンプレートで上記の要件が反映されているか確認。

設定例
<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- 必要なメタタグ  -->
    <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.6/dist/css/bootstrap.rtl.min.css" integrity="sha384-MdqCcafa5BLgxBDJ3d/4D292geNL64JyRtSGjEszRUQX9rhL1QkcnId+OT7Yw+D+" crossorigin="anonymous">

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

    <!-- オプションのJavaScript：2つのうちどちらかを選択すること！ -->

    <!-- オプション1：Popperを使用したBootstrapバンドル版 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>

    <!-- オプション2：最初にPopper、次に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.6/dist/js/bootstrap.min.js" integrity="sha384-RuyvpeZCxMJCqVUGFI0Do1mQrods/hhxYlcVfGPOfQtPJh0JCw12tUAZ/Mv10S7D" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTLの実例（RTL examples）

いくつかあるRTLの実例（公式サイトに掲載）の1つから始めてみる。

アプローチ（Approach）

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

  1. まず、RTLCSSプロジェクトで構築することにした。これにより、LTRからRTLに移行する際の変更と再定義を管理するための強力な機能がいくつか提供される。また、1つのコードベースから2つのバージョンのBootstrapの構築もできる。
  2. 次に、論理プロパティのアプローチを採用するため、いくつかの方向クラスの名称を変更した。Flexユーティリティのおかげで、ほとんどの人はすでに論理プロパティを操作している。これらは、start と end を優先し、left や right などの方向プロパティと置き換える。これでクラス名と値がオーバーヘッドなしでLTR（左書き）とRTL（右書き）で適切になる。

例えば、margin-left の設定では、.ml-3 の代わりに .ms-3 を使用する。

ただし、ソースSassやコンパイル済CSSを経由したRTLの操作は、デフォルトのLTRとそれほど変わらないはず。

ソースからカスタマイズ（Customize from source）

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

カスタムのRTL値（Custom RTL values）

RTLCSS値ディレクティブを使用すると、変数の出力をRTLの異なる値にできる。例えば、コードベース全体で $font-weight-bold の重みを減らすには、/*rtl: {value}*/ 構文を使用：

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

デフォルトのCSSとRTLCSSでは、次のようになる：

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

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

代替フォントスタック（Alternative font stack）

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

例えば、LTR用の Helvetica Neue Webfont からRTL用の Helvetica Neue Arabic に切り替えるには、Sassコードは次のようになる：

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // クロスプラットフォームの汎用フォントファミリー（デフォルトのユーザーインターフェイスフォント）
  system-ui,
  // MacOS と iOS (San Francisco)用の Safari
  -apple-system,
  // macOSのChrome56未満の場合 (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // 基本のwebフォールバック
  Arial,
  // Linux
  "Noto Sans",
  // Sans serifのフォールバック
  sans-serif,
  // 絵文字用フォント
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

左書きと右書きの同時使用（LTR and RTL at the same time）v5.0.0-beta2追加、v5.3.4更新

同じページにLTRとRTLの両方が必要なら、RTLCSS文字列マップで簡単に使用できる。@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 を使用すれば両方向で使用できる。

この処理を自動化し、1つのスタイルシート内で両方向に関わる複数の特殊なケースに対処したいなら、ソースファイルを処理するためのPostCSSプラグインとしてPostCSS RTLCSSの使用を検討してください。PostCSS RTLCSSは、バックグランドでRTLCSSを使用して方向反転処理を管理するが、反転した宣言をLTRとRTLで異なる接頭辞を持つルールに分けるため、ページの dir を変更するだけでLTRとRTLの方向を切り替えられる（プラグインを適宜設定すれば、特定のクラスも修正できる）。v5.3.4追加

パンくずリストの場合（The breadcrumb case）

唯一、パンくずリストの仕切りだけは、デフォルトでは $breadcrumb-divider だが、独自に新しい変数 $breadcrumb-divider-flipped を必要とする。

追加のリソース（Additional resources）