Ajustar layout e fontes e fornecer suporte para RTL

  • Artigo

Projete seu aplicativo para oferecer suporte a layouts e fontes de vários idiomas, incluindo a direção de fluxo RTL (da direita para a esquerda). Direção de fluxo é a direção na qual o script é escrito e exibido, e os elementos da interface do usuário na página são verificados pelo olho.

Diretrizes de layout

Idiomas como alemão e finlandês normalmente usam mais caracteres do que o inglês. As fontes do Leste Asiático normalmente exigem mais altura. E idiomas como árabe e hebraico exigem que painéis de layout e elementos de texto sejam dispostos em ordem de leitura da direita para a esquerda (RTL).

Devido a essas variações nas métricas do texto traduzido, recomendamos que você não coloque posicionamento absoluto, larguras fixas ou alturas fixas na interface do usuário (UI). Em vez disso, aproveite os mecanismos de layout dinâmico incorporados aos elementos da interface do usuário do Windows. Por exemplo, controles de conteúdo (como botões), controles de itens (como modos de exibição de grade e modos de exibição de lista) e painéis de layout (como grades e painéis de pilha) redimensionam e refluem automaticamente por padrão para ajustar seu conteúdo. Pseudolocalize seu aplicativo para descobrir quaisquer casos de borda problemáticos em que seus elementos da interface do usuário não sejam dimensionados para conteúdo corretamente.

O layout dinâmico é a técnica recomendada, e você poderá usá-lo na maioria dos casos. Menos preferível, mas ainda melhor do que assar tamanhos em sua marcação de interface do usuário, é definir valores de layout como uma função da linguagem. Aqui está um exemplo de como você pode expor uma propriedade Width em seu aplicativo como um recurso que os localizadores podem definir adequadamente por idioma. Primeiro, no Arquivo de Recursos (.resw) do seu aplicativo, adicione um identificador de propriedade com o nome "TitleText.Width" (em vez de "TitleText", você pode usar qualquer nome que desejar). Em seguida, use um x:Uid para associar um ou mais elementos da interface do usuário a esse identificador de propriedade.

<TextBlock x:Uid="TitleText">

Para obter mais informações sobre arquivos de recursos (.resw), identificadores de propriedade e x:Uid, consulte Localizar cadeias de caracteres na interface do usuário e no manifesto do pacote do aplicativo.

Fontes

Use a classe de mapeamento de fontes LanguageFont para acesso programático à família de fontes, tamanho, espessura e estilo recomendados para um idioma específico. A classe LanguageFont fornece acesso às informações de fonte corretas para várias categorias de conteúdo, incluindo cabeçalhos de interface do usuário, notificações, corpo de texto e fontes de corpo de documento editáveis pelo usuário.

Espelhamento de imagens

Se seu aplicativo tiver imagens que devem ser espelhadas (ou seja, a mesma imagem pode ser invertida) para RTL, você poderá usar o FlowDirection.

<!-- en-US\localized.xaml -->
<Image ... FlowDirection="LeftToRight" />

<!-- ar-SA\localized.xaml -->
<Image ... FlowDirection="RightToLeft" />

Se seu aplicativo exigir uma imagem diferente para inverter a imagem corretamente, você poderá usar o sistema de gerenciamento de recursos com o LayoutDirection qualificador (consulte a seção LayoutDirection de Personalizar seus recursos para idioma, escala e outros qualificadores). O sistema escolhe uma imagem nomeada file.layoutdir-rtl.png quando a linguagem de tempo de execução do aplicativo (consulte Compreender linguagens de perfil de usuário e linguagens de manifesto de aplicativo) é definida como uma linguagem RTL. Essa abordagem pode ser necessária quando alguma parte da imagem é invertida, mas outra parte não é.

Manipulando idiomas da direita para a esquerda (RTL)

Quando seu aplicativo estiver localizado para idiomas da direita para a esquerda (RTL), use a propriedade FrameworkElement.FlowDirection e defina preenchimento e margens simétricos. Os painéis de layout, como Grade, são dimensionados e invertidos automaticamente com o valor de FlowDirection que você definiu.

Defina FlowDirection no painel de layout raiz (ou quadro) da sua Página ou na própria Página. Isso faz com que todos os controles contidos dentro herdem essa propriedade.

Importante

No entanto, o FlowDirection não é definido automaticamente com base no idioma de exibição selecionado pelo usuário nas configurações do Windows, nem muda dinamicamente em resposta ao idioma de exibição que o usuário alterna. Se o usuário alternar as configurações do Windows do inglês para o árabe, por exemplo, a propriedade FlowDirection não será alterada automaticamente da esquerda para a direita para a direita. Como desenvolvedor do aplicativo, você precisa definir FlowDirection apropriadamente para o idioma que está exibindo no momento.

A técnica programática é usar a propriedade da linguagem de exibição do usuário preferencial para definir a LayoutDirectionpropriedade FlowDirection (consulte o exemplo de código abaixo). A maioria dos controles incluídos no Windows já usa o FlowDirection . Se você estiver implementando um controle personalizado, ele deverá usar FlowDirection para fazer alterações de layout apropriadas para linguagens RTL e LTR.

this.languageTag = Windows.Globalization.ApplicationLanguages.Languages[0];

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

var flowDirectionSetting = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues["LayoutDirection"];
if (flowDirectionSetting == "LTR")
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.LeftToRight;
}
else
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.RightToLeft;
}

#include <winrt/Windows.ApplicationModel.Resources.Core.h>
#include <winrt/Windows.Globalization.h>
...

m_languageTag = Windows::Globalization::ApplicationLanguages::Languages().GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView().QualifierValues().Lookup(L"LayoutDirection");
if (flowDirectionSetting == L"LTR")
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::LeftToRight);
}
else
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::RightToLeft);
}

this->languageTag = Windows::Globalization::ApplicationLanguages::Languages->GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView()->QualifierValues->Lookup("LayoutDirection");
if (flowDirectionSetting == "LTR")
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::LeftToRight;
}
else
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::RightToLeft;
}

A técnica acima torna FlowDirection uma função da LayoutDirection propriedade do idioma de exibição do usuário preferido. Se, por qualquer motivo, você não quiser essa lógica, poderá expor uma propriedade FlowDirection em seu aplicativo como um recurso que os localizadores podem definir adequadamente para cada idioma para o qual traduzem.

Primeiro, no Arquivo de Recursos do seu aplicativo (.resw), adicione um identificador de propriedade com o nome "MainPage.FlowDirection" (em vez de "MainPage", você pode usar qualquer nome que desejar). Em seguida, use um x:Uid para associar o elemento Page principal (ou seu painel ou quadro de layout raiz) a esse identificador de propriedade.

<Page x:Uid="MainPage">

Em vez de uma única linha de código para todos os idiomas, isso depende do tradutor "traduzir" esse recurso de propriedade corretamente para cada idioma traduzido; Portanto, esteja ciente de que há essa oportunidade extra de erro humano quando você usa essa técnica.

APIs importantes