GitHubで表示

RTL

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

このページの内容

理解する

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

また、RTLへのアプローチの原動力となっているRTLCSSプロジェクトについても読んでおくことをお勧めします。

BootstrapのRTL機能はまだ実験段階であり、ユーザーのフィードバックに基づいて進化していきます。何か気づいた点や改善点があれば、Issueを作成してください。皆様のご意見をお待ちしております。

必要なHTML

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

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" 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.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" 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.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 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" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTLの例

いくつかのRTLの例のいずれかから始めましょう。

アプローチ

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

まず、RTLCSSプロジェクトを使用して構築することを決定しました。 これにより、LTRからRTLに移行する際の変更とオーバーライドを管理するための強力な機能が提供されます。また、1つのコードベースから2つのバージョンのBootstrapを構築することもできます。
次に、論理プロパティアプローチを採用するために、いくつかの指向性クラスの名前を変更しました。 フレックスユーティリティのおかげで、ほとんどの人はすでに論理プロパティと対話しています。フレックスユーティリティは、leftやrightなどの directional プロパティを、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文字列マップのおかげで、これは非常に簡単です。 @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の組み合わせ実装で作業する場合に考慮すべきエッジケースと既知の制限事項

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

パンくずリストの区切り文字は、独自の新しい変数、つまりデフォルトで$breadcrumb-dividerになっている$breadcrumb-divider-flippedが必要な唯一のケースです。

RTL