RTL
Bootstrap で、レイアウト、コンポーネント、およびユーティリティ全体で右から左へのテキストのサポートを有効にする方法を学びます。
慣れます
まずはじめに紹介ページを読み、Bootstrap に慣れることをお勧めします。実行したら、RTL を有効にする方法について、ここを読み続けてください。
また、RTL へのアプローチの原動力となっている RTLCSS プロジェクトも参照してください。
実験的機能
RTL 機能はまだ実験段階であり、おそらくユーザーのフィードバックに従って進化するでしょう。何かを発見したか、提案する改善がありますか? 問題を開いてください。あなたの洞察を得たいと思っています。
必須 HTML
Bootstrap を利用したページで RTL を有効にするには、2 つの厳密な要件があります。
- 要素に設定
dir="rtl"
し<html>
ます。 lang
のような適切な属性をlang="ar"
要素に追加します<html>
。
そこから、CSS の RTL バージョンを含める必要があります。たとえば、RTL を有効にしてコンパイルおよび縮小した CSS のスタイルシートは次のとおりです。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
RTL の例
いくつかある RTLの例の 1 つから始めてください。
アプローチ
RTL サポートを Bootstrap に組み込むアプローチには、CSS の記述方法と使用方法に影響を与える 2 つの重要な決定があります。
-
まず、 RTLCSSプロジェクトでビルドすることにしました。これにより、LTR から RTL に移行する際の変更とオーバーライドを管理するための強力な機能が得られます。また、1 つのコードベースから 2 つのバージョンの Bootstrap を構築することもできます。
-
次に、論理プロパティ アプローチを採用するために、いくつかの方向性クラスの名前を変更しました。あなたのほとんどは、フレックス ユーティリティのおかげで、論理プロパティを既に操作して
left
いright
ます。これにより、クラス名と値がオーバーヘッドなしで LTR と RTL に適したものになります。start
end
たとえば、.ml-3
forの代わりに をmargin-left
使用します.ms-3
。
ただし、ソース Sass またはコンパイル済み CSS を介して RTL を操作することは、デフォルトの LTR とそれほど変わらないはずです。
ソースからカスタマイズ
カスタマイズに関しては、変数、マップ、および mixin を利用することをお勧めします。このアプローチは、 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;
}
代替フォント スタック
カスタム フォントを使用している場合は、すべてのフォントが非ラテン アルファベットをサポートしているわけではないことに注意してください。Pan-European ファミリからアラビア語ファミリに切り替えるに/*rtl:insert: {value}*/
は、フォント スタックで を使用して、フォント ファミリの名前を変更する必要がある場合があります。
たとえば、Helvetica Neue Webfont
LTR からHelvetica Neue Arabic
RTL に切り替えるには、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
or.rtl
を使用するだけで、一方または他方の方向を使用できるようになりました。
エッジケースと既知の制限
このアプローチは理解できますが、次の点に注意してください。
.ltr
とを切り替えるときは、それに応じてと属性.rtl
を追加してください。dir
lang
- 両方のファイルをロードすると、実際のパフォーマンスのボトルネックになる可能性があります。最適化を検討し、これらのファイルの 1 つを非同期でロードしてみてください。
- このようにスタイルをネストすると、
form-validation-state()
ミックスインが意図したとおりに機能しなくなるため、自分で少し調整する必要があります。#31223 を参照してください。
パンくずケース
ブレッドクラム セパレータは、独自の新しい変数を必要とする唯一のケースです。つまり、$breadcrumb-divider-flipped
デフォルトで$breadcrumb-divider
.