Skip to main content Skip to docs navigation
View on GitHub

RTL

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

On this page

Get familiar

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

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

Experimental feature

The RTL feature is still experimental and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? Open an issue, we’d love to get your insights.

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.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" 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.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" 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.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" 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 */"},
  // 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;

The breadcrumb case

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

Additional resources