Modificare layout e tipi di carattere e supportare RTL

  • Articolo

Progettare l'app per supportare i layout e i tipi di carattere di più lingue, tra cui la direzione del flusso RTL (da destra a sinistra). La direzione del flusso è la direzione in cui lo script è scritto e visualizzato e gli elementi dell'interfaccia utente della pagina vengono analizzati dall'occhio del lettore.

Linee guida per il layout

Le lingue come il tedesco e il finlandese usano in genere più caratteri rispetto all'inglese. I tipi di carattere dell'Asia orientale richiedono in genere un'altezza maggiore. E le lingue come l'arabo e l'ebraico richiedono che i pannelli di layout e gli elementi di testo siano disposti in ordine di lettura da destra a sinistra (RTL).

A causa di queste variazioni nelle metriche del testo tradotto, è consigliabile non inserire posizionamento assoluto, larghezze fisse o altezze fisse nell'interfaccia utente (UI). Sfruttare invece i meccanismi di layout dinamico integrati negli elementi dell'interfaccia utente di Windows. Ad esempio, i controlli del contenuto (come i pulsanti), i controlli di elementi (come le visualizzazioni griglia e le visualizzazioni elenco) e i pannelli di layout (come griglie e StackPanel) si ridimensionano e ridispongono automaticamente per impostazione predefinita per adattarsi al contenuto. Pseudo-localizzare l'app per individuare eventuali casi limite problematici in cui gli elementi dell'interfaccia utente non vengono ridimensionati correttamente per il contenuto.

Il layout dinamico è la tecnica consigliata e sarà possibile usarla nella maggior parte dei casi. Meno preferibile, ma comunque migliore rispetto all'inserimento delle dimensioni nel markup dell'interfaccia utente, è impostare i valori del layout in funzione della lingua. Ecco un esempio di come esporre una proprietà Width nell'app come risorsa che i localizzatori possono impostare in modo appropriato per ogni lingua. In primo luogo, nel file di risorse dell'app (.resw), aggiungere un identificatore di proprietà con il nome "TitleText.Width" (invece di "TitleText", è possibile usare qualsiasi nome desiderato). Usare quindi x:Uid per associare uno o più elementi dell'interfaccia utente a questo identificatore di proprietà.

<TextBlock x:Uid="TitleText">

Per altre informazioni sui file di risorse (.resw), identificatori di proprietà e x:Uid, vedere Localizzare le stringhe nell'interfaccia utente e nel manifesto del pacchetto dell'app.

Tipi di carattere

Usare la classe di mapping dei tipi di carattere LanguageFont per l'accesso a livello di codice alla famiglia di caratteri, alle dimensioni, allo spessore e allo stile consigliati per una determinata lingua. La classe LanguageFont consente di accedere alle informazioni corrette sul tipo di carattere per varie categorie di contenuto, tra cui notifiche, testo del corpo, tipi di carattere modificabili dall'utente e intestazioni dell'interfaccia utente.

Immagini di mirroring

Se l'app include immagini a cui deve essere eseguito il mirroring (ovvero la stessa immagine può essere capovolta) per RTL, è possibile usare FlowDirection.

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

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

Se l'app richiede un'immagine diversa per capovolgere correttamente l'immagine, è possibile usare il sistema di gestione delle risorse con il qualificatore LayoutDirection (vedere la sezione LayoutDirection Personalizzare le risorse per lingua, scalabilità e altri qualificatori). Il sistema sceglie un'immagine denominata file.layoutdir-rtl.png quando la lingua di runtime dell'app (vedere Informazioni sulle lingue del profilo utente e sulle lingue del manifesto dell'app) è impostata su una lingua RTL. Questo approccio può essere necessario quando alcune parti dell'immagine vengono capovolte, ma un'altra parte non lo è.

Gestione dei linguaggi da destra a sinistra (RTL)

Quando l'app viene localizzata per le lingue da destra a sinistra (RTL), usare la proprietà FrameworkElement.FlowDirection e impostare spaziatura interna e margini simmetrici. Pannelli di layout, come Griglia ridimensionati e capovolti automaticamente con il valore FlowDirection impostato.

Impostare FlowDirection nel pannello di layout radice (o frame) della pagina o nella pagina stessa. In questo modo tutti i controlli contenuti all'interno ereditano tale proprietà.

Importante

Tuttavia, FlowDirectionnon viene impostato automaticamente in base alla lingua di visualizzazione selezionata dall'utente nelle impostazioni di Windows, né cambia in modo dinamico in risposta alla lingua di visualizzazione dell'utente. Se l'utente passa le impostazioni di Windows dall'inglese all'arabo, ad esempio, la proprietà FlowDirectionnon cambierà automaticamente da sinistra a destra a destra a sinistra. Gli sviluppatori di app devono impostare la FlowDirection in modo appropriato per il linguaggio attualmente visualizzato.

La tecnica a livello di codice consiste nell'usare la proprietà LayoutDirection della lingua di visualizzazione utente preferita per impostare la proprietà FlowDirection (vedere l'esempio di codice riportato di seguito). La maggior parte dei controlli inclusi in Windows usa già FlowDirection. Se si implementa un controllo personalizzato, è consigliabile usare FlowDirection per apportare modifiche di layout appropriate per i linguaggi 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;
}

La tecnica precedente rende FlowDirection una funzione della proprietà LayoutDirection della lingua di visualizzazione utente preferita. Se per qualsiasi motivo non si vuole usare questa logica, è possibile esporre una proprietà FlowDirection nell'app come risorsa che i localizzatori possono impostare in modo appropriato per ogni lingua in cui si traduce.

In primo luogo, nel file di risorse dell'app (.resw), aggiungere un identificatore di proprietà con il nome "MainPage.FlowDirection" (invece di "MainPage", è possibile usare qualsiasi nome desiderato). Usare quindi x:Uid per associare l'elemento Page principale (o il relativo pannello o frame di layout radice) a questo identificatore di proprietà.

<Page x:Uid="MainPage">

Anziché una singola riga di codice per tutte le lingue, ciò dipende dal fatto che il traduttore "traduca" correttamente questa risorsa di proprietà per ciascuna lingua tradotta; quindi considerare che esiste un'ulteriore possibilità di errore umano quando si usa questa tecnica.

API importanti