Come supportare un'interfaccia utente con testo bidirezionale (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 ]

Progetta le app in modo da fornire supporto per il testo bidirezionale (BiDi) per i sistemi di scrittura da destra a sinistra.

Introduzione

Microsoft vanta una lunga tradizione nella produzione di software per il Medio Oriente e altre aree geografiche in cui si usa il sistema di scrittura da destra a sinistra. I requisiti di progettazione per queste parti del mondo sono univoci, perché i sistemi di scrittura di uso comune richiedono il supporto di testo bidirezionale (BiDi), ovvero la possibilità di immettere e visualizzare il layout del testo nell'ordine da destra a sinistra (RTL) oppure da sinistra a destra (LTR). Windows 3.1 è stata la prima versione di Windows a incorporare il supporto per le lingue BiDi. In Windows 98 l'orientamento dell'interfaccia utente è stato reso speculare allo scopo di rendere più naturale l'esperienza offerta agli utenti di lingua ebraica o araba.

Windows 8 offre un'esperienza BiDi senza compromessi. Ogni elemento nella nuova interfaccia utente di Windows è stato progettato per inserirsi in modo ottimale nell'esperienza utente da destra a sinistra, che esalta le caratteristiche migliori di queste lingue nel loro stato più naturale.

A partire da Windows 8 sono incluse nove lingue BiDi in tutto:

• Due lingue con localizzazione completa (arabo ed ebraico).
• Sette Language Interface Pack per i mercati emergenti, ovvero per le lingue persiano, urdu, dari, curdo centrale, sindhi, punjabi (Pakistan) e uiguro. Due di queste lingue sono una novità esclusiva di Windows 8.

Progettazione di app di Windows Store per i mercati BiDi

Ecco la filosofia di progettazione BiDi di Windows, con alcuni case study in cui sono illustrate le relative considerazioni.

Elementi di progettazione BiDi

In Windows le decisioni di progettazione BiDi sono influenzate da quattro elementi:

• Disposizione speculare dell'interfaccia utente. L'interfaccia utente è orientata in modo da consentire la presentazione dei contenuti da destra a sinistra nel layout nativo. La progettazione dell'interfaccia utente sembra locale nei mercati BiDi.
• Coerenza dell'esperienza utente. La progettazione sembra naturale nell'orientamento da destra a sinistra. Tutti gli elementi dell'interfaccia utente hanno una direzione di coerente e l'aspetto previsto dall'utente.
• Ottimizzazione del tocco. Analogamente all'esperienza utente in termini di tocco nell'interfaccia utente non speculare, gli elementi sono facili da raggiungere e si adattano naturalmente all'interazione tramite tocco.
• Supporto del testo misto. Il supporto della direzionalità del testo consente una presentazione ottimale del testo misto, ad esempio testo in inglese in applicazioni BiDi e viceversa.

Panoramica della progettazione di funzionalità

La piattaforma Windows supporta i quattro elementi di progettazione BiDi elencati in precedenza. Ora esamineremo alcune delle funzionalità più rilevanti in Windows e forniremo un contesto in cui tali funzionalità influiscono sulla tua app.

Navigazione in una direzione percepita come naturale.

Abbiamo modificato la direzione della griglia, in modo che risulti orientata da destra a sinistra. Questo significa che il primo riquadro della griglia si trova nell'angolo superiore destro e l'ultimo nell'angolo inferiore sinistro. Le informazioni vengono così presentate in uno schema già familiare agli utenti, tipico di pubblicazioni stampate come i libri e le riviste, in cui il criterio di lettura inizia dall'angolo superiore destro e procede verso sinistra.

Per preservare la coerenza del flusso dell'interfaccia utente, i riquadri presenti nella griglia mantengono sempre un layout da destra a sinistra. In altre parole, il logo e il nome dell'app sono posizionati nell'angolo inferiore destro del riquadro indipendentemente dalla lingua dell'interfaccia utente dell'app.

Riquadro in lingua BiDi:

Riquadro in inglese:

Lettura corretta delle notifiche di tipo riquadro.

Per i riquadri è disponibile un supporto del testo per le diverse lingue. L'area di notifica è dotata di flessibilità incorporata per la regolazione dell'allineamento del testo in base alla lingua della notifica. Quando un'app invia notifiche in arabo, ebraico o in un'altra lingua BiDi, il testo viene allineato a destra. Quando arriva una notifica in inglese, o in un'altra lingua LTR, il testo viene allineato a sinistra.

Un'esperienza utente RTL coerente, che facilita il tocco.

Ogni elemento nell'interfaccia utente di Windows si adatta all'orientamento da destra a sinistra. I pulsanti di accesso rapido e i riquadri a comparsa sono stati posizionati sul lato sinistro dello schermo, in modo da non sovrapporsi ai risultati delle ricerche o penalizzare l'ottimizzazione del tocco. Sono facilmente raggiungibili con i pollici.

Immissione del testo in qualunque direzione.

Windows offre una tastiera virtuale su schermo con visualizzazione chiara e ordinata. Per le lingue BiDi è disponibile un tasto di controllo della direzione del testo che consente di invertire la direzione di immissione come necessario.

Uso di qualsiasi app in qualsiasi lingua.

Puoi installare e utilizzare le tue app preferite in qualsiasi lingua. Le app presentano lo stesso aspetto e lo stesso funzionamento che avrebbero nelle versioni non BIDi di Windows. Gli elementi usati dalle app sono sempre collocati in una posizione coerente e prevedibile.

Visualizzazione corretta delle parentesi.

Con l'introduzione dell'algoritmo BPA (BiDi Parenthesis Algorithm), le coppie di parentesi vengono sempre visualizzate correttamente indipendentemente dalle proprietà di allineamento del testo o della lingua.

Parentesi non corrette:

Parentesi corrette:

Nuovo tipo di carattere.

Windows utilizza il nuovo tipo di carattere dell'interfaccia utente Segoe per tutte le lingue BiDi. Questo nuovo tipo di carattere ha una forma e dimensioni adatte alla nuova interfaccia utente di Windows.

Case study 1: app musicale BiDi

Panoramica

Le applicazioni multimediali presentano problematiche di progettazione molto interessanti, perché i controlli multimediali hanno in genere un layout da sinistra a destra, simile a quello delle lingue non BiDi.

Determinazione della direzionalità dell'interfaccia utente

Il mantenimento del flusso dell'interfaccia utente da destra e sinistra è un elemento chiave per la coerenza della progettazione nei mercati delle lingue BiDi. L'introduzione di elementi con flusso da sinistra a destra in questo contesto è difficile, in quanto alcuni elementi per la navigazione come il pulsante Indietro possono essere incompatibili con l'orientamento direzionale di tale pulsante nei controlli audio.

L'app musicale Microsoft mantiene una griglia orientata da destra a sinistra, Ciò offre all'applicazione un aspetto molto naturale per gli utenti che già utilizzano questa direzione nella nuova interfaccia utente di Windows. Per mantenere il flusso è necessario fare in modo gli elementi non solo siano ordinati da destra a sinistra, ma anche che siano allineati correttamente nelle intestazioni di sezione.

Gestione del testo

Nella schermata precedente la biografia dell'artista è allineata a sinistra, mentre gli altri elementi di testo correlati all'artista, come il titolo dell'album e i titoli dei brani, mantengono l'allineamento a destra. Il campo della biografia è un elemento di testo piuttosto ampio, che con l'allineamento a destra risulta scarsamente leggibile semplicemente perché non è facile seguire le righe quando si legge un blocco di testo molto esteso. In genere, qualsiasi elemento di testo con più di due o tre righe contenenti cinque o più parole può essere soggetto a eccezioni di allineamento simili, in cui l'allineamento del blocco di testo è opposto a quello del layout complessivo direzionale dell'app.

La modifica dell'allineamento all'interno dell'app può sembrare semplice, ma spesso rivela alcuni dei vincoli e dei limiti imposti dai diversi motori di rendering in termini di posizionamento dei caratteri neutri tra le stringhe BiDi. Ad esempio, l'aspetto della stringa seguente può variare a seconda dell'allineamento:

	Stringa in inglese (LTR)	Stringa in ebraico (RTL)
Allineamento a sinistra	Hello World!	בוקר טוב!
Allineamento a destra	!Hello World	!בוקר טוב

 

Per assicurare la corretta visualizzazione delle informazioni sull'artista all'interno dell'app musicale, il team di sviluppo ha separato le proprietà di layout del testo dall'allineamento. In altre parole, le informazioni sull'artista potrebbero essere visualizzate con un allineamento a destra nella maggior parte dei casi, ma la regolazione del layout della stringa è impostata su un valore personalizzato di elaborazione in background che determina l'impostazione di layout direzionale più adatta al contenuto della stringa.

Esempio: senza l'elaborazione del layout della stringa, il nome dell'artista "The Contoso Band." verrebbe visualizzato come ".The Contoso Band".

Preelaborazione specializzata della direzione delle stringhe

Quando l'app esegue il polling dei metadati multimediali dei server, preelabora ogni stringa prima di visualizzarla all'utente. Durante la preelaborazione l'app effettua anche una trasformazione per rendere coerente la direzione del testo. A questo scopo, verifica l'eventuale presenza di caratteri neutri alle estremità della stringa. Inoltre, se la direzione del testo della stringa è opposta a quella dell'app definita nelle impostazioni della lingua di Windows, accoda (e talvolta antepone) indicatori di direzione Unicode. In JavaScript la funzione di trasformazione è simile alla seguente:

function normalizeTextDirection(data) {
    if (data) {
        var lastCharacterDirection = DetectCharacterDirection(data[data.length - 1]);

        // If the last character has strong directionality (direction is not null), then the text direction for the string is already consistent.
        if (!lastCharacterDirection) {
            // If the last character has no directionality (neutral character, direction is null), then we may need to add a direction marker to
            // ensure that the last character doesn't inherit directionality from the outside context.
            var appTextDirection = GetAppTextDirection(); // checks the <html> element's "dir" attribute.
            var dataTextDirection = DetectStringDirection(data); // Run through the string until a non-neutral character is encountered,
                                                                 // which determines the text direction.

            if (appTextDirection !== dataTextDirection) {
                // Add a direction marker only if the data text runs opposite to the directionality of the app as a whole,
                // which would cause the neutral characters at the ends to flip.
                var directionMarkerCharacter =
                    dataTextDirection === TextDirections.RightToLeft ?
                        UnicodeDirectionMarkers.RightToLeftDirectionMarker : // "\u200F"
                        UnicodeDirectionMarkers.LeftToRightDirectionMarker; // "\u200E"

                data += directionMarkerCharacter;

                // Prepend the direction marker if the data text begins with a neutral character.
                var firstCharacterDirection = DetectCharacterDirection(data[0]);
                if (!firstCharacterDirection) {
                    data = directionMarkerCharacter + data;
                }
            }
        }
    }

    return data;
}

I caratteri Unicode aggiunti sono di larghezza zero e, di conseguenza, non influenzano la spaziatura delle stringhe. Il codice determina potenzialmente un calo di prestazioni, perché per rilevare la direzione di una stringa è necessario esaminarla finché non si incontra un carattere non neutro. Per verificare la neutralità dei singoli caratteri è prima necessario confrontarli con vari intervalli Unicode, pertanto il controllo non è affatto banale.

Case study 2: app di posta BiDi

Panoramica

Per quanto riguarda i requisiti di layout dell'interfaccia utente, la progettazione di un client di posta elettronica è piuttosto semplice. L'app di posta elettronica Microsoft fornita con Windows ha un layout speculare per impostazione predefinita. Per quanto riguarda la gestione del testo, l'app di posta elettronica deve includere funzionalità di scrittura e visualizzazione del testo più avanzate, per supportare gli scenari con testo misto.

Determinazione della direzionalità dell'interfaccia utente

L'interfaccia utente dell'app di posta elettronica Microsoft ha un layout speculare. I tre riquadri sono stati riorientati in modo da posizionare il riquadro delle cartelle sul lato destro dello schermo, seguito dal riquadro dell'elenco degli elementi di posta a sinistra e dal riquadro per la composizione dei messaggi email.

Altri elementi sono stati riorientati in modo da corrispondere al flusso complessivo dell'interfaccia utente e all'ottimizzazione del tocco. Tali elementi includono la barra dell'app e le icone per comporre, rispondere ed eliminare messaggi.

Gestione del testo

interfaccia utente

Nell'interfaccia utente il testo è solitamente allineato a destra, anche per quanto riguarda il riquadro delle cartelle e il riquadro degli elementi. Il riquadro degli elementi contiene al massimo due righe di testo (indirizzo e titolo). Questo aspetto è importante per mantenere l'allineamento da destra a sinistra senza introdurre un blocco di testo che sarebbe difficile da leggere quando la direzione del contenuto è opposta al flusso di direzione dell'interfaccia utente.

Modifica del testo

I requisiti per la modifica del testo includono la funzionalità di composizione sia da destra a sinistra che da sinistra a destra. Inoltre, deve essere preservato il layout di composizione mediante un formato corretto, ad esempio RTF, che consenta di salvare le informazioni sulla direzione.