Compartilhar via

Ajustar layout e fontes e fornecer suporte para RTL

  • Artigo

Projete seu aplicativo para compatibilidade com layouts e fontes de vários idiomas, incluindo a direção de fluxo RTL (da direita para a esquerda). A direção do 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 a olho nu.

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 geralmente exigem mais altura. E idiomas como árabe e hebraico exigem que os painéis de layout e os 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 incorpore posicionamento absoluto, larguras fixas ou alturas fixas em sua interface do usuário (IU). Em vez disso, aproveite os mecanismos de layout dinâmico que são incorporados aos elementos da interface do usuário do Windows. Por exemplo, controles de conteúdo (como botões), controles de itens (como exibições de grade e exibições de lista) e painéis de layout (como grades e painéis de pilha) são redimensionados e refluídos automaticamente por padrão para ajustar seu conteúdo. Pseudolocalize seu aplicativo para descobrir quaisquer casos extremos problemáticos em que os elementos da interface do usuário não sejam dimensionados para o conteúdo corretamente.

O layout dinâmico é a técnica recomendada e você poderá usá-la na maioria dos casos. Menos preferível, mas ainda melhor do que incorporar tamanhos em sua marcação de interface do usuário, é definir valores de layout em função do idioma. 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 do seu aplicativo (.resw), 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 de 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 obter acesso programático à família de fontes, tamanho, peso 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 o aplicativo tiver imagens que devem ser espelhadas (ou seja, a mesma imagem pode ser invertida) para RTL, você poderá usar FlowDirection.

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

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

Se o 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 o idioma de tempo de execução do aplicativo (consulte Entender os idiomas do perfil do usuário e os idiomas de manifesto do aplicativo) é definido como um idioma 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 RTL (da direita para a esquerda), use a propriedade FrameworkElement.FlowDirection e defina preenchimento e margens simétricos. 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 herdem essa propriedade.

Importante

No entanto, 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 de alternância do usuário. Se o usuário alternar as configurações do Windows de inglês para á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 adequadamente para o idioma que está exibindo no momento.

A técnica programática é usar a LayoutDirection propriedade da linguagem de exibição do usuário preferencial para definir a propriedade FlowDirection (consulte o exemplo de código abaixo). A maioria dos controles incluídos no Windows já usa 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 preferencial. 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 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 seu elemento Page principal (ou seu painel de layout raiz ou quadro) 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á uma oportunidade extra para erro humano ao usar essa técnica.

APIs importantes