Разработка Bidi приложений

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

В этом документе перечислены некоторые шаблоны и лучшие практики по созданию BiDi приложений (двунаправленный (bidirectional) - слева направо и справа налево).

Направление документа

<html dir="rtl">

Если вы используете navigator.mozL10n из библиотеки локализации Gaia, тогда атрибут dir устанавливается автоматически в зависимости от текущего языка, в соответствии с предпочтениями пользователя.

Направление текста

p {
    text-align: left; /* отступление для старых браузеров */
    text-align: start;
}

html[dir=rtl] p {
    text-align: right; /*
}
.endAligned {
    text-align: right; /* отступление для старых браузеров */
    text-align: end;
}

html[dir=rtl] .endAligned {
    text-align: left; /*
}

Модель области элемента

Атрибуты margins, paddings и borders необходимо задавать.

.box {
    margin-left: 20px;
}

html[dir=rtl] .box {
    margin-left: 0;
    margin-right: 20px;
}

В браузерах Firefox и Webkit вы также можете использовать экспериментальные атрибуты margin-start, margin-end, padding-start, padding-end, border-start и border-end.

Позиционирование

Плавающие (floats), clear и абсолютные (absolute) координаты необходимо задавать.

.nav {
    float: right;
}

html[dir=rtl] .nav {
    float: left;
}
#clippy {
    position: absolute;
    bottom: 20px;
    right: 20px;
} 

html[dir=rtl] #clippy {
    right: auto;
    left: 20px;
}

 

Метки документа и участники

Внесли вклад в эту страницу: bsergey
Обновлялась последний раз: bsergey,