Come modificare il layout e i tipi di carattere per varie lingue e supportare i layout RTL (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Segui queste semplici linee guida per supportare layout e tipi di carattere localizzati nelle app di Windows Store.
Tecnologie
Istruzioni
Linee guida sul layout
Alcune lingue, ad esempio il tedesco e il finlandese, richiedono più spazio dell'inglese per il testo.
Quando possibile, usa meccanismi di layout flessibili anziché il posizionamento assoluto e larghezze o altezze fisse. Per le app di Windows Store in JavaScript, usa meccanismi di layout CSS, ad esempio -ms-grid e –ms-box. Usa la spaziatura interna e i margini simmetrici per consentire la localizzazione per varie direzioni di layout.
L'app può anche utilizzare il selettore di pseudoclasse :-ms-lang() per adattare le proprietà dei fogli di stile CSS, ad esempio la larghezza di determinati elementi in base alla lingua dell'app. Per abilitare questa funzione, l'host delle app imposta l'attributo lang dell'elemento radice sulla lingua dell'app.
.item:-ms-lang(de, fi) { width: 350px; }
Per alcune lingue, come l'arabo e l'ebraico, è necessario che l'ordine di lettura per il layout del testo e il layout dell'app sia da destra a sinistra.
Per le app di Windows Store in JavaScript che usano i fogli di stile ui-light.css o ui-dark.css, la direzione di layout del corpo è impostata automaticamente, in base alla lingua dell'app. Poiché il codice CSS seguente è contenuto in ui-light e ui-dark.css, non lo devi scrivere.
body:-ms-lang(ar,he…) { direction: rtl;}
Questo significa che la maggior parte dei layout delle app è impostata correttamente quando il sistema usa una lingua da destra a sinistra.
Insieme ai controlli WinJS.UI, la tua app può usare il selettore di pseudoclasse :-ms-lang() per modificare le proprietà fisiche di CSS, come margin e padding. Non devi modificare proprietà logiche di CSS che usano parole chiave come after e before..
Non usare la proprietà o l'attributo align in HTML. Usa invece la proprietà direction per controllare l'allineamento di specifici componenti.
Usa la proprietà writing-mode per supportare layout di testo verticale in CSS.
Immagini speculari
Se le immagini della tua app devono essere speculari per il layout RTL, puoi usare le trasformazioni CSS per specificare questa impostazione in fase di rendering aggiungendo una classe .mirrorable agli elementi e aggiungendo la classe CSS seguente:
.mirrorable { transform: scaleX(-1); }
Se la tua app richiede un'immagine diversa per capovolgere l'immagine correttamente, puoi usare il Sistema gestione risorse con il qualificatore layoutdir. Il sistema sceglie un'immagine denominata file.layoutdir-rtl.png quando la lingua dell'applicazione è impostata su una lingua RTL. Questo approccio può essere necessario quando una parte dell'immagine è capovolta e un'altra no.
Tipi di carattere
Per le app di Windows Store in JavaScript che usano i fogli di stile ui-light.css o ui-dark.css, il carattere viene impostato automaticamente sul tipo più appropriato in base alla lingua dell'app. L'host delle app imposta l'attributo lang dell'elemento radice sulla lingua dell'app.
Per le app che visualizzano più lingue in un'unica pagina, è necessario impostare l'attributo lang per la sezione in ogni lingua. Il selettore di pseudoclasse :-ms-lang() seleziona il tipo di carattere corretto per ogni sezione della pagina.
Usa le API di mappatura dei caratteri LanguageFont per l'accesso programmatico alle impostazioni consigliate di famiglia, dimensioni, spessore e stili dei caratteri per una particolare lingua. L'oggetto LanguageFont fornisce l'accesso alle informazioni corrette sul tipo di carattere per varie categorie di contenuto, ad esempio per le intestazioni dell'interfaccia utente, il corpo e i caratteri del corpo del documento modificabili dall'utente.