Перейти к основному содержанию Перейти к навигации по документам
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.

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

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

<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">

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

Ознакомьтесь со стартовым шаблоном 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.js -->
    <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.js 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

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

Подход

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

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

  2. Во-вторых, мы переименовали несколько классов направлений, чтобы использовать подход логических свойств. Большинство из вас уже взаимодействовали с логическими свойствами благодаря нашим гибким утилитам - они заменяют свойства направления, такие как 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 */"},
  // 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;

Создание "хлебных крошек"

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

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

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