Skip to main content Skip to docs navigation
Bootstrapの新しいバージョンがあります。

RTL

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

On this page

Get familiar

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

RTLCSS project,を読んでみるのもいいかもしれません。

実験機能

RTL 機能はまだ 実験 的なもので、ユーザーからのフィードバックに応じて進化していくでしょう。何かお気づきの点がありましたら、ご意見をお聞かせください。Issue Openでは、皆様のご意見をお待ちしております。

Required 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.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

Starter template

この修正された 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.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL examples

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

Approach

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 とあまり変わらないはずです。

Customize from source

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

Custom RTL values

RTLCSS value directivesを使うと、変数に 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;
}

Alternative font stack

カスタムフォントを使っている場合は、すべてのフォントが非ラテン文字に対応しているわけではないことに注意してください。Pan-European から Arabic ファミリーに切り替えるには、フォントスタックで /*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 を使うだけで、どちらかの方向を使うことができます。

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

このような考え方は理解できますが、以下の点にご注意ください。

  1. .ltr と .rtl を切り替える際には、dir と lang 属性を適宜追加してください。
  2. 最適化を検討したり、非同期にどちらかのファイルを読み込むようにするとよいでしょう。
  3. このようにスタイルを入れ子にすると、私たちの form-validation-state() ミキシンが意図したとおりに動作しなくなるので、自分で少しずつ調整する必要があります。#31223 参照.

パンくずリストの場合

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

追加リソース