Шесть советов по созданию сайтов для многоязычной аудитории от Google Web Studio / Комментарии / Хабр

FinikWasHere 15 июн 2013 в 02:17

Когда я попытался сделать RTL twitter bootstrap для одного их своих проектов, я столкнулся с проблемой приоритета селекторов. Какраз то что написано в 6.3. Приходилось добавлять кучу дополнительных оверрайдов для правил, которые на первый взгляд не нужно переводить в RTL. На манер margin: 0 или display: block; float: none; А особенный ужас это переводить в RTL border-radius, т.к. порядок «сторон» там не такой как у padding к примеру. Ах если бы я знал CSSJanus, жизнь была бы настолько проще…

От себя добавлю:
а) не стоит бить одно правило другим. Так проще мейнтейнить, да и в прочем каковы шансы что ваш темплейт забудет отрендерить dir атрибут.

aside {
    margin-bottom: 1em;
}

[dir='ltr'] aside {
    float: right;
    margin-right: 1em;
}

[dir='rtl'] aside {
    float: left;
    margin-left: 1em; 
}

б) Поля форм для RTL имеют кое-какую нехорошую особенность, RTL это конечно хорошо, пока не начинаешь писать email в инпут. Пускай RTL народы пишут по своему, но цифры и email'ы они пишут в LTR формате. В процессе написания этого самого email можно увидеть "@username" когда пишешь username@example.com. Потому для таких вещей нужно держать отдельный force-класс, который задаст direction: ltr или какой-нибудь unicode-bidi для конкретных инпутов… text-align:right; по желанию. Еще в этот список можно добавить пароли, если они понимают только английские символы.

P.S. когда работаете с большими CSS фреймворками и адаптируете их под RTL, не забывайте проверять вписываетесь ли вы в лимиты Internet Explorer: 4095 правил в одном файле, 31 @import на файл, все что глубже 4-го уровня — Лимб, от туда не возвращаются.