RTL

Узнайте, как включить поддержку текста с написанием справа налево в Bootstrap для нашего макета, компонентов и утилит.

На этой странице

Разобраться

Мы рекомендуем сначала познакомиться с Bootstrap, прочитав нашу страницу введения в начало работы. После того, как вы пройдете через это, продолжайте читать здесь, чтобы узнать, как включить RTL.

Вы также можете прочитать проект RTLCSS, поскольку он поддерживает наш подход к RTL.

Функция RTL в Bootstrap все еще является экспериментальной и будет развиваться на основе отзывов пользователей. Заметили что-то или хотите предложить улучшение? Открыть issue, мы хотели бы узнать ваше мнение.

Обязательный HTML

Есть два строгих требования для включения RTL на страницах с поддержкой Bootstrap.

Установите dir="rtl" в элементе <html>.
Добавьте соответствующий атрибут lang, например lang="ar", в элемент <html>.

Оттуда Вам нужно будет включить RTL-версию нашего CSS. Например, вот таблица стилей для нашего скомпилированного и миниатюрного CSS с включенным RTL:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.rtl.min.css" integrity="sha384-q8+l9TmX3RaSz3HKGBmqP2u5MkgeN7HrfOJBLcTgZsQsbrx8WqqxdA5PuwUV9WIx" crossorigin="anonymous">

Стартовый шаблон

Вы можете увидеть приведенные выше требования, отраженные в этом модифицированном стартовом шаблоне RTL.

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Обязательные метатеги -->
    <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.5/dist/css/bootstrap.rtl.min.css" integrity="sha384-q8+l9TmX3RaSz3HKGBmqP2u5MkgeN7HrfOJBLcTgZsQsbrx8WqqxdA5PuwUV9WIx" crossorigin="anonymous">

    <title>مرحبًا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبًا بالعالم!</h1>

    <!-- Дополнительный JavaScript; выберите один из двух! -->

    <!-- Вариант 1: пакет Bootstrap с Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>

    <!-- Вариант 2: отдельные JS для Popper и Bootstrap -->
    <!--
    <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.5/dist/js/bootstrap.min.js" integrity="sha384-VQqxDN0EQCkWoxt/0vsQvZswzTHUVOImccYmSyhJTp7kGtPed0Qcx8rK9h9YEgx+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Примеры RTL

Начните с одного из нескольких примеров RTL.

Подход

Наш подход к созданию поддержки RTL в Bootstrap включает два важных решения, которые влияют на то, как мы пишем и используем наш CSS:

Во-первых, мы решили создать его с помощью проекта RTLCSS. Это дает нам несколько мощных функций для управления изменениями и переопределениями при переходе от LTR к RTL. Это также позволяет нам создавать две версии Bootstrap из одной кодовой базы.
Во-вторых, мы переименовали несколько классов направлений, чтобы принять подход логических свойств. Большинство из Вас уже взаимодействовали с логическими свойствами благодаря нашим гибким утилитам - они заменяют свойства направления, такие как left и right в пользу start и end. Это делает имена и значения классов подходящими для LTR и RTL без каких-либо накладных расходов.

Например, вместо .ml-3 для margin-left используйте .ms-3.

Однако работа с RTL через наш исходный Sass или скомпилированный CSS не должна сильно отличаться от нашего LTR по умолчанию.

Настроить из источника

Когда дело доходит до настройки, предпочтительным способом является использование переменных, карт и миксинов. Этот подход работает одинаково для RTL, даже если он подвергается постобработке из скомпилированных файлов, благодаря как работает RTLCSS.

Пользовательские значения 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}*/ в Вашем стеке шрифтов, чтобы изменить имена семейств шрифтов.

Например, чтобы переключиться со шрифта Helvetica Neue для LTR на Helvetica Neue Arabic для RTL, ваш код Sass может выглядеть так:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Кросс-платформенное общее семейство шрифтов (шрифт пользовательского интерфейса по умолчанию)
  system-ui,
  // Safari для macOS и iOS (San Francisco)
  -apple-system,
  // Chrome < 56 для macOS (Сан-Франциско)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Базовый резервный веб-сайт
  Arial,
  // Linux
  "Noto Sans",
  // Резервный вариант без засечек
  sans-serif,
  // Emoji шрифты
  "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:

При переключении .ltr и .rtl убедитесь, что вы добавили атрибуты dir и lang соответственно.
Загрузка обоих файлов может стать настоящим узким местом для производительности: подумайте о некоторой оптимизации и, возможно, попробуйте загрузить один из этих файлов асинхронно.
Вложение стилей таким образом предотвратит работу миксина form-validation-state() должным образом, поэтому Вам придется немного подправить его самостоятельно. Смотрите #31223.

Хотите ли вы автоматизировать этот процесс и решить несколько пограничных случаев, включающих оба направления в одной таблице стилей? Тогда рассмотрите возможность использования PostCSS RTLCSS в качестве плагина PostCSS для обработки исходных файлов. PostCSS RTLCSS использует RTLCSS за кулисами для управления процессом изменения направления, но он разделяет перевернутые объявления на правила с другим префиксом для LTR и RTL, что позволяет вам иметь оба направления в одном файле таблицы стилей. Сделав это, вы можете переключаться между ориентациями LTR и RTL, просто изменяя dir страницы (или даже изменяя определенный класс, если вы соответствующим образом настроите плагин).

Важные вещи, которые следует учитывать при использовании PostCSS RTLCSS для создания комбинированной реализации LTR и RTL:

Рекомендуется добавить атрибут dir к элементу html. Таким образом, при изменении направления будет затронута вся страница. Также убедитесь, что вы добавили атрибут lang соответствующим образом.
Наличие одного пакета с обоими направлениями увеличит размер окончательной таблицы стилей (в среднем на 20%-30%): рассмотрите возможность оптимизации.
Учтите, что PostCSS RTLCSS несовместим с директивами /* rtl:remove */, поскольку он не удаляет ни одно правило CSS. Вам следует заменить директивы /* rtl:remove */, /* rtl:begin:remove */ и /* rtl:end:remove */ на директивы /* rtl:freeze */, /* rtl:begin:freeze */ и /* rtl:end:freeze */ соответственно. Эти директивы будут добавлять префикс к целевым правилам или объявлениям с текущим направлением, но не будут создавать аналог RTL (тот же результат, что и директивы remove в RTLCSS).

Случай с хлебными крошками

Разделитель хлебных крошек — единственный случай, требующий собственной совершенно новой переменной, а именно $breadcrumb-divider-flipped, по умолчанию $breadcrumb-divider.

RTL