Ajustar el diseño y las fuentes y admitir la escritura RTL

  • Artículo

Diseñe la aplicación para admitir los diseños y fuentes de varios idiomas, incluida la dirección del flujo RTL (de derecha a izquierda). La dirección del flujo es la dirección en la que se escribe y muestra el script, y los elementos de la interfaz de usuario de la página se examinan mediante el ojo.

Directrices de diseño

Los idiomas como alemán y finlandés suelen usar más caracteres que el inglés. Normalmente, las fuentes del Este asiático requieren más altura. Además, los idiomas como árabe y hebreo requieren que los paneles de diseño y los elementos de texto estén dispuestos en orden de lectura de derecha a izquierda (RTL).

Debido a estas variaciones en las métricas del texto traducido, se recomienda no hornear posicionamiento absoluto, anchos fijos o alturas fijas en la interfaz de usuario (UI). En su lugar, aproveche los mecanismos de diseño dinámicos integrados en los elementos de la interfaz de usuario de Windows. Por ejemplo, los controles de contenido (como botones), los controles de elementos (como las vistas de cuadrícula y las vistas de lista) y los paneles de diseño (como cuadrículas y paneles de pila) cambian automáticamente el tamaño y el flujo de forma predeterminada para ajustarse a su contenido. Seudolocalización de la aplicación para descubrir los casos perimetrales problemáticos en los que los elementos de la interfaz de usuario no se ajustarán correctamente al contenido.

El diseño dinámico es la técnica recomendada y podrá usarla en la mayoría de los casos. Es menos preferible, pero aún mejor que hornear tamaños en el marcado de la interfaz de usuario, es establecer valores de diseño como una función del lenguaje. Este es un ejemplo de cómo puede exponer una propiedad Width en la aplicación como un recurso que los localizadores pueden establecer correctamente por idioma. En primer lugar, en el archivo de recursos de la aplicación (.resw), agregue un identificador de propiedad con el nombre "TitleText.Width" (en lugar de "TitleText", puedes usar cualquier nombre que quieras). A continuación, use un x:Uid para asociar uno o varios elementos de la interfaz de usuario con este identificador de propiedad.

<TextBlock x:Uid="TitleText">

Para obtener más información sobre los archivos de recursos (.resw), los identificadores de propiedad y x:Uid, consulta Localizar cadenas en el manifiesto del paquete de la aplicación y la interfaz de usuario.

Fuentes

Use la clase de asignación de fuentes LanguageFont para el acceso mediante programación a la familia de fuentes, el tamaño, el peso y el estilo recomendados para un idioma determinado. La clase LanguageFont proporciona acceso a la información de fuente correcta para varias categorías de contenido, incluidos los encabezados de la interfaz de usuario, las notificaciones, el texto del cuerpo y las fuentes del cuerpo del documento editables por el usuario.

Creación de reflejo de imágenes

Si la aplicación tiene imágenes que se deben reflejar (es decir, se puede voltear la misma imagen) para RTL, puede usar FlowDirection.

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

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

Si la aplicación requiere una imagen diferente para voltear la imagen correctamente, puede usar el sistema de administración de recursos con el LayoutDirection calificador (consulte la sección LayoutDirection de Adaptar los recursos para el idioma, la escala y otros calificadores). El sistema elige una imagen denominada file.layoutdir-rtl.png cuando el lenguaje en tiempo de ejecución de la aplicación (consulte Descripción de los idiomas de perfil de usuario y los lenguajes de manifiesto de la aplicación) está establecido en un idioma RTL. Este enfoque puede ser necesario cuando se voltea parte de la imagen, pero otra parte no.

Control de idiomas de derecha a izquierda (RTL)

Cuando la aplicación se localiza para los lenguajes de derecha a izquierda (RTL), usa la propiedad FrameworkElement.FlowDirection y establece el relleno y los márgenes simétricos. Paneles de diseño como la escala de cuadrícula y voltear automáticamente con el valor de FlowDirection que establezca.

Establezca FlowDirection en el panel de diseño raíz (o marco) de la página o en la propia página. Esto hace que todos los controles contenidos en hereden esa propiedad.

Importante

Sin embargo, FlowDirection no se establece automáticamente en función del idioma de presentación seleccionado por el usuario en la configuración de Windows; ni cambia dinámicamente en respuesta al idioma de visualización que cambia el usuario. Si el usuario cambia la configuración de Windows de inglés a árabe, por ejemplo, la propiedad FlowDirection no cambiará automáticamente de izquierda a derecha a izquierda. Como desarrollador de la aplicación, debe establecer FlowDirection correctamente para el idioma que se muestra actualmente.

La técnica mediante programación consiste en usar la LayoutDirection propiedad del idioma de visualización de usuario preferido para establecer la propiedad FlowDirection (vea el ejemplo de código siguiente). La mayoría de los controles incluidos en Windows ya usan FlowDirection . Si va a implementar un control personalizado, debe usar FlowDirection para realizar los cambios de diseño adecuados para los lenguajes RTL y 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;
}

La técnica anterior hace que FlowDirection sea una función de la LayoutDirection propiedad del idioma de visualización de usuario preferido. Si por cualquier motivo no desea esa lógica, puede exponer una propiedad FlowDirection en la aplicación como un recurso en el que los localizadores pueden establecerse correctamente para cada idioma en el que se traducen.

En primer lugar, en el archivo de recursos de la aplicación (.resw), agregue un identificador de propiedad con el nombre "MainPage.FlowDirection" (en lugar de "MainPage", puedes usar cualquier nombre que quieras). A continuación, use un x:Uid para asociar el elemento Page principal (o su panel de diseño raíz o marco) con este identificador de propiedad.

<Page x:Uid="MainPage">

En lugar de una sola línea de código para todos los idiomas, esto depende del traductor "traducir" este recurso de propiedad correctamente para cada idioma traducido; tenga en cuenta que hay esa oportunidad adicional para el error humano al usar esta técnica.

API importantes