Поддержка языков RTL

Question

Я хочу, чтобы мой сайт поддерживал языки LTR и RTL.

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

Как это делает Facebook, например. Если вы наберете какой-либо арабский текст в поиске, он автоматически переключит направление на RTL

Не нашел учебного пособия по поисковому запросу, любого сценария или так.

Я нашел атрибут dir="auto", который автоматически запускает правильное направление, но похоже, что он не поддерживается старыми браузерами.

Любой совет, учебник, сценарий, как это сделать, поможет.

Answer 1

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

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

• Facebook использует алгоритм, который, по большей части, пытается распознать первый «сильный» характер, поэтому набрав фразу с одним еврейским словом, за которым следует много английского языка будет еще показать пункт как RTL выровнен. (Они также, похоже, имеют разницу между тем, что вы видите, когда вы типа и тем, что вы видите, когда комментарий опубликован, но это другая проблема).
• Google-тусовки, похоже, переключает его контексты RTL/LTR на основе количества сильные персонажи в каждом направлении. По мере ввода, ваш контекст может переключаться несколько раз с LTR на RTL, если вы начнете вводить один язык над другим.

Здесь нет правильного или неправильного выбора, есть только предпочтение и то, что лучше всего работает в вашем алгоритме.

Вы можете прочитать о «сильных символов» в Unicode двунаправленного алгоритма здесь: http://unicode.org/reports/tr9/

Вы можете увидеть пример того, как распознать первый «сильный характер» в строке для встраивания целей в файле языка в MediaWiki, с регулярным выражением, которое проверяет направленность (группа 1 является LTR и RTL группы 2). Вы можете использовать их для создания JavaScript-метода, который устанавливает атрибут dir = "" вашего textarea на основе либо первого сильного символа, либо большинства символов, как вы видите подходят: https://github.com/wikimedia/mediawiki/blob/6f19bac69546b8a5cc06f91a81e364bf905dee7f/languages/Language.php#L174

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

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