Навигация по сайту

Популярные статьи

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

1хбет
  Для торжества зла необходимо только одно условие —  чтобы хорошие люди просто промолчали! Привет друзья! Сегодня очень серьёзная статья от первого лица (непосредственного участника

Льготы для пенсионеров в 2017-2018 году
С 1 февраля 2017 года пенсии российских пенсионеров проиндексируют (повысят) на 5,4%. Такое постановление подписал премьер-министр РФ Дмитрий Медведев. Единовременную компенсацию в размере 5000 руб.

Понятие и виды пособий и компенсационных выплат
Общие положения Заключение Понятие и виды пособий и компенсационных выплат Общие

Налоговый вычет за обучение в 2016-2017 годах. Как получить возврат налога (ндфл) на ребёнка (документы)
Указанный социальный налоговый вычет представляет собой возможность возврата части средств, истраченных на обучение, как свое, так и близких родственников. Условиями получения данного вида вычета является

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

Страхование вкладов
Создание системы обязательного страхования банковских вкладов населения (ССВ) является специальной государственной программой, реализуемой в соответствии с Федеральным законом «О страховании вкладов физических

Алименты расчет и выплата
Основания для удержания алиментов Согласно действующему законодательству, родители обязаны содержать несовершеннолетних детей. Порядок и форма представления содержания определяется родителями самостоятельно

Выплаты социального характера
К выплатам социального характера, в частности, относятся: 1) выходное пособие при прекращении трудового договора; 2) суммы, выплаченные уволенным работникам на период трудоустройства в связи с реорганизацией

Алименты расчет и выплата
После развода (2 года назад) мы с бывшим мужем договорились между собой, без суда, о выплате алиментов в размере 3-х тысяч рублей. Деньги он выплачивает каждый месяц, но их катастрофически не хватает.

Облако меток

Разработка справа налево в мобильном дизайне

  1. Об авторах Роберт Додис является разработчиком внешнего интерфейса в SteelKiwi Inc. Он настоящий...
  2. 1. Использование атрибута dir или CSS
  3. 2. Использование Flexbox
  4. Кодировка символов
  5. Иконки
  6. Порядок цифр
  7. Положение кнопок управления
  8. Положение других символов
  9. Отдельный файл RTL CSS
  10. Календари
  11. хиджры
  12. Еврейский календарь
  13. Инструменты для отображения календарей
  14. Сокращения (дни недели)
  15. интернационализация
  16. Примеры родных арабских сайтов
  17. Поделитесь своим опытом!

Об авторах

Роберт Додис является разработчиком внешнего интерфейса в SteelKiwi Inc. Он настоящий художник всех проектов, ориентированных на RTL, и часами ищет лучшее и…

Подробнее о Роберте Додисе ...

Рынок Ближнего Востока растет быстрыми темпами, и, как следствие, спрос на ИТ-продукты также растет в регионе. Но что странно, так это то, что странам Ближнего Востока необходим дизайн, который не только совместим с их потребностями и удобен для их пользователей, но и соответствует их языковым стандартам, что делает серьезный процесс адаптации очень важным. Учитывая, что большинство языков, на которых говорят на Ближнем Востоке, пишутся и читаются справа налево (например, арабский , Иврит и урду), разработчики часто сталкиваются с рядом проблем при создании продуктов на этих языках.

Рынок Ближнего Востока растет быстрыми темпами, и, как следствие, в регионе также быстро растет спрос на различные ИТ-продукты. Но что странно, так это то, что странам Ближнего Востока необходим дизайн, который не только совместим с их потребностями и удобен для их пользователей, но и соответствует их языковым стандартам, что делает серьезный процесс адаптации очень важным. Учитывая, что большинство языков, на которых говорят на Ближнем Востоке, пишутся и читаются справа налево (например, арабский , Иврит и урду), разработчики часто сталкиваются с рядом проблем при создании продуктов на этих языках.

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

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

Листать интерфейс

Прежде всего, интерфейс должен быть перевернут справа налево. Вы могли бы подумать, что это скорее совет "D'uh", но мы просто не могли игнорировать его, потому что это на самом деле самое первое, что нужно сделать.

Вот пример дизайна слева направо (LTR) Facebook:

Страница входа в Facebook в дизайне LTR. (Источник изображения: facebook ) ( Посмотреть большую версию )

А вот и RTL-версия Facebook:

Страница входа в Facebook в дизайне RTL. (Источник изображения: facebook ) ( Посмотреть большую версию )

Есть несколько способов добиться этого.

1. Использование атрибута dir или CSS

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

Для дизайна LTR , обратите внимание на стили. В этом случае ссылка с логотипом будет зафиксирована слева, а логин-контейнер - справа.

<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Пример </ title> <style> .float-left {float: left; } .float-right {float: right; } body [dir = "rtl"] .float-left {float: right; } body [dir = "rtl"] .float-right {float: left; } </ style> </ head> <body> <header class = "clearfix"> <a href="#" class="float-left logo"> <img src = "static / logo.png"> </ a> <nav class = "float-right login-container"> </ nav> </ header> <main> </ main> <footer> </ footer> </ body> </ html> < Лучшая панель входа в Facebook в дизайне LTR. (Источник изображения: facebook ) ( Посмотреть большую версию )

Для дизайна RTL , как только вы назначите тег body для атрибута dir = "rtl, вся разметка будет зеркально отображена, поместив логотип справа и контейнер входа в систему слева. Противоположные свойства будут применены к блокам с классом float-left или float-right.

<body dir = "ltr">

Атрибут dir указывает направление и отображение текста (слева направо или справа налево). Обычно браузеры распознают направление, потому что оно назначено в наборе символов Unicode, но с атрибутом dir вы можете установить любое направление, которое вы хотите.

Возможные варианты: dir = "ltr", dir = "rtl" и dir = "auto". Этот атрибут также можно переписать с помощью свойства direction CSS.

Поскольку направление текста семантически связано с контентом, а не с представлением, мы рекомендуем, чтобы, когда это возможно, веб-разработчики использовали атрибут dir, а не свойства CSS, связанные с ним. Таким образом, текст будет отображаться правильно даже в браузерах, которые не поддерживают CSS (или в тех, где поддержка CSS отключена).

Лучшая панель входа в Facebook в дизайне RTL. (Источник изображения: facebook ) ( Посмотреть большую версию )

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

2. Использование Flexbox

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

Для LTR :

<div class = "flex-container"> <div class = "flex-item"> 1 </ div> <div class = "flex-item"> 2 </ div> <div class = "flex-item"> 3 </ div> <div> <div class = flex-container> <div class = flex-item> 1 </ div> <div class = flex-item> 2 </ div> <div class = flex-item> 3 </ div> <div>   Пример компоновки flexbox в дизайне LTR Пример компоновки flexbox в дизайне LTR. (Источник изображения: SteelKiwi ) ( Посмотреть большую версию )

Для RTL :

<div class = "flex-container" style = "direction: ltr;"> <div class = "flex-item"> 1 </ div> <div class = "flex-item"> 2 </ div> <div class = "flex-item"> 3 </ div> <div> <div class = flex-container style = direction: ltr;> <div class = flex-item> 1 </ div> <div class = flex-item> 2 </ div> <div class = flex-item> 3 </ div> <div>   Пример макета flexbox в дизайне RTL Пример макета flexbox в дизайне RTL. (Источник изображения: SteelKiwi ) ( Посмотреть большую версию )

Расположение сетки также полезно здесь. Мы устанавливаем grid-template-area в содержащем блоке с помощью свойства {display: grid;} (представьте, что это таблица с двумя столбцами и тремя строками). Сверху: верхний колонтитул занимает всю ширину экрана, боковая панель находится слева, а основное содержимое и нижний колонтитул - справа, один под другим.

Для LTR :

<div class = "grid" style = "grid-template-area:" header header ";" главная боковая панель "" нижний колонтитул боковой панели ";"> <div class = "item-1" style = "grid-area: header; "> header </ div> <div class =" item-2 "style =" grid-area: sidebar; "> sidebar </ div> <div class =" item-3 "style =" grid-area: main; "> main </ div> <div class =" item-4 "style =" grid-area: footer; "> footer </ div> </ div> <div class = grid style = grid-template-area: header header ; главная боковая панель  нижний колонтитул боковой панели ;> <div class = item-1 style = grid-area: header; > header </ div> <div class = item-2 style = grid-area: sidebar; > sidebar </ div> <div class = item-3 style = grid-area: main; > main </ div> <div class = item-4 style = grid-area: footer; > footer </ div> </ div>   Пример основного направления расположения сетки в дизайне LTR Пример основного направления расположения сетки в дизайне LTR. (Источник изображения: SteelKiwi )

Для RTL путем изменения атрибута dir горизонтальная ось с классом сетки и свойством {display: grid;} будут корректироваться в указанном направлении. Матрица макета затем инвертируется:

<div class = "grid" style = "grid-template-area:" header header "" main боковой панели "" нижний колонтитул боковой панели "; dir =" rtl "> <div class =" item-1 "style =" grid-area : header; "> header </ div> <div class =" item-2 "style =" grid-area: sidebar; "> sidebar </ div> <div class =" item-3 "style =" grid-area : main; "> main </ div> <div class =" item-4 "style =" grid-area: footer; "> footer </ div> </ div> <div class = grid style = grid-template-area: header header  main боковой панели  нижний колонтитул боковой панели ; dir = rtl > <div class = item-1 style = grid-area : header; > header </ div> <div class = item-2 style = grid-area: sidebar; > sidebar </ div> <div class = item-3 style = grid-area : main; > main </ div> <div class = item-4 style = grid-area: footer; > footer </ div> </ div>   Пример перевернутой матрицы компоновки сетки в дизайне RTL Пример перевернутой матрицы компоновки сетки в дизайне RTL. (Источник изображения: SteelKiwi )

Несмотря на то, что использование таблиц для создания макетов уже давно не популярно, они все равно будут строить направление потока как компонент, как в предыдущих примерах, то есть при добавлении тега dir = "rtl" столбцы начнут работать. справа и двигайтесь справа налево. Все элементы таблицы будут следовать за этим, если направление не будет заранее определено заранее.

Кодировка символов

Сохраните свой файл, используя кодировку символов, которая включает в себя нужные вам символы (UTF-8 - хорошая ставка). Объявите, что вы собираетесь использовать такие символы в теге head вашей HTML-страницы с:

<meta charset = "utf-8" />

UTF-8 - это кодировка символов, способная кодировать все возможные кодовые точки Unicode, и она охватывает практически все языки, символы и знаки пунктуации. Использование UTF-8 также устраняет необходимость в серверной логике при индивидуальном определении кодировки символов каждой страницы или каждой входящей отправки формы. Кодирование помогает конвертировать все в двоичные числа. Например, «привет» в UTF-8 будет храниться так (в двоичном виде): 01101000 01100101 01101100 01101100 01101111.

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

Пример пропуска заглавных букв в языках RTL. (Источник изображения: SteelKiwi ) ( Посмотреть большую версию )

Если вам необходимо выделить определенную часть текста на арабском языке, подчеркните ее вместо подчеркивания, пробела или курсива. Вот как мы это делаем:

<h1> مثال </ h1> h1 {text-ornament: overline; } <h1> مثال </ h1> h1 {text-ornament: overline;  }   Пример выделения арабского текста Пример выделения арабского текста. (Источник изображения: SteelKiwi )

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

На самом деле, лучший способ справиться со шрифтами - это поговорить с вашим клиентом (если, конечно, он говорит на языке). Дело в том, что такие языки, как арабский, как правило, имеют большое количество устных и письменных вариаций, и если вы делаете продукт, предназначенный специально для какого-то региона, он должен действительно отображать используемую там языковую версию. Если вам интересен этот вопрос, доступна информация об истории систем письменности на арабском языке. Вот ,

Если ваш клиент не является носителем языка продукта или не может вам помочь, всегда есть простой вариант использования одного из Google Noto шрифты (есть один для каждого языка, и все они бесплатны). В качестве альтернативы, Арабнет рекомендует 10 арабских шрифтов (список за 2014 год, но за последние три года ситуация в этой области не сильно изменилась). Тем не менее, имейте в виду, что ваш клиент всегда лучше знает, какой вариант языка используется в его регионе, и если у вас есть возможность проконсультироваться с ним об этом, сделайте это прямо сейчас.

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

Иконки

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

Значки, которые являются симметричными и не указывают в определенном направлении, не должны быть перевернуты.

Нет необходимости зеркально отображать симметричные значки. (Источник изображения: SteelKiwi )

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

Зеркальные значки, которые указывают на сторону. (Источник изображения: SteelKiwi ) <span class = "back-icon"> </ span> body [dir = "rtl"] {transform: scale (-1, 1); }

CSS-функция scale (x, y), используемая в приведенном выше примере, изменяет размер элемента. Если установлено значение 1, оно ничего не делает, но когда отрицательно, оно выполняет функцию «точечного отражения» и может изменять размер.

Значки, содержащие символы или слова из не-RTL языков, не нужно отражать. Вы должны, однако, локализовать их при необходимости.

Вы должны, однако, локализовать их при необходимости

Значки, содержащие слова или символы из не-RTL языков, не нужно переводить, но при необходимости их следует локализовать. (Источник изображения: SteelKiwi )

Убедитесь, что вы используете соответствующие значки. Например, использование бокала для вина в качестве символа для ресторана или бара может быть неправильно понято, потому что употребление алкоголя запрещено в исламе. Необходимо учитывать культурные особенности, и разработчики должны перепроверить, что используемые ими символы и значки соответствуют целевому рынку.

Избегайте неуместных в культурном отношении значков. (Источник изображения: SteelKiwi )

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

Пример использования YouTube кнопок управления медиа-контентом в дизайне RTL. (Источник изображения: YouTube ) ( Посмотреть большую версию )

Порядок цифр

Порядок цифр в числах не должен изменяться для RTL. Обратите внимание на номер телефона ниже. Цифры отображаются в одинаковом порядке как в LTR, так и в RTL, но значок телефона меняет положение. Это же правило применяется к другим цифрам (таким как адреса и другие числовые строки).

Это же правило применяется к другим цифрам (таким как адреса и другие числовые строки)

Порядок цифр не должен меняться для дизайна RTL. (Источник изображения: SteelKiwi ) ( Посмотреть большую версию )

Положение кнопок управления

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

Например, если оранжевая кнопка, показанная ниже, расположена слева, людям было бы крайне трудно достать ее правым большим пальцем, держа устройство в одной руке:

Размещение оранжевой кнопки слева будет неудобным для пользователей. (Источник изображения: SteelKiwi ) ( Посмотреть большую версию )

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

Размещение оранжевой кнопки в середине страницы решит все проблемы, связанные с удобством. (Источник изображения: SteelKiwi ) ( Посмотреть большую версию )

Элементы в нижней панели вкладок ниже должны располагаться справа налево. RTL также существует на персидском языке - см. Пример ниже:

В дизайне RTL элементы в нижней панели вкладок должны располагаться справа налево. (Источник изображения: SteelKiwi )

Навигационные ящики должны появиться с правой стороны.

В дизайне RTL выдвижные ящики должны появляться с правой стороны. (Источник изображения: SteelKiwi )

Положение других символов

Положение символов, которые можно использовать как для RTL, так и для LTR (например, знаков препинания), будет зависеть от направления текста в целом. Это связано с тем, что браузеры обрабатывают слова RTL в направлении RTL, даже если формат данных начинается с самого начала. Пунктуация преобразуется только в указанном направлении.

Следующий пример должен лучше проиллюстрировать проблему:

Вам нужно преобразовать строки RTL и LTR в отдельные элементы, чтобы символы пунктуации появлялись в правильном направлении. (Источник изображения: SteelKiwi ) ( Посмотреть большую версию )

Чтобы решить эту проблему, вы можете преобразовать строки RTL и LTR (или текстовые фрагменты) в отдельные элементы. Затем укажите их направление либо с помощью атрибута dir, либо свойства CSS direction. В первом случае вы бы сделали это:

<p dir = "rtl" class = "rtl-text">? سوف أعطي مثالا على ذلك. لا تمانع </ p> <p dir = "ltr" class = "ltr-text"> Я приведу пример. Ты не против? </ P>

И во втором, это:

.rtl-text {direction: rtl; } .ltr-text {direction: ltr; }

Кроме того, вы также можете использовать тег bdi, чтобы избежать этого типа проблемы. Однако это поддерживается только в Chrome (16) и Firefox (10).

Отдельный файл RTL CSS

Для базовых стилей CSS вы должны создать отдельный RTL-файл и установить там горизонтальные свойства (плавающие влево и вправо, отступы влево и вправо, поля и т. Д.), А также переопределить их соответствующим образом:

div.class {width: 150px; высота: 100 пикселей; плыть налево; отступы: 0 15px 0 10px; }

И в файле rtl.css:

html [dir = "rtl"] div.class {float: right; отступы: 0 10px 0 15px; }

Если вам нужно исключить некоторые другие функции, ориентированные на LTR, вы всегда можете создать и прикрепить другой отдельный файл rtl.css.

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

В input.css:

p {padding-left: 1em; }

И в output.rtl.css:

p {padding-right: 1em; }

Вы также можете использовать замены и исключения, основываясь на директивах в исходном файле. Например, в input.css:

p {/ @replace: -32px -32px / background-position: -32px 0; / @replace: ">" / content: "<"; / @noflip / float: left; }

И в output.rtl.css:

p {background-position: -32px -32px; содержание: ">"; плыть налево; }

RTLCSS это еще один инструмент, который поддерживает замены (исключения) и позволяет разработчикам переименовывать селекторы, добавлять локальные конфигурации исключений, а также удалять или добавлять свойства.

Вы также можете использовать плагины для сборочных инструментов, в том числе для Глоток , хрюкать а также Webpack ,

Например, в input.css:

.example {transform: translateY (10px) / * rtl: append: scaleX (-1) * /; семейство шрифтов: "Helvetica Neue", Arial / * rtl: prepend: "арабские шрифты", * /; размер шрифта: 1.3em / * РТЛ: 1.2em * /; / * rtl: удалить * / text-украшение: подчеркивание; / * rtl: begin: ignore * / margin-left: 15px; обивка налево: 20px; / * rtl: end: ignore * /}

И в output.rtl.css:

.example {transform: translateY (10px) scaleX (-1); font-family: "арабские шрифты", "Helvetica Neue", Arial; размер шрифта: 1.2em; Левое поле: 15px; обивка налево: 20px; }

Вы также можете сделать настройки для переименования селекторов. Опять же, в input.css:

/ * rtl: begin: options: {"autoRename": true, "stringMap": [{"name": "prev-next", "search": ["prev"], "replace": ["next"] , "options": {"ignoreCase": false}}]} * / slide-prev {content: ''; } / * rtl: end: options * /

И в output.rtl.css:

slide-next {content: ''; }

Календари

Календари, вероятно, являются одним из наиболее важных и сложных аспектов разработки RTL, поскольку календарные годы различаются в географических регионах LTR и RTL.

хиджры

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

Еврейский календарь

Еврейский календарь, который имеет 12 лунных месяцев, с добавлением дополнительного месяца каждые несколько лет, также отличается от григорианского календаря. Эти различия затрудняют поиск подходящего инструмента для работы как с григорианскими календарями в LTR-скриптах, так и с негригорианскими календарями в RTL-скриптах.

Инструменты для отображения календарей

Одним из популярных инструментов является FullCalendar , потому что он рассчитывает время на основе Moment.js. Однако он не может преобразовывать календари разных типов и полезен только для локализации дат и отображения содержимого RTL.

Dijit / Календарь может отображать не-григорианские календари, но имеет довольно ограниченный круг задач.

Конструктор DateTimeFormat является бесценным свойством для международных объектов. Это позволяет передавать дополнительные параметры в строку аргумента при указании точного форматирования для времени и даты.

Ниже вы можете увидеть, как нужно конвертировать дату из григорианского календаря в исламский:

var sampleDate = new Intl.DateTimeFormat ("ru-RU-u-ca-islamicc"). format (new Date ()); // => "26.03.2017" console.log (sampleDate); // => "27.06.1438 АХ"

Сокращения (дни недели)

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

Вместо этого просто отобразите их целые имена и уменьшите размер шрифта

Все названия дней недели начинаются с одной буквы на арабском языке, что означает, что вы не можете сокращать их, как на английском языке. (Источник изображения: SteelKiwi ) ( Посмотреть большую версию )

интернационализация

Если ваш продукт требует интернационализации, рассмотрите интерфейс ECMAScript Internationalization. Он поставляется с чувствительным к языку сравнением строк и соответствующим форматированием чисел, дат и времени.

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

Также имейте в виду, что использование восточных и западно-арабских цифр может зависеть от языкового варианта. В некоторых регионах могут использоваться восточно-арабские цифры (123), а в других - западные (١٢٣).

var sampleNumber = new Intl.NumberFormat ('ar-EG'). format (12345); console.log (sampleNumber); // => ١٢ ٬ ٣٤٥

Например, в Тунисе восточно-арабские цифры обычно используются:

var sampleNumber = new Intl.NumberFormat ('ar-TN'). format (12345); console.log (sampleNumber); // => 12345

Примеры родных арабских сайтов

Arageek

посвящен всем новостям хип-хика по всему миру. (Источник изображения: Arageek ) ( Посмотреть большую версию ) посвящен всем новостям хип-хика по всему миру Хаваа Форум это интернет-сообщество для женщин. (Источник изображения: Hawaaworld.com ) ( Посмотреть большую версию ) Саудовская лига посвящен футболу в Саудовской Аравии, с новостями, турнирными днями, информацией о командах и многим другим. (Источник изображения: Saudileague.com ) ( Посмотреть большую версию )

Поделитесь своим опытом!

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

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

Ты не против?