Skip to main content Skip to docs navigation
GitHubで見る

RTL

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

項目

使いこなす

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

RTLCSSプロジェクトを読んでみるのもいいかもしれません。

BootstrapのRTL機能はまだ実験的であり、ユーザーからのフィードバックに基づいて改善しています。何かお気づきの点や、改善案をお持ちですか? 課題を開き、ぜひ、ご意見をお聞かせください。

必須HTML

Bootstrapを搭載したページでRTLを有効にするには、2つの厳しい条件があります。

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

そこから、RTL版のCSSを含める必要があります。例えば、以下はRTLを有効にしてコンパイルされたミニ化されたCSSのスタイルシートです:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" 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.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" 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.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" 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.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTLの例

いくつかのRTL例のうちの1つから始めましょう。

アプローチ

RTLサポートを構築するという私たちのアプローチは、私たちのCSSの書き方や使い方に影響を与える2つの重要な決定に由来しています:

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

  2. 第二に、論理的なプロパティのアプローチを採用するために、一握りの方向性クラスの名前を変更しました。 ほとんどの方は、フレックス・ユーティリティのおかげですでに論理プロパティと対話したことがあると思いますが、leftやrightのような方向プロパティをstartや endに置き換えます。

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

ソースのSassやコンパイルされたCSSを使ってRTLで作業する場合、デフォルトのLTRとあまり変わらないはずです。

ソースからカスタムする

カスタマイズに関して言えば、好ましい方法は、変数、マップ、およびMixinsを利用することです。RTLCSSの仕組みのおかげで、コンパイルされたファイルから後処理されたとしても、このアプローチはRTLに対しても同じように動作します。

カスタムRTLの値

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

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

これは、デフォルトのCSSとRTLCSSの場合、以下のように出力されます:

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

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

代替フォントスタック

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

例えば、LTR用のHelvetica Neue Webfontから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. 最適化を検討したり、非同期にどちらかのファイルを読み込むようにするとよいでしょう。
  3. このようにスタイルを入れ子にすると、私たちのform-validation-state()Mixinsが意図したとおりに動作しなくなるので、自分で少しずつ調整する必要があります。#31223参照.

パンくずの場合

パンくずセパレータは、独自の新しい変数$breadcrumb-divider-flippedを必要とする唯一のケースであり、デフォルトは$breadcrumb-dividerです。

その他の資料