Добавляем поддержку RTL языков в шаблоны Joomla

Людям, говорящим на языках, предполагающих чтение справа налево (RTL), таких как арабский, персидский, урду и иврит, может быть непросто ориентироваться в большинстве сайтов.

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

Однако разработчики шаблонов чаще всего не думают о поддержке RTL языков и не обеспечиваю такую опцию.
В данном руководстве мы покажем вам, как адаптировать любой шаблон Joomla так, чтобы его можно было использовать как для посетителей, читающих справа налево, так и наоборот.

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

Шаг 1. Подготовьте локальную копию своего сайта для тестирования

Безопаснее и проще всего будет не вносить изменения в уже работающий сайт, а подготовить его тестовую копию и работать с ней.

1. Установите XAMPP, WAMP, MAMP или другое подобное ПО для развёртывания локального сервера. Создайте пустую базу данных.
2. Создайте полную резервную копию своего сайта при помощи Akeeba Backup.
3. Используя FTP-клиент (например, FileZilla), скопируйте резервную копию сайта и сохраните её на своём компьютере.
4. Скопируйте Akeeba kickstart.php в папку локального сайта.
5. Скопируйте созданную резервную копию (файл .jpa) в папку локального сайта.
6. Загрузите в браузере адрес http://localhost/kickstart.php
7. Следуйте инструкциям на экране, чтобы создать локальную копию своего сайта.

Шаг 2. Скопируйте файлы основного шаблона

Найдите файлы своего основного шаблона и создайте их копии, переименовав их так, чтобы понять для чего они будут использоваться.

Например:

• "template.css" - переименуйте в "template-rtl.css"
• "ie9.css" - переименуйте в "ie9-rtl.css"
• "print.css" - переименуйте в "print-rtl.css"
• и так далее

Шаг 3. Убедитесь, что у вас установлен подходящий текстовый редактор

Если вы работаете под Windows, НИКОГДА не используйте стандартный Блокнот, WordPad или Word для редактирования текстовых файлов. Эти приложения сохраняют файлы в формате, который не очень хорошо понимает Joomla. К примеру, языковые файлы Joomla нужно сохранять без символа Byte Order Mark или они просто не будут работать (а вы будете сходить с ума, не понимая в чём проблема).

Поэтому, сделайте себе одолжение и установите редактор, умеющий работать с кодировкой UTF-8, такой как PSPad или Notepad++. Они позволят сохранить файлы в нужном формате без BOM (Byte-Order-Mark). Кроме этого, эти редакторы снабжены множеством полезных функций, имеют подсветку кода для разных языков программирования и даже могут проводить сравнение текстов.

Шаг 4. Что сохранить, а что адаптировать в каждом RTL файле

Файлы RTL шаблонов будут загружаться ВМЕСТО обычных при выборе одного из RTL языков, поэтому вам нужно подготовить дубликаты стандартных файлов и внести в них необходимые изменения. В ядре Joomla уже присутствует поддержка RTL для элементов Bootstrap, поэтому там ничего менять не нужно.

Хорошей идеей будет пометить все изменения в CSS комментариями вроде такого:

/* RTL */

Таким образом, позже вы без проблем увидите, что было изменено.

Так что же нужно оставить, а что отредактировать в файлах RTL шаблонов?

Помните, что сайт должен выглядеть как его зеркальная версия. То есть правая сторона становится левой и наоборот.

• Направление текста
• Плавающие элементы
• Внутренние отступы
• Внешние отступы
• Тени
• Выравнивание изображений
• Абсолютное и относительное позиционирование

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

Шаг 6. Используйте поддельный язык для тестирования RTL шаблона

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

В локальной версии сайта найдите файл [корневая папка joomla]/language/en-GB/en-GB.xml

В самом конце этого файла вы увидите строку:

English (United Kingdom)en-GB0en_GB.utf8, en_GB.UTF-8, en_GB, eng_GB, en, english, english-uk, uk, gbr, britain, england, great britain, uk, united kingdom, united-kingdom0

Измените:

0

на:

1

и сохраните.

Теперь, открыв сайт, вы увидите, что ваш язык стал вести себя как RTL язык, позволяя проверить все внесённые изменения.

После завершения работ вы можете снова открыть файл и вернуть 0 на место.

Шаг 5. Добавьте распознавание RTL шаблонов в index.php

Это можно сделать, изучив пример, данный в базовом шаблоне Beez3:

if ($this->direction == 'rtl') { $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template-rtl.css'); }

Этот код будет подключать правильный шаблон при обнаружении RTL языка.

Шаг 7. Измените направление текста в template-rtl.css

Свойство CSS "direction: rtl" сделает практически всю работу за вас. Оно изменяет направление, но не влияет на выравнивание. Добавьте его в template-rl.css и перезагрузите страницы, чтобы увидеть изменения.

Это свойство так же можно определить в теге BODY вашего шаблона. Однако, если вы это сделаете, то полоса прокрутки будет появляться на противоположной стороне окна. Кроме этого, вы можете определить его в теге DIV, являющемся основным контейнером. Тогда полоса прокрутки останется на месте, а текст станет зеркальным.

Просто добавьте:

direction: rtl;

в тег body.

Шаг 8. Адаптируйте template-rtl.css

Теперь пришло время внести необходимые изменения, о которых говорилось в шаге №4.

• Направление текста. Сделано в шаге №7.
• Изменение выравнивания текста. "text-align: right;" изменяется на left и наоборот.
• Плавающие элементы. "float: right;" становится "float: left;" и наоборот.
• Внутренние отступы. Padding-right становится padding-left и наоборот. Короткие записи вроде "padding: 5px 10px 7px 12px" означают верх-право-низ-лево. Короткие записи вроде "padding: 5px 10px" означают верх-право, низ равен верху, левый отступ равен правому.
• Внешние отступы. Margin-right становится margin-left и наоборот. Короткие записи вроде "margin: 5px 10px 7px 12px" означают верх-право-низ-лево. Короткие записи вроде "margin: 5px 10px" означают верх-право, низ равен верху, левый отступ равен правому.
• Тени. Все CSS3 тени нужно инвертировать. Короткие записи расшифровываются как X-Y-радиус размытия-растяжение-цвет (где X - отступ по горизонтали, а Y - отступ по вертикали). Просто измените X на отрицательное значение и тень инвертируется. Например: box-shadow: -5px 5px 22px rgba(0, 0, 0, 0.15); /* W3C */
• Выравнивание изображений. Положение плавающих элементов, а так же абсолютное позиционирование нужно инвертировать. Некоторые изображения, такие как логотипы, придётся отразить по горизонтали в специальном редакторе, и указать ссылки на них в template-rtl.css. Строки вроде "background: url(images/image.png) top right no-repeat;" превратятся в "background: url(images/image.png) top left no-repeat;" и так далее.
• Абсолютное и относительное позиционирование. Лево превращается в право и наоборот.

Примечание: во время этого процесса, держите файл template-rtl.css открытым в текстовом редакторе, а сайт в браузере. Так вы сможете сразу проверять внесённые изменения, обновляя странички сайта.

Проделайте то же самое с остальными файлами css и шаблона.

Шаг 9. Проверьте сайт во всех популярных браузерах

Протестируйте RTL шаблон своего сайта во всех популярных браузерах и при необходимости внесите нужные правки.

После этого не забудьте вернуть на место 0 из шага №6.

Шаг 10. Заархивируйте шаблон

Просто заархивируйте файлы шаблона, завершив работу, и у вас будет шаблон, поддерживающий RTL языки.

Комментировать статью: