Cмотреть на GitHub

RTL-стилизация

Включение поддержки направления написания текста справа налево (Right To Left) в Bootstrap для наших макетов, компонентов и утилит.

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

Сайты могут поддерживать направления написания текста: слева направо (LTR – Left To Right) и справа налево (Right To Left). В CSS по умолчанию используется направление LTR. Адаптации интерфейса под RTL актуальна и для иврита, и для персидского языка.

Знакомство

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

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

Экспериментальные особенности

Функция RTL все еще является экспериментальной и, скорее всего, будет развиваться в соответствии с отзывами пользователей. Хотите предложить улучшения? Начните диалог, чтобы мы узнали ваше мнение.

Требования к 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.1.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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.1.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

    <title>????? ???????!</title>
  </head>
  <body>
    <h1>????? ???????!</h1>

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

    <!-- Вариант 1: пакет Bootstrap с Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Вариант 2: отдельные JS для Popper и Bootstrap -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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 Webfont для LTR на Helvetica Neue Arabic, Ваш код 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 убедитесь, что вы добавили атрибуты dir и lang соответственно.
Загрузка обоих файлов может стать настоящим узким местом для производительности: подумайте о некоторой оптимизации и, возможно, попробуйте загрузить один из этих файлов асинхронно.
Вложение стилей таким образом предотвратит работу миксина form-validation-state() должным образом, поэтому Вам придется немного подправить его самостоятельно. Смотрите #31223.

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

Дополнительные ресурсы

RTLCSS - библиотека под капотом у postcss-rtl.
RTL Styling 101 - подробное руководство по RTL-стилизации в CSS.