RTL

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

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

Ознакомьтесь

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

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

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

Необходимый 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.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" 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/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" 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.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <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.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Примеры RTL

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

Подход

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

Во-первых, мы решили создать его с помощью проекта RTLCSS. Это дает нам некоторые мощные функции для управления изменениями и переопределениями при переходе от LTR к RTL. Это также позволяет нам создавать две версии Bootstrap из одной кодовой базы.
Во-вторых, мы переименовали несколько направленных классов, чтобы принять подход логических свойств. Большинство из вас уже взаимодействовали с логическими свойствами благодаря нашим flex-утилитам — они заменяют свойства направления, такие как 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 */"},
  // 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 это довольно просто. Оберните ваши @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