Обеспечение поддержки пользовательского интерфейса с двунаправленным письмом (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Разработка приложений с поддержкой двунаправленного текста (BiDi) для систем записи справа налево.

Введение

Корпорация Майкрософт уже давно производит программное обеспечение для Ближнего Востока и других регионов, использующих систему письменности справа налево. Требования к разработке для этих регионов уникальны, потому что их общеупотребительные системы письменности требуют поддержки двунаправленного текста (BiDi). Это означает возможность ввода и отображения текста справа налево (RTL) или слева направо (LTR). Первой версией Windows, которая поддерживала языки BiDi, стала Windows 3.1. В Windows 98 ориентация пользовательского интерфейса была зеркально обращена, чтобы пользователи, говорящие на арабском языке или иврите, могли чувствовать себя более комфортно.

Windows 8 позволяет полноценно работать с языками BiDi. Каждый элемент нового интерфейса Windows разработан для полноценного использования при работе с языками, в которых применяется запись справа налево, что позволяет представить эти языки в их наиболее естественном виде.

Начиная с Windows 8 всего поддерживается девять языков BiDi:

• Два полностью локализованных языка (арабский, иврит).
• Семь пакетов интерфейса пользователя для развивающихся рынков (фарси, урду, дари, центральный курдский, синдхи, панджаби (Пакистан) и уйгурский). Два из этих языков появились только в Windows 8.

Разработка приложений Магазина Windows для рынков ПО с поддержкой двунаправленного письма

Далее описана философия разработки интерфейса BiDi для Windows и приведены практические примеры, содержащие рекомендации по разработке BiDi.

Элементы разработки интерфейса Bidi

При разработке интерфейса BiDi в Windows важно учитывать четыре фактора.

• Зеркальное отображение пользовательского интерфейса. Направленность интерфейса позволяет представлять содержимое с записью справа налево в естественном виде. Структура пользовательского интерфейса соответствует языкам BiDi.
• Цельность в работе пользователя. Дизайн выглядит естественно в записи справа налево. Все элементы пользовательского интерфейса имеют единое направление разметки и выглядят так, как ожидает пользователь.
• Оптимизация сенсорного ввода. Как и в обычном интерфейсе, элементы легкодоступны и дают ощущение естественности при сенсорном взаимодействии.
• Поддержка смешанного текста. Поддержка направленности текста позволяет создавать смешанные текстовые сочетания (английский текст, вставленный в текст BiDi, или наоборот).

Общие сведения о разработке функций

Платформа Windows поддерживает четыре аспекта разработки для BiDi, перечисленные выше. Рассмотрим некоторые основные функции в Windows и контекст, в котором они взаимодействуют с приложением.

Движение в естественном направлении.

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

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

Плитка BiDi:

Англоязычная плитка:

Получение уведомлений с правильным направлением текста.

Плитки поддерживают смешанный текст. Область уведомлений способна настраиваться на выравнивание текста, соответствующее языку уведомления. Когда приложение отправляет уведомление на арабском языке, иврите или другом языке BiDi, текст выравнивается по правому краю, а когда уведомление приходит на английском языке (или другом языке LTR), оно выравнивается по левому краю.

Цельный и удобный интерфейс пользователя в RTL.

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

Ввод текста в произвольном направлении.

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

Использование любого приложения с любым языком.

Установите и используйте ваши любимые приложения на любом языке. Приложения будут выглядеть и функционировать так же, как в версиях Windows без поддержки BiDi. Элементы в приложениях всегда помещаются в соответствующее и заранее известное положение.

Правильное отображение скобок.

Благодаря внедрению алгоритма расстановки скобок BiDi (BiDi Parenthesis Algorithm — BPA) парные скобки всегда отображаются правильно независимо от языка и способа выравнивания.

Неправильные скобки:

Правильные скобки:

Новый шрифт.

В Windows для всех языков BiDi используется новый интерфейсный шрифт Segoe. Этот новый шрифт сформирован и масштабирован для нового интерфейса Windows.

Практический пример #1. Музыкальное приложение BiDi

Описание

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

Установка направленности пользовательского интерфейса

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

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

Обработка текста

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

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

	Англоязычная строка (LTR)	Строка на иврите (RTL)
Выравнивание по левому краю	Hello World!	בוקר טוב!
Выравнивание по правому краю	!Hello World	!בוקר טוב

 

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

Пример. Без настраиваемой обработки расположения строки имя исполнителя "The Contoso Band." будет отображаться как ".The Contoso Band".

Специальная предварительная обработка направления строки

Когда приложение запрашивает на наших серверах метаданные мультимедиа, оно выполняет предварительную обработку каждой строки перед отображением ее пользователю. Во время этой предварительной обработки приложение также выполняет преобразование, чтобы устранить противоречивость в направлении текста. Для этого оно проверяет наличие нейтральных символов на концах строки. Помимо этого, если направление текста строки противоположно направлению, заданному в приложении параметрами языка Windows, оно добавляет (иногда в начале) маркеры направления Юникода. Функция преобразования на JavaScript выглядит следующим образом.

function normalizeTextDirection(data) {
    if (data) {
        var lastCharacterDirection = DetectCharacterDirection(data[data.length - 1]);

        // If the last character has strong directionality (direction is not null), then the text direction for the string is already consistent.
        if (!lastCharacterDirection) {
            // If the last character has no directionality (neutral character, direction is null), then we may need to add a direction marker to
            // ensure that the last character doesn't inherit directionality from the outside context.
            var appTextDirection = GetAppTextDirection(); // checks the <html> element's "dir" attribute.
            var dataTextDirection = DetectStringDirection(data); // Run through the string until a non-neutral character is encountered,
                                                                 // which determines the text direction.

            if (appTextDirection !== dataTextDirection) {
                // Add a direction marker only if the data text runs opposite to the directionality of the app as a whole,
                // which would cause the neutral characters at the ends to flip.
                var directionMarkerCharacter =
                    dataTextDirection === TextDirections.RightToLeft ?
                        UnicodeDirectionMarkers.RightToLeftDirectionMarker : // "\u200F"
                        UnicodeDirectionMarkers.LeftToRightDirectionMarker; // "\u200E"

                data += directionMarkerCharacter;

                // Prepend the direction marker if the data text begins with a neutral character.
                var firstCharacterDirection = DetectCharacterDirection(data[0]);
                if (!firstCharacterDirection) {
                    data = directionMarkerCharacter + data;
                }
            }
        }
    }

    return data;
}

Добавляемые символы Юникода имеют нулевую длину и не влияют на интервал между строками. Этот код может снизить производительность, так как для определения направления строки требуется просматривать всю строку до тех пор, пока не будет найден символ, не являющийся нейтральным. Каждый символ, проверяемый на нейтральность, сначала сравнивается с несколькими диапазонами Юникода, а это не тривиальная проверка.

Практический пример #2. Почтовое приложение BiDi

Описание

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

Установка направленности пользовательского интерфейса

Разметка пользовательского интерфейса приложения "Почта" (Майкрософт) зеркально отражена. Ориентация трех областей изменена таким образом, что область папок расположена у правого края экрана, далее влево располагается область со списком элементов почтовых сообщений, а затем — область отображения сообщения.

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

Обработка текста

Пользовательский интерфейс

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

Правка текста

Требования к правке текста нацелены на создание сообщений в обоих направлениях: справа налево и слева направо. Кроме того, необходимо предусмотреть возможность сохранения компоновки сообщения с использованием подходящего формата, например RTF, в котором можно сохранять информацию о направлении.