Invision Community поддерживает языки, которые использую текст справа налево (включая арабский, персидский и другие), и если вы создаёте тему, которой будете делиться с другими, вы должны убедиться в том, что совместима с языком справа налево. Это очень просто.
Специальный CSS для RTL
При отображении RTL, некоторые свойства CSS нужно поменять местами; например, если вы позиционируете что-то слева в языке слева направо, когда тема показана в языке справа налево, это должно позиционироваться справа.
Глобальный шаблон в IPS4 всегда имеет атрибут dir определяющий направление текста (значение будет ltr или rtl), и именно этот атрибут мы можем использовать в стилях, которые основываются на направлении текста.
Давайте представим, у вас есть некоторый CSS в вашей теме, например такой:
.yourClass {
font-weight: bold;
position: absolute;
left: 15px;
top: 15px;
padding-left: 30px;
}
Некоторые из этих свойств должны быть переназначены для RTL, иначе тема будет отображена неверно. Так, с помощью атрибута dir в теге html, мы должны написать следующее:
/* Эти стили одинаковы для всех направлений текста */
.yourClass {
font-weight: bold;
position: absolute;
top: 15px;
}
/* Стили LTR */
html[dir="ltr"] .yourClass {
left: 15px;
padding-left: 30px;
}
/* Стили RTL */
html[dir="rtl"] .yourClass {
right: 15px;
padding-right: 30px;
}
Языки RTL теперь будут корректно позиционировать элемент на правой стороне экрана, а языки LTR будут отображать элемент слева.
Всякий раз, когда вы используете стили для разного направления текста, вы должны разделить их именно таким образом.
Специальные иконки для RTL
Invision Community активно использует иконки FontAwesome. Некоторые иконки должны быть перевёрнутыми для языков RTL (например стрелки) и если вы используете стандартные имена классов (например, fa-caret-left), мы автоматически переворачиваем её, чтобы она подходила для языков RTL.
Если вы вручную указали иконки в ваших CSS классах с помощью unicode, вы также должны изменить их для поддержки RTL. Например, имеем такой CSS код:
/* Это использует unicode для иконки FontAwesome 'angle-right' */
.nextLink:after {
font-family: 'FontAwesome';
content: '\f105';
}
Вам нужно изменить на это:
.nextLink:after {
font-family: 'FontAwesome';
}
html[dir="ltr"] .nextLink:after {
content: '\f105';
}
html[dir="rtl"] .nextLink:after {
content: '\f104';
}
Рассмотрите собственный Javascript код
Как правило, это не потребует каких-либо действий. Тем не менее, если у вас есть какие-либо пользовательские JavaScript коды, которые взаимодействуют с пользователем, вы должны сделать соответствующие правки в нём. Например, если у вас есть меню, которое открывается слева страницы, вы должны также продублировать его открытие справа. Если вы используете какие-либо UI виджеты, включённые в Invision Community, они не требуют никакой адаптации.