Projetar seu aplicativo para texto bidirecional

Projete seu app para dar suporte a texto bidirecional (BiDi) para que você possa combinar scripts dos sistemas de escrita da direita para a esquerda (RTL) e da esquerda para a direita (LTR), que geralmente contêm diferentes tipos de alfabeto.

Os sistemas de escrita da direita para a esquerda, como os usados no Oriente Médio, na Ásia Central e do Sul e na África, possuem requisitos de design exclusivos. Esses sistemas de escrita exigem suporte a texto bidirecional (BiDi). O suporte bidirecional é a capacidade de inserir e exibir o layout do texto na ordem da direita para a esquerda (RTL) ou da esquerda para a direita (LTR).

Um total de nove idiomas bidirecionais são incluídos com o Windows.

• Dois idiomas totalmente traduzidos. Árabe e hebraico.
• Sete Language Interface Packs para mercados emergentes. Persa, urdu, dari, curdo central, sindhi, panjabi (Paquistão) e uigur.

Este tópico contém a filosofia do design bidirecional do Windows e estudos de caso que mostram considerações do design bidirecional.

Elementos de design bidirecional

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

• Espelhamento da 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 em experiência do usuário. O design parece natural na orientação da direita 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

O Windows oferece suporte aos quatro elementos de design bidirecional. Vamos examinar alguns dos principais recursos relevantes do Windows (versões anteriores do) e fornecer algum contexto sobre como eles afetam seu aplicativo.

Navegue na direção em que se sente natural

Windows ajusta a direção da grade tipográfica para que ela flua 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. Isso corresponde ao padrão RTL 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, o conteúdo nos blocos retêm um layout da direita para a esquerda, o que significa que o nome e o logotipo do app são posicionados no canto direito inferior do bloco, independentemente do idioma da interface do usuário do app.

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 app envia árabe, hebraico ou outras notificações de idioma bidirecional, o texto é alinhado à direita. E quando chega uma notificação em inglês (ou outro da esquerda para a direita) chega de notificação, ele é alinhado à esquerda.

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

Todos os elementos da interface do usuário 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 app 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 Algoritmo de Parêntese Bidirecional (BPA), 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

Tipografia

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

Estudo de caso 1: um app 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.

Este app de música retém a grade com orientação da direita para a esquerda. Isso dá ao app uma aparência bem natural para os usuários que já navegam nessa direção na 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 captura de 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 app 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.

	Cadeia de caracteres em inglês da esquerda para a direita (LTR)	Cadeia de caracteres em hebraico da direita para a esquerda (RTL)
Alinhamento à esquerda	Hello, World!	בוקר טוב!
Alinhamento à direita	!Olá, Mundo	!בוקר טוב

Para garantir que as informações do artista sejam exibidas corretamente através do app 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.

Por exemplo, sem o processamento de layout de cadeia de caracteres personalizado, o nome do artista "A Banda contoso" apareceria como ". A Banda Contoso".

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

Quando o app contata o servidor 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 app 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 app 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.

string NormalizeTextDirection(string data) 
{
    if (data.Length > 0) {
        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 de largura igual a zero para que não afetem 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 app de Email no Windows é espelhado por padrão. De uma perspectiva de manipulação de texto onde o app 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 app de Email é 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 é 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 de composição deve ser preservado usando um formato, como rich text, que tem a capacidade de salvar informações direcionais.