Локализация CSS

Механизм интернационализации позволяет изменять стилевое оформление элементов интерфейса (контролов, компонентов, html-контейнеров, статических картинок) при изменении локали веб-приложения. В этом подразделе статьи будут раскрыты особенности работы такого механизма.

Когда Вы решили локализовать CSS вручную, нужно учитывать ряд особенностей. Во-первых, CSS-классы, используемые для локализации, явно помечаются селектором (см. Селектор локали для CSS-классов). Во-вторых, такие классы создают в отдельных CSS-файлах Расположение локализуемых CSS-файлов). В-третьих, при построении разметки веб-страницы на препроцессоре на тег <body> устанавливается селектор, по которому определяется какие CSS-файлы участвуют в подготовке пакетов, подключаемых на страницу (см. Как происходит локализация CSS на препроцессоре. Техническая документация).

Селектор локали для CSS-классов

Для того чтобы механизм локализации работал успешно, необходимо для локализуемых CSS-классов явно устанавливать селектор. Он соответствует кодовому обозначению локали.

При подготовке веб-страницы на Сервисе представления классы с селектором, который соответствует локали страницы, будут найдены и добавлен в rt-пакет, подключенный на страницу.

Расположение локализуемых CSS-файлов

Локализуемые CSS-классы создают в отдельных файлах. Классы таких файлов будут запакованы на Сервисе представления и подключены на локализуемую страницу.

Если CSS-класс будет использован для одного языка внутри страны, то необходимо создать CSS-файл, соответствующий следующим требованиям:

  • Расположен в директории компонента в папке resources/lang/.
  • Имеет название [язык]-[СТРАНА].css.
  • Для всех классов внутри файла вначале добавлен селектор с именем локали .[язык]-[СТРАНА].

[deprecated] Как происходит локализация CSS на сервисе представления. Техническая документация

При построение разметки веб-страницы на тег <body> устанавливается CSS-класс локали. Благодаря этому классу и выделению CSS-файлов в отдельные папки (см. Расположение локализуемых CSS-файлов) в пакетах передаются стили необходимые для текущей локали, а лишние — не подключаются.

CSS-класс локали может быть установлен на body одним из трёх способов:

  1. Переменная CURRENT_LOCALE.
    Большинство шаблонов из "Тема Скрепка", например, в ..themes/Тема Скрепка/Шаблоны/grayTheme.html тег body имеет следующий вид:
    <body class="ws-body-no-scroll ws-sticky-header__wrapper ws-server-generated %{CURRENT_LOCALE}">
    Здесь %{CURRENT_LOCALE} — будет заменено includeReplacer'ом на необходимую локаль.
  2. Механизм MasterPage.
    Например, ../SBIS3.ENGINE/components/MasterPage/OnlineBaseInnerView.tmpl:
    <body
       class="ws-server-generated
       touchInterface {{=it.leftAccCompact}}
       ws-body-no-scroll
       ws-sticky-header__wrapper
       {{=it.noticeCenter.classList['body']}}
       {{=it.noticeCenter.classList['homePage']}}
       {{=it.currentLocale}}">
    Здесь {{=it.currentLocale}} будет заменено на необходимую локаль.
  3. Плагин i18n.
    Когда используется шаблон, в котором на body на препроцессору никаким образом (из вышеперечисленных) локаль не устанавливается. В этом случае локаль устанавливается RequireJS плагином i18n:
    i18n.setLang: function(language) {
       ...
          $(document).ready(function () {
             $('body').removeClass(oldLang).addClass(currentLang);
          });
       ...
    }

Таким образом на body всегда будет установлен класс локали.