Como dar suporte à interface do usuário bidirecional (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Projete seus aplicativos para dar suporte bidirecional a texto de sistemas de escrita da direita para a esquerda.

Introdução

A Microsoft tem longa tradição na produção de software para o Oriente Médio e outras regiões que usam um sistema de escrita da direita para a esquerda. Os requisitos de design para essas regiões do mundo são exclusivos, pois os sistemas de escrita que elas normalmente usam requerem suporte bidirecional a texto. Trata-se da capacidade de inserir e exibir o layout do texto na ordem da direita para a esquerda ou da esquerda para a direita. O Windows 3.1 foi a primeira versão do Windows a incorporar o suporte a idiomas bidirecionais. No Windows 98, a orientação da interface do usuário foi espelhada para que a experiência do usuário tivesse uma aparência mais natural para falantes de árabe ou hebraico.

O Windows 8 oferece uma experiência bidirecional sem compromisso. Todos os elementos da nova IU do Windows foram desenvolvidos para fazer parte de uma experiência do usuário avançada e imersiva da direita para a esquerda, que apresenta esses idiomas em seu estado mais natural.

Um total de nove idiomas bidirecionais são incluídos a partir do Windows 8:

• Dois idiomas totalmente traduzidos (árabe, hebraico).
• Sete Language Interface Packs para mercados emergentes (persa, urdu, dari, curdo central, sindi, punjabi (Paquistão) e uigur). Dois desses idiomas são novos e exclusivos para o Windows 8.

Projetando aplicativos da Windows Store para mercados bidirecionais

Veja aqui a filosofia do design bidirecional do Windows e estudos de caso que mostram considerações do design bidirecional.

Elementos de design bidirecionais

Quatro elementos influenciam as decisões de design bidirecional no Windows:

• Espelhamento de interface do usuário. O fluxo de interface do usuário permite que o conteúdo da direita para a esquerda seja apresentado em seu layout nativo. O design de interface do usuário parece local aos mercados bidirecionais.
• Consistência na experiência do usuário. O projeto parece natural na orientação da direta para a esquerda. Os elementos de interface do usuário compartilham uma direção de layout consistente e aparecem como o usuário os espera.
• Otimização de toque. Similar à experiência do usuário por toque na interface do usuário não espelhada, os elementos são fáceis de acessar e parecem naturais à interação por toque
• Suporte a texto misto. O suporte à direção de texto permite a ótima apresentação de texto misto (texto em inglês nas compilações bidirecionais e vice versa).

Visão geral do projeto de recurso

A plataforma Windows oferece suporte aos quatro elementos de design bidirecional listados acima. Vamos olhar para algumas das principais características relevantes no Windows e fornecer algum contexto na qual elas afetam o seu aplicativo.

Navegue na direção em que se sente natural.

Ajustamos a direção da grade para que ela fluisse da direita para a esquerda, significando que o primeiro bloco na grade é colocado no canto superior direito e o último bloco na parte inferior esquerda. Com isso, as informações são apresentadas de forma já familiar aos usuários de publicações impressas, como livros e revistas, em que o padrão de leitura sempre começa no canto superior direito e caminha para a esquerda.

Para preservar um fluxo consistente da interface do usuário, os blocos na grade sempre retêm um layout da direita para a esquerda, o que significa que o nome e o logotipo do aplicativo são posicionados no canto direito inferior do bloco, independentemente do idioma da interface do usuário do aplicativo.

Bloco bidirecional:

Bloco em inglês:

Obtenha notificações de bloco que são lidas corretamente.

Os blocos possuem suporte a texto misto. A região de notificação tem flexibilidade interna para ajustar o alinhamento do texto com base no idioma de notificação. Quando um aplicativo envia notificações em hebraico, árabe ou em outros idiomas bidirecionais, o texto é alinhado à direita e, quando uma notificação em inglês (ou de outro idioma da esquerda para a direita) chega, ele é alinhado à esquerda.

Uma experiência de usuário da direita para a esquerda de fácil toque e consistente.

Todos os elementos da nova IU do Windows se encaixam na orientação da direita para a esquerda. Os botões e menus suspensos foram posicionados na borda esquerda da tela para não ficarem sobre os resultados da pesquisa nem reduzirem a otimização de toque. Eles podem ser acessados facilmente com os polegares.

Entrada de texto em qualquer direção.

O Windows oferece um teclado virtual limpo na tela, livre de distrações. Em idiomas bidirecionais, há uma chave de controle de direção de texto para que a direção de entrada de texto possa ser alternada, conforme necessário.

Use qualquer aplicativo em qualquer idioma.

Instale e use seus aplicativos favoritos em qualquer idioma. Os aplicativos aparecem e funcionam como fariam em versões não bidirecionais do Windows. Os elementos nos aplicativos sempre são colocados em uma posição consistente e previsível.

Parênteses são exibidos corretamente.

Com a introdução do BPA (Algoritmo de Parêntese Bidirecional), os parênteses emparelhados sempre são exibidos corretamente, independentemente das propriedades do idioma ou do alinhamento do texto.

Parênteses incorretos:

Parênteses corretos:

Nova fonte.

O Windows usa a nova fonte Segoe UI para todos os idiomas bidirecionais. Essa nova fonte foi totalmente adaptada à nova IU do Windows.

Estudo de caso 1: um aplicativo de música bidirecional

Visão geral

Os aplicativos multimídia são um desafio de design muito interessante, porque os controles de mídia geralmente têm um layout da esquerda para a direita semelhante ao dos idiomas não bidirecionais.

Estabelecendo a direcionalidade de interface do usuário

É importante reter o fluxo da interface do usuário da direita para a esquerda para que se tenha um design consistente em mercados bidirecionais. A adição de elementos que têm fluxo da esquerda para a direita nesse contexto é difícil, pois alguns elementos de navegação, como o botão voltar, podem contradizer a orientação direcional do botão voltar nos controles de áudio.

O Aplicativo Música da Microsoft retem a grade com orientação da direita para a esquerda. Isso dá ao aplicativo uma aparência bem natural para os usuários que já navegam nessa direção na nova IU do Windows. O fluxo é retido, garantindo que os principais elementos não sejam só ordenados da direita para a esquerda, mas também alinhados corretamente nos cabeçalhos de seção para manter o fluxo da interface do usuário.

Manipulação de texto

A biografia do artista na tela acima é alinhada à esquerda, enquanto as partes de texto relacionadas de outro artista, como nomes de álbuns e faixas, mantém o alinhamento à direita. O campo de biografia é um elemento de texto bastante grande que é mal lido quando está alinhado à direita simplesmente porque é difícil acompanhar as linhas durante a leitura de um bloco de texto maior. Em geral, qualquer elemento de texto com mais de duas ou três linhas que contenham cinco ou mais palavras pode ser considerado para exceções de alinhamento similar, em que o alinhamento do bloco de texto é oposto ao do layout geral da direção do aplicativo.

A manipulação de alinhamento no aplicativo pode parecer simples, mas muitas vezes expõe alguns dos limites inerentes aos mecanismos de renderização em termos de posicionamento de caracteres neutros em cadeias de caracteres bidirecionais. Por exemplo, a seguinte cadeia de caracteres pode ser exibida de forma diferente com base no alinhamento:

Para garantir que as informações do artista sejam exibidas corretamente através do aplicativo de música, a equipe de desenvolvimento separou as propriedades de layout de texto do alinhamento. Em outras palavras, as informações de artistas podem ser muitas vezes exibidas com alinhamento à direita, mas o ajuste do layout de cadeias de caracteres é definido com base no processamento personalizado em segundo plano. O processamento em segundo plano determina a melhor configuração do layout direcional, com base no conteúdo da cadeia de caracteres.

Exemplo: sem o processamento do layout personalizado da cadeia de caracteres, o nome do artista "The Contoso Band." seria exibido como ".The Contoso Band".

Pré-processamento da direção de cadeia de caracteres especializada

Quando o aplicativo sonda nossos servidores em busca de metadados de mídia, ele pré-processa cada cadeia de caracteres antes de exibi-la ao usuário. Durante o pré-processamento, o aplicativo também faz uma transformação para tornar a direção do texto consistente. Para fazer isso, ele verifica se há caracteres neutros nas extremidades da cadeia de caracteres. Além disso, se a direção do texto da cadeia de caracteres for oposta à direção do aplicativo definida nas configurações de idioma do Windows, ele acrescenta (e às vezes antecede) marcadores de direção Unicode. A função de transformação se parece com esta em 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;
}

Os caracteres Unicode adicionados são caracteres de largura igual a zero e, como resultado, não afetam o espaçamento das cadeias de caracteres. Este código carrega uma penalidade de desempenho em potencial, já que detectar a direção de uma cadeia de caracteres requer o exame da cadeia de caracteres até que um caractere não neutro seja encontrado. Cada caractere que é primeiro verificado para neutralidade é comparado com vários intervalos Unicode, por isso, não é uma verificação trivial.

Estudo de caso 2: um aplicativo de email bidirecional

Visão geral

Em termos de requisitos de layout de interface do usuário, um cliente de email é bastante simples de projetar. O aplicativo Microsoft Mail que vem com o Windows é espelhado por padrão. De uma perspectiva de manipulação de texto onde o aplicativo de email deve ter uma exibição de texto mais robusta e recursos de composição para acomodar cenários de texto misto.

Estabelecendo a direcionalidade de interface do usuário

O layout da interface do usuário para o aplicativo Microsoft Mail é espelhado. Os três painéis foram reorientados para que o painel de pastas seja posicionado na borda direita da tela, seguido pelo painel de lista de itens de email à esquerda e depois pelo painel de composição de email.

Itens adicionais foram reorientados para corresponder ao fluxo geral da interface do usuário e à otimização de toque. Isso inclui a barra de aplicativos e os ícones para redigir, responder e excluir.

Manipulação de texto

Interface do Usuário

O alinhamento de texto na interface do usuário geralmente é à direita. Isso inclui o painel de pastas e o painel de itens. O painel de itens é limitado a duas linhas de texto (Endereço e Título). Isso é importante para reter o alinhamento da direita para a esquerda, sem introduzir um bloco de texto cuja leitura seria difícil quando a direção do conteúdo fosse oposta ao fluxo de direção da interface do usuário

Edição de texto

A edição de texto requer a capacidade de redigir da direita para a esquerda e da esquerda para a direita. Além disso, o layout da composição deve ser preservado usando um formato adequado, como rich text, que tem a capacidade de salvar informações de direção.