Rtl support что это
Scott Logic / Altogether Smarter
Some languages of the world (Arabic, Hebrew etc.) are RTL, meaning they are read right-to-left, instead of left-to-right. Typically in web applications supporting one of these languages, everything is reversed, meaning scroll bars, progress indicators, buttons etc.
I recently took part in a discussion with the jQuery UI team about how they would start to implement RTL support and I thought many of the issues were generic across any web application or library, so this is a blog post about my thoughts on the discussion.
How RTL support is done
Lets start with an example. Here is a little html fragment and how it looks in LTR.
Now, if it were in a RTL language, it would look like this…
Which has the following code..
Lets go through the differences. Firstly the element has dir=»rtl» on it. This tells the browser that all text should be laid out from right to left, but it doesn’t just effect text, it effects all inline and inline-block code. This means that because the button elements default to inline-block, they are reversed, so Cancel is on the left and Ok on the right (without any css changes). Note that this dir attribute is inherited and is not a CSS style.
Further Changes
LTR inside RTL
The initial approach that the jQuery UI team had thought to go with was that each widget determines its own direction (traversing the DOM backwards to see if an ancestor has the attribute), stores it somewhere at start up and then uses the boolean wherever it is needed. This approach works fine if we just consider the JavaScript, however with the CSS it becomes tricky.
At first you might think you could write selectors like so.
However, this approach (having the RTL and LTR CSS co-existing on the same page) is so that different widgets can have different directions, but some widgets contain other widgets, like a tab control, so what do you do if you have RTL tab which has LTR content? A first approach might be CSS like so…
But you are only really supporting one redirection level (e.g. not RTL in LTR in RTL) and you are trebling the size of your CSS (OK so you could increase the specificity of the last selector so you can put it with the first, but things are starting to look awful).
But consider that if you go for this approach, you cannot use the CSS ancestor selector anywhere (or if you do, the ancestor CSS class must be marked rtl_ ) and furthermore, every class that is used across more than 1 widget, must be marked rtl_ and therefore have it’s css class changed.
You could concede that only css classes used in widgets which have ancestors need to be treated like this, but in my opinion, things get very messy, very fast and you see the size of the CSS and the JavaScript jump in size.
Solutions
In my opinion, the use-cases across the web for web applications which mix both LTR and RTL are limited. The only viable one I heard during the meeting was a translation or language learning application. I also think that applications that can change their language without a refresh are limited (and not only that a change from a LTR language to a RTL one) so, the simplest thing is to have one LTR stylesheet and one RTL stylesheet and therefore not impact the performance and size of either language set for most users and keep the required changes to the JavaScript to an absolute minimum. You could tell users that they should use iframes for mixing script or else support it only in the JavaScript and let people deal with the CSS themselves if they need to.
That way the input would be..
Depending on the direction.
Further Problems
Scrollbars cross browser
LTR characters mixed with RTL characters
When you combine characters that can be used in both RTL and LTR languages (punctuation for instance) then where the punctuation is displayed, depends on the direction. So, below I’ve used Google Translate to convert the same text to Arabic and English, and displayed them both in RTL.
The full-stop ‘.’ is the last character in both strings, after “Know” in English, but because we have told the browser the direction is RTL and it is the last character in the string and is punctuation so of indeterminate direction, the browser puts it on the far left hand side. Here is the same text but with the direction RTL.
Делаем первые шаги с RTL-SDR
Содержание статьи
Все материалы сюжета:
Уверен, для многих из вас, как и для меня совсем недавно, происходящее в радиоэфире было настоящей магией. Мы включаем телевизор или радио, поднимаем трубку сотового телефона, определяем свое положение на карте по спутникам GPS или ГЛОНАСС — и все это работает автоматически. Благодаря RTL-SDR у нас появился доступный способ заглянуть внутрь всего этого волшебства.
Как уже говорилось, RTL-SDR — это целое семейство дешевых ТВ-тюнеров, способных выполнять функцию SDR-приемника. У этих игрушек разные названия и бренды, но объединяет их одно — все они построены на чипсете RTL2832. Это микросхема, содержащая два 8-битных АЦП с частотой дискретизации до 3,2 МГц (однако выше 2,8 МГц могут быть потери данных), и интерфейс USB для связи с компьютером. Эта микросхема на входе принимает I- и Q-потоки, которые должны быть получены другой микросхемой.
R820T и E4000 — это две наиболее удобные для SDR микросхемы, реализующие радиочастотную часть SDR: усилитель антенны, перестраиваемый фильтр и квадратурный демодулятор с синтезатором частоты. На рисунке — блок-схема E4000.
Блок-схема тюнера E4000
Хакер #177. Радиохакинг: что такое SDR?
Разница между ними следующая: E4000 работает в диапазоне
52–2200 МГц и имеет немного большую чувствительность на частотах менее 160 МГц. Из-за того что производитель E4000 обанкротился и микросхема снята с производства, остающиеся тюнеры покупать все труднее, и цены на них растут.
R820T работает в диапазоне 24–1766 МГц, однако диапазон перестройки внутренних фильтров сильно затрудняет работу R820T выше 1200 МГц (что делает невозможным, например, прием GPS). На данный момент тюнеры на этой микросхеме легко купить, и стоят они около 10–11 долларов.
Также продаются тюнеры на микросхемах FC0012/FC0013/FC2580 — у них очень серьезные ограничения по частотам работы, и лучше их не покупать. Узнать, на какой микросхеме сделан тюнер, можно в описании товара или спросив у продавца. Если информации по используемым чипам нет — лучше купить в другом месте.
Покупка
В розничных магазинах их не найти, поэтому нам поможет aliexpress.com. Пишем в поиске R820T или E4000, сортируем по количеству заказов, внимательно читаем описание (там должно быть явно написано, что тюнер использует микросхемы RTL2832 + E4000 или RTL2832 + R820T), и можно заказывать. Присылают обычно почтой России, в течение 3–6 недель.
Типичный приемник на основе RTL2832 — EzTV668
На многих тюнерах рядом с коннектором антенны отсутствуют защитные диоды (в данном случае U7) — их можно либо впаять самому (один к земле, один от земли — я, например, впаял 1N4148), либо оставить как есть, и антенну голыми руками не трогать и всячески беречь от статического электричества.
Софт и API для работы с RTL2832
rtl_sdr
Rtl_sdr – драйвер, обеспечивающий «нецелевое» использование данных с TV-тюнеров на базе rtl2832. В Windows вам придется заменить драйвер тюнера по умолчанию на WinUSB с помощью программы Zadig.
Rtlsdr.dll требуют все SDR-программы, и зачастую эта DLL уже идет в поставке софта, использующего RTL2832.
Rtl_sdr также можно использовать и через консольную утилиту, чтобы протестировать тюнер или слить кусок эфира в файл:
При дальнейшей обработке нужно помнить, что в файле байты I- и Q-потоков идут поочередно.
SDRSharp
SDRSharp — одна из популярных и простых в использовании программ под Windows для работы с RTL2832 (и некоторыми другими SDR). При старте нужно выбрать RTL2832, нажав на кнопку Front-end. Вводить частоту руками нужно в поле Center.
Слева вверху — выбор типа демодулирования. FM используется для обычного FM-вещания и аудио в аналоговом телевидении, AM — в радиостанциях на низких частотах и переговоров самолетов, NFM — в рации.
Прием переговоров по рации на частоте 446 МГц в SDRSharp
Многие внешние декодеры цифровых передач работают через «аналоговый» интерфейс — то есть ты запускаешь SDRSharp, устанавливаешь программу Virtual Audio Cable (программа платная), настраиваешь SDRSharp, чтобы он декодированный звук выводил в VAC, и в системных настройках Windows указываешь VAC как устройство записи по умолчанию. В результате внешняя программа-декодер будет получать звук от SDRSharp.
Таким образом подключаются декодеры P25 раций (милиция), данных с метеоспутников, пейджеров, навигационных сообщений самолетов (ADS-B) и многого другого (об этом ниже). Такой необычный способ подключения сложился исторически — раньше к компьютеру подключали аналоговые приемники. Со временем декодеры дописывают, чтобы они напрямую работали с RTL-SDR.
GNU Radio
GNU Radio — настоящий зубр SDR. Это программный пакет, предназначенный для обработки данных, полученных от SDR-приемника, в реальном времени. Являющаяся стандартом де-факто для всех более-менее профессиональных забав в области радио, программа построена на модульной основе с учетом парадигмы ООП. Это настоящий радиоконструктор, в котором роль элементов отведена функциональным блокам: фильтрам, модуляторам/демодуляторам и несметному множеству других примитивов обработки сигналов. Таким образом, имеется возможность составить из них практически любой тракт обработки. Делается это в прямом смысле слова в несколько кликов мышкой в наглядном графическом редакторе, имя которому gnuradio-companion. Более того, gnuradio-companion написан на Python и позволяет генерировать схемы на Python. Но у такой гибкости есть и обратная сторона — освоить GNU Radio за десять минут невозможно.
Аппаратные дополнения
Расширение диапазона поддерживаемых частот
52 МГц / 24 МГц находится бОльшая часть интересного в радиоэфире — поэтому ограничение по минимальной частоте серьезно сужает возможности этих приемников. Расширить диапазон можно, купив up-converter, который сдвинет сигнал с антенны на 100 или 125 МГц вверх. Среди продающихся конвертеров пока лучше всех себя показывает NooElec — Ham It Up v1.2 с кварцем на 125 МГц. Использование кварца на 125 МГц очень важно, так как в районе 100 МГц находится много мощных FM-станций и без очень качественного экранирования всех частей системы они будут мешать приему.
RF-конвертер NooElec — Ham It Up v1.2
Этот конвертер можно использовать с любыми SDR-системами, в том числе и работающими на передачу (есть ограничение на мощность).
Для приема на частотах менее 50 МГц придется больше внимания уделить антенне, так как габариты ее растут пропорционально увеличению длины волны. Конструкций антенн для любительской радиосвязи в КВ-диапазоне очень много, но в самом простейшем случае — это спускаемый с балкона провод длиной 5–20 м.
Малошумящий усилитель
И E4000, и R820T — кремниевые микросхемы, и усилитель внутри них шумит сильнее, чем более дорогие отдельные GaAs-усилители. Для некоторого снижения уровня шумов (на 1,5–3 дБ) и улучшения возможностей приема очень слабых сигналов можно купить малошумящий усилитель, который включается между антенной и тюнером.
Малошумящий усилитель LNA for all
Что послушать в радиоэфире?
Радиопереговоры в безлицензионных диапазонах
Гражданские рации, не требующие регистрации в России, работают на частотах 433 и 446 МГц. Впрочем, в Москве русскую речь там услышать сложно. Их сразу и без проблем слышно в SDRSharp, модуляция NFM.
Поскольку каналов много, очень полезен плагин для SDRSharp AutoTuner Plugin — он автоматически включает частоту, на которой ведется передача, и таким образом можно слушать сразу все каналы раций.
Чтобы слушать рации на частоте 27 МГц, нужен тюнер с микросхемой R820T или внешний конвертер в случае E4000 (например, описанный ранее Ham It Up v1.2). Оптимальная антенна для 27 МГц уже требуется более серьезная, длиной
Радиопереговоры полиции
Полиция в Москве и во многих других регионах России перешла на использование цифровых радиостанций, работающих в стандарте APCO-25 (P25). В P25 данные передаются в цифровом виде со сжатием и кодами коррекции ошибок — это позволяет увеличить дальность устойчивой связи и больше каналов впихнуть в ту же полосу радиочастот. Также существует опциональная возможность шифрования переговоров, однако обычная полиция работает без шифрования.
Для приема P25-раций можно использовать декодер DSD. DSD ожидает аудиоданные на входе. Перенаправить аудио с SDRSharp в DSD можно с помощью Virtual Audio Cable. DSD весьма критичен к настройкам SDRSharp — я рекомендую устанавливать AF Gain около 20–40%, возможно отключать галочку Filter Audio. Если все идет по плану — в окне DSD побегут декодированные пакеты, а в наушниках будут слышны переговоры. Эта схема также работает с упомянутым плагином AutoTuner в SDRSharp.
Найти частоты предлагаю читателям самостоятельно, так как эта информация не является открытой.
Радиопереговоры самолетов и диспетчеров
По историческим причинам для радиосвязи в авиации используется амплитудная модуляция. Обычно передачи с самолетов лучше слышно, чем от диспетчеров или погодных информаторов на земле. Диапазон частот — 117–130 МГц.
Прием сигналов с автоматических передатчиков самолетов ADS-B
ADS-B используется для того, чтобы и диспетчер, и пилот видели воздушную обстановку. Каждый самолет регулярно передает параметры полета на частоте 1090 МГц: название рейса, высота, скорость, азимут, текущие координаты (передаются не всегда).
Эти данные можем принять и мы, чтобы лично наблюдать за полетами. Два популярных декодера ADS-B для RTL2832 — ADSB# и RTL1090. Я использовал ADSB#. Перед запуском желательно настроиться на 1090 МГц в SDRSharp, посмотреть, есть ли сигнал и какая ошибка частоты из-за неточности кварцевого генератора. Эту ошибку необходимо скомпенсировать в настройках Front-end’а: Frequency correction (ppm). Нужно помнить, что величина этой ошибки может изменяться вместе с температурой приемника. Найденную коррекцию нужно указать и в окне ADSB### (предварительно закрыв SDRSharp).
Оптимальная антенна-монополь для 1090 МГц получается длиной всего 6,9 см. Так как сигнал очень слабый, тут очень желательно иметь дипольную антенну, установленную вертикально с такой же длиной элементов.
ADSB# декодирует пакеты и ждет подключений по сети от клиента, отображающего воздушную обстановку. В качестве такого клиента мы будет использовать adsbSCOPE.
Если все сделано правильно, то в течение нескольких минут ты сможешь увидеть информацию о самолетах (если, конечно, они пролетают рядом с тобой). В моем случае с антенной-монополем можно было принимать сигналы от самолетов на расстоянии примерно 25 км. Результат можно улучшить, взяв более качественную антенну (диполь и сложнее), добавив дополнительный усилитель на входе (желательно на GaAs), используя тюнер на основе R820T (на этой частоте он имеет более высокую чувствительность по сравнению с E4000).
Декодированные сообщения ADS-B
Прием длинно- и коротковолновых аналоговых и цифровых радиостанций
До прихода интернета КВ-радиостанции были одним из способов узнавать новости с другого конца земного шара — короткие волны, отражаясь от ионосферы, могут приниматься далеко за горизонтом. Большое количество КВ-радиостанций существует и поныне, их можно искать в диапазоне
8–15 МГц. Ночью в Москве мне удавалось услышать радиостанции из Франции, Италии, Германии, Болгарии, Великобритании и Китая.
Дальнейшее развитие — цифровые DRM-радиостанции: на коротких волнах передается сжатый звук с коррекцией ошибок + дополнительная информация. Слушать их можно с помощью декодера Dream. Диапазон частот для поиска — от 0 до 15 МГц. Нужно помнить, что для таких низких частот может понадобиться большая антенна.
Помимо этого, можно услышать передачи радиолюбителей — на частотах 1810–2000 кГц, 3500–3800 кГц, 7000–7200 кГц, 144–146 МГц, 430–440 МГц и других.
Радиостанция «судного дня» — UVB-76
UVB-76 расположена в западной части России, передает на частоте 4,625 МГц с начала 80-х годов и имеет не до конца ясное военное назначение. В эфире время от времени передаются кодовые сообщения голосом. Мне удалось принять ее на RTL2832 с конвертором и 25-метровую антенну, спущенную с балкона.
Одна из самых необычных возможностей — прием навигационных сигналов со спутников GPS на TV-тюнер. Для этого понадобится активная GPS-антенна (с усилителем). Подключать антенну к тюнеру нужно через конденсатор, а до конденсатора (со стороны активной антенны) — батарейка на 3 В для питания усилителя в антенне.
Далее можно либо обрабатывать слитый дамп эфира matlab-скриптом — это может быть интересно в целях изучения принципов работы GPS, — либо использовать GNSS-SDR, который реализует декодирование сигналов GPS в реальном времени.
Принять аналогичным способом сигнал с ГЛОНАСС-спутников было бы затруднительно — там разные спутники передают на разных частотах, и все частоты в полосу RTL2832 не помещаются.
Другие применения и границы возможного
RTL2832 можно использовать для отладки радиопередатчиков, подслушивания за радионянями и аналоговыми радиотелефонами, для разбора протоколов связи в игрушках на радиоуправлении, радиозвонках, пультов от машин, погодных станций, систем удаленного сбора информации с датчиков, электросчетчиков. С конвертором можно считывать код с простейших 125 кГц RFID меток. Сигналы можно записывать днями, анализировать и затем повторить в эфир на передающем оборудовании. При необходимости тюнер можно подключить к Android-устройству, Raspberry Pi или другому компактному компьютеру для организации автономного сбора данных из радиоэфира.
Можно принимать фотографии с погодных спутников и слушать передачи с МКС — но тут уже потребуются специальные антенны, усилители. Фотографии декодируются программойWXtoImg.
Есть возможность захватывать зашифрованные данные, передаваемые GSM-телефонами (проект airprobe), в случае если в сети отключен frequency-hopping.
Возможности SDR на основе RTL2832 все-таки не безграничны: до Wi-Fi и Bluetooth он не достает по частоте, и, даже если сделать конвертер, из-за того, что полоса захватываемых частот не может быть шире
2,8 МГц, невозможно будет принимать даже один канал Wi-Fi. Bluetooth 1600 раз в секунду меняет рабочую частоту в диапазоне 2400–2483МГц, и за ним будет не угнаться. По этой же причине невозможен полноценный прием аналогового телевидения (там нужна принимаемая полоса 8 МГц, с 2,8 МГц можно получить только черно-белую картинку без звука). Для таких применений нужны более серьезные SDR-приемники: HackRF, bladeRF, USRP1 и другие.
Тем не менее возможность исследовать как аналоговый, так и цифровой радиоэфир, прикоснуться к спутникам и самолетам теперь есть у каждого!
Особенности разработки мобильных RTL-дизайнов
Ближневосточный рынок растет быстрыми темпами и, как результат, спрос на различные IT-продукты в этом регионе также увеличивается. И вовсе не удивительно, что эти страны испытывают потребность в таком дизайне продуктов, который не только совместим с их нуждами и удобен для пользователей, но также соответствует их языковым стандартам, и это придает процессу адаптации особую важность. Учитывая, что большинство языков, распространенных на Ближнем Востоке, пишутся и читаются справа налево (right-to-left, RTL) — например, арабский, иврит и Урду — разработчики часто сталкиваются с рядом проблем при создании продуктов на этих языках (или переводе дизайна под языковые особенности).
На первый взгляд это может показаться не таким трудным, однако разработка дизайна, заточенного под RTL-языки, предполагает знание ряда особенностей. Это еще больше осложняется тем фактом, что RTL-рынок является относительно новым и вспомогательных ресурсов, доступных для разработчиков, не так много.
Опыт RTL-разработки позволил агентству SteelKiwi Inc составить подробный список рекомендаций, которые будут полезны всем, создающим ориентированные на RTL-рынок продукты (например, веб-сайт или мобильное приложение). Изучив подробно эти инструкции, вы будете в состоянии сориентироваться в области RTL-разработки и предоставить своей аудитории функциональный и дружелюбный к пользователю продукт.
Разворот интерфейса
Прежде всего, весь интерфейс должен быть развернут справа налево.
Вы можете посчитать этот совет слишком очевидным и не достойным упоминания, но такими вещами не стоит пренебрегать, потому что это, на самом деле, первое, что нужно сделать.
Ниже вы можете видеть внешний вид страницы регистрации Facebook в LTR-дизайне:
А вот и RTL-версия Facebook:
Существует несколько способов, как это сделать.
1. Использовать атрибут dir или возможности CSS
Если базовая разметка построена с float-блоками, код будет выглядеть примерно так, как показано ниже.
В LTR-дизайне обратите внимание на стили. В этом случае ссылка с логотипа будет закреплена слева, а login-container — справа.
Панель входа в шапке сайта Facebook в LTR-дизайне
Как только вы назначите тегу body атрибут dir=»rtl, вся разметка будет зеркально отражена: логотип расположится справа, а login-container — слева. Противоположные значения будут присвоены всем блокам с исходными свойствами float-left или float-right. Так вы развернете весь интерфейс.
Dir-атрибут задает направление текста и определяет вариант его отображения (слева направо или справа налево). Браузеры отображают текст в том направлении, которое назначено в наборе символов Юникода, но с атрибутом dir вы можете задать то направление, которое необходимо вам.
Возможные варианты: dir=»ltr», dir=»rtl» и dir=»auto». Этот атрибут также может быть перезаписан с помощью свойства direction CSS.
Поскольку направление текста семантически связано с содержимым, а не с представлением текста на экране, настоятельно рекомендуется использовать именно dir-атрибут, а не CSS-свойства. Таким образом, текст будет отображаться правильно даже в браузерах, которые не поддерживают CSS (или в тех случаях, когда поддержка CSS отключена).
С этим атрибутом вы сможете горизонтально отразить изображения, переназначить шрифты, выравнивать текст по любой стороне страницы и т.д. Однако вручную все это делать довольно хлопотно. Есть инструменты для автоматизации сборки RTL-стиля, о которых будет рассказано чуть позже.
2. Использование Flexbox
Режим верстки Flexbox пользуется популярностью у многих разработчиков по ряду причин. Он не только обеспечивает гибкость при выравнивании элементов страницы, но также устраняет необходимость переназначать стили для разработки RTL-дизайна. Обратите внимание на кусочек кода ниже:
Пример flexbox-макета в LTR-дизайне
Пример flexbox-макета в RTL-дизайне
Здесь также будет полезна система CSS Grid. Сначала создается grid-контейнер: для свойства display указывается значение grid (представьте его в виде таблицы с двумя столбцами и тремя строками). Сверху: заголовок занимает всю ширину экрана, боковая панель слева, в то время как основное содержание и футер находятся справа, один под другим.
Пример базового направления grid-макета в LTR-дизайне
Для RTL путем изменения dir-атрибута вы зеркально отражаете весь макет:
Несмотря на то, что использование таблиц для разработки макетов в настоящее время не так популярно, с их помощью вполне можно задать нужное вам направление, что и продемонстрировано в предыдущих примерах, и это означает, что при добавлении тега dir=»rtl» столбцы будут начинаться справа и двигаться справа налево. Все элементы таблицы будут следовать этому, если только изначально не будет задано другое направление.
Кодировка символов
Сохраните свой файл, используя ту кодировку символов, которая содержит необходимые вам знаки (UTF-8 — это неплохой вариант). Объявите, что вы собираетесь использовать такие символы, в теге «head» вашей HTML-страницы:
UTF-8 — это общепринятый вариант кодировки текста, способный хранить символы Юникода, и он охватывает почти все существующие языки, символы и знаки препинания.
Использование UTF-8 также избавляет от необходимости размещения логики на стороне сервера при индивидуальном определении кодировки символов каждой страницы или каждого представления входящей формы. Кодирование помогает преобразовать все в двоичные числа. Например, «hello» в UTF-8 будет храниться так (в двоичном коде): 01101000 01100101 01101100 01101100 01101111.
Форматированный текст
Постарайтесь как можно меньше использовать курсив и жирное начертание. Последнее ухудшает читаемость текста в большинстве RTL-языках (особенно арабских), а курсив просто никогда не используется. Кроме того, заглавные буквы почти всегда отсутствуют в RTL-языках.
Пример пропуска заглавных букв в RTL-языках
Если вам нужно выделить определенную часть текста на арабском языке, следует использовать надчеркивание вместо подчеркивания, курсив или увеличение интервала между символами. Вот как это сделать:
Пример надчеркивания арабского текста
Убедитесь, что текст выровнен по правому краю, а шрифт и размер шрифта подобраны правильно (будет лучше, если вы их настроите), потому что латинские шрифты, как правило, влияют на читаемость арабского текста.
На самом деле, самый простой способ подобрать верный шрифт — обратиться к своему клиенту (при условии, что он владеет языком). Дело в том, что такие языки, как арабский, как правило, имеют большое количество устных и письменных вариантов, и если вы разрабатываете продукт специально для какого-то региона, то должны использовать тот вариант языка, который находится там в обращении.
Если ваш клиент не является носителем языка продукта или не в состоянии помочь вам, всегда есть вариант использовать один из шрифтов Google Noto (доступны по одному шрифту на каждый язык, и все они бесплатные). В качестве альтернативы Arabnet рекомендует 10 арабских шрифтов (список составлен в 2014 году, но за последние три года в этой области мало что изменилось). Однако, имейте в виду, что ваш клиент всегда лучше знает, какой вариант языка чаще всего используется в конкретном регионе, и если у вас есть возможность проконсультироваться с ним об этом, сделайте это в первую очередь.
Кроме того, помните, что слова в RTL-языках часто гораздо короче слов на английском языке, поэтому, чтобы сохранить баланс на странице, над текстом и его отображением нужно будет плотно поработать.
Иконки
Использование иконок в RTL-дизайне — задача непростая. Имейте в виду, что некоторые из них могут быть отзеркалены, а некоторые могут оказаться оскорбительными для людей определенных национальностей, так что дважды проверьте, что за иконки вы используете и какой они несут смысл.
Симметричные иконки поворачивать не нужно.
Симметричные иконки зеркалить не надо
С другой стороны, иконки, которые четко указывают определенное направление, должны быть зеркально отражены.
Зеркально отразите иконки, указывающие направление: в данном случае это кнопка «Назад»
В CSS с помощью функции scale свойства transform можно масштабировать размер элемента. Изменение размера происходит по осям абсцисс и ординат. Если установлено значение 1, то ничего не происходит, при значении больше единицы происходит увеличение объектов, а при значениях от 0,1 до 1 — уменьшение. 0 приведет к визуальному исчезновению элемента, а отрицательное значение — к его флипу, повороту. Например, значение в указанном фрагменте кода переворачивает элемент по оси X.
Значки, содержащие слова или символы из LTR-языков, не нужно зеркально отражать, но по возможности они должны быть локализованы.
Убедитесь в корректности используемых иконок. Например, использование бокалов в качестве символа для ресторана может быть неправильно понято, потому что употребление алкоголя запрещено в исламе. Необходимо учитывать культурные особенности, и разработчики должны дважды проверить, подходят ли для целевого рынка те символы и знаки, которые они используют.
Выбирайте иконки с умом
Навигационные меню
В RTL-сайтах логотипы, навигационные кнопки и меню должны располагаться в правом верхнем углу страницы. Два последних элемента также должны отображаться в обратном порядке. Вам не нужно, однако, отражать элементы, связанные с контролем медиа-контента (например, кнопки воспроизведения и паузы).
Пример использования кнопок управления контентом в проигрывателе Youtube в RTL-дизайне
Порядок цифр
Порядок цифр в числах в RTL-дизайне менять не следует. Обратите внимание на номер телефона ниже. Цифры отображаются в том же порядке как в LTR, так и в RTL, но иконка трубки телефона меняет свое положение. То же правило применяется и к другим цифрам (таким, как адреса и другие числовые строки).
Порядок цифр не меняется в RTL-дизайне
Положение кнопок управления
Хотя люди, говорящие на RTL-языках, воспринимают и обрабатывают информацию справа налево, многие из них правши. Поэтому нет ничего плохого в том, чтобы не отражать зеркально кнопки управления, потому что такое их расположение вполне комфортно для пользователей. Например, если бы оранжевая кнопка, показанная ниже, была расположена слева, то было бы чрезвычайно трудно дотянуться до нее большим пальцем правой руки, держащим устройство:
Размещение оранжевой кнопки слева было бы неудобно для пользователей
В этом случае было бы гораздо удобнее для пользователей, если бы такие важные элементы управления были большими и располагались посередине экрана.
Размещение оранжевой кнопки в середине страницы могло бы решить все связанные с комфортным управлением проблемы
Элементы в нижней панели вкладок, изображенной ниже, должны располагаться справа налево. RTL также существует в персидском языке — смотрите пример ниже:
В RTL-дизайне элементы нижней панели должны располагаться справа налево
Выпадающее меню навигации должно появляться справа:
Положение других символов
Позиции символов, которые могут быть использованы и в RTL, и в LTR (знаки препинания, например), будут зависеть от направления текста в целом. Это происходит потому, что браузеры обрабатывают RTL-слова в RTL-направлении, хотя Формат данных начинается с самого начала. Пунктуация преобразуется только в указанном направлении.
Следующий пример лучше иллюстрирует проблему:
Вы должны так конвертировать RTL- и LTR-строки, чтобы знаки препинания отображались в правильном направлении.
Для этого вам понадобится разбить эти строки на отдельные элементы. Затем указать их направление либо с помощью dir-атрибута, или CSS-свойства direction. В первом случае вы бы сделали это:
В качестве альтернативы можно пользоваться тегом bdi, чтобы избегать такого рода проблем. Однако, он поддерживается только Chrome (16) и Firefox (10).
Отдельный RTL-CSS файл
Для основных стилей CSS необходимо создать отдельный RTL-файл и там установить горизонтальные свойства (float слева и справа, padding слева и справа, margins и т.д.), а также переосмыслить их соответствующим образом:
Если вам нужно устранить некоторые другие LTR-направленные функции, вы всегда можете создать и прикрепить другой rtl.css файл.
В случае, если такой подход недостаточно хорошо отвечает вашим потребностям, вы можете создать два отдельных файла стилей для LTR и RTL. Для автоматизации сборки можно использовать различные утилиты. Одной из таких программ является css-flip (разработано Twitter). С ее помощью вы можете легко адаптировать свойства существующего исходного файла под RTL.
Вы также можете использовать замены и исключения на основе директив в исходном файле. Например, в input.css:
RTLCSS — это еще одна программа, которая поддерживает замены (исключения) и позволяет разработчикам переименовывать селекторы, добавлять локальные конфигурации исключения, удалять или добавлять свойства.
Также можно использовать плагины для инструментов сборки, в том числе для Gulp, Grunt и Webpack.
Например, в input.css:
Кроме того, можно создать конфигурации для переименования селекторов. И снова в input.css:
Календари
Календари, вероятно, один из самых важных и сложных аспектов RTL-дизайна, потому что календарные годы различаются между географическими регионами LTR и RTL.
Исламский календарь — хиджра — это лунный календарь, что означает, что год в григорианском календаре длиннее, чем в исламском календаре. Чтобы верно определять даты, советуем пользоваться специальными конвертерами дат.
Древнееврейский календарь, который имеет 12 лунных месяцев с добавлением дополнительного месяца каждые несколько лет, также отличается от григорианского. Эти различия затрудняют поиск адекватного инструмента для работы с григорианскими календарями в LTR-скриптах и негригорианскими в RTL.
Один из популярных инструментов для календарей — FullCalendar, потому что он вычисляет время на основе Moment.js. Тем не менее, он не может конвертировать даты из календаря в календарь и полезен только для локализации дат и отображения RTL-содержимого.
dijit/Calendar способен отображать негригорианские календари, но годится для довольно ограниченного круга задач.
Конструктор DateTimeFormat — бесценное свойство для интернациональных объектов. Оно позволяет передавать дополнительные параметры в строку аргумента при указании точного форматирования времени и даты.
Ниже вы можете увидеть, как дата может быть преобразована из григорианского календаря в исламский:
Сокращения (дни недели)
Хотя аббревиатуры названий дней недели одинаковы для многих языков, они невозможны в арабском языке, потому в нем все они начинаются с одной буквы. Вместо этого просто отобразите названия целиком, но уменьшите размер шрифта.
Интернационализация
Если продукт требует интернационализации, обратите внимание на ECMA Script Internationalization API. Это стандарт, который описывает программный интерфейс ECMAScript для адаптации к лингвистическим и культурным особенностям языков или стран.
Еще одним важным моментом является то, что ECMAScript поддерживает не только арабский язык, но и широкий спектр других комбинаций, таких как арабо-арабский и арабо-тунисский.
Также имейте в виду, что использование восточных и западных арабских цифр может зависеть от варианта языка. Некоторые регионы могут использовать восточные арабские цифры (1,2,3), другие — западные (١٢٣).
Форматирование арабско-египетских цифр
В Тунисе, например, обычно пользуются восточно-арабскими цифрами:
Примеры нативных арабских сайтов
Arageek — это сайт, посвященный новостям из мира гик-культуры
Hawaa Forum — это интернет-сообщество для женщин
Saudi League — сайт, посвященный футболу в Арабских Эмиратах (новости, турнирные дни, информация о командах и многое другое)
Заключение
Культурные и языковые особенности могут стать проблемой, когда вы разрабатываете продукты для различных регионов и рынков. Когда дело доходит до RTL-рынка, разработчики должны придерживаться совершенно другого свода правил, что делает весь процесс более сложным. Использование приведенных выше 12 советов поможет вам преодолеть основные проблемы при проектировании RTL-продуктов.