CSS Logico: Costruire Layout Multi-Direzionali

Lo sviluppo di web application o siti web destinati a mercati internazionali implica un processo noto come "localizzazione", che va oltre la semplice traduzione del contenuto testuale. La localizzazione richiede un'attenta considerazione di vari aspetti culturali, sociali e linguistici che possono influenzare l'usabilità e l'accoglienza del prodotto in diversi mercati. Ecco un approfondimento di questi aspetti:

• Usi e Costumi: ogni cultura ha le sue norme e valori, che si riflettono anche nel comportamento online degli utenti. Ad esempio, la disposizione degli elementi di navigazione può seguire convenzioni diverse, così come la maniera di presentare informazioni o la realizzazione di call-to-action. È essenziale comprendere questi usi e costumi per creare un'esperienza utente che risuoni con il pubblico locale.
• Significato dei Colori Usati: i colori possono avere significati molto diversi a seconda del contesto culturale. Mentre il bianco può essere associato alla purezza in alcune culture, in altre può essere un colore di lutto. La scelta della palette di colori deve quindi essere frutto di un'analisi culturale per evitare malintesi e per assicurarsi che i colori scelti comunichino il messaggio desiderato.
• Soggetti delle Immagini: le immagini usate su un sito web devono essere pertinenti e rispettose delle sensibilità culturali del pubblico di destinazione. Immagini che sono accettabili o addirittura banali in una cultura possono essere offensive o tabù in un'altra. È importante scegliere immagini che siano inclusive e che rispecchino la diversità del pubblico di riferimento.
• Lingua e Orientamento di Scrittura: Oltre alla traduzione accurata del contenuto, è fondamentale considerare l'orientamento della scrittura, che varia a seconda della lingua. Ad esempio, l'arabo e l'ebraico si leggono da destra a sinistra, mentre lingue come l'inglese e lo spagnolo da sinistra a destra. Questo influisce non solo sul testo, ma anche sull'interfaccia utente, sui layout e sul design complessivo. L'uso di proprietà logiche CSS, può facilitare la creazione di layout che si adattano automaticamente all'orientamento della scrittura del mercato target.

Parliamo di internazionalizzazione

L'internazionalizzazione, spesso abbreviata come i18n, è un processo complesso che va ben oltre la semplice traduzione dei contenuti di un sito web o di un'applicazione. È un'attività di progettazione che si prefigge di rendere un prodotto facilmente adattabile a diverse lingue e regioni senza dover apportare modifiche tecniche. Un'efficace strategia di internazionalizzazione considera aspetti come il layout dei contenuti, la gestione dei dati e l'interfaccia utente per assicurare che il prodotto sia localizzabile per diversi mercati.

Orientamento della Scrittura

L'orientamento della scrittura è uno degli aspetti più critici dell'i18n. Mentre molte lingue sono scritte e lette da sinistra verso destra, ci sono notevoli eccezioni:

• Da Destra verso Sinistra: Lingue come l'arabo, l'ebraico, il persiano e l'urdu utilizzano un sistema di scrittura che fluisce da destra verso sinistra. Questo influisce non solo sul testo, ma anche sull'intero layout di un sito web o di un'applicazione, richiedendo ad esempio che i menu di navigazione e gli elementi interattivi siano posizionati in modo coerente con la direzione di lettura.
• Dall'Alto verso il Basso: Lingue come il mongolo tradizionalmente si scrivono dall'alto verso il basso e possono essere organizzate sia da destra verso sinistra sia orizzontalmente. Anche il cinese classico segue questo schema, e certi dialetti giapponesi e coreani possono usare sia la scrittura verticale sia quella orizzontale. La presentazione verticale del testo può richiedere una rielaborazione completa del design, soprattutto per quanto riguarda la disposizione degli elementi grafici e la navigazione.

Considerazioni Tecniche

Per gestire queste variazioni, le tecniche di internazionalizzazione devono includere:

• Supporto per Caratteri e Font: Deve essere garantito che i caratteri utilizzati supportino tutti i glifi necessari per le lingue target. Questo può significare l'inclusione di font specializzati o l'uso di tecnologie come Web Open Font Format (WOFF).
• Layout Flessibili: I layout devono essere progettati per essere flessibili e adattarsi all'orientamento del testo. L'uso di CSS Grid e Flexbox può aiutare, così come l'adozione di unità di misura relative anziché assolute.
• Direzione del Testo: Le proprietà CSS come direction e attributi HTML come dir possono essere usati per modificare la direzione del testo. Proprietà logiche CSS, come margin-inline-start e margin-inline-end, sostituiscono le proprietà fisiche come margin-left e margin-right per adattarsi automaticamente all'orientamento della lingua.
• Impaginazione e Scripting: Si deve assicurare che la paginazione e gli script lato client gestiscano correttamente la direzione del testo e la disposizione degli elementi.

L'internazionalizzazione è, quindi, un processo che richiede una profonda comprensione delle peculiarità linguistiche e culturali dei mercati di destinazione e una progettazione tecnica attentamente pianificata per creare prodotti veramente globali.

La gestione della direzionalità del testo in un'applicazione web che deve supportare sia la lettura da sinistra a destra (LTR) che da destra a sinistra (RTL) può essere affrontata in diversi modi. Ogni metodo ha i propri vantaggi e può essere scelto in base alle esigenze specifiche del progetto. Li vediamo qui di seguito.

Sovrascrittura del CSS Base LTR con un Foglio di stile RTL

In questo approccio, si inizia con la creazione di un foglio di stile base che assume un orientamento LTR. Successivamente, si crea un secondo foglio di stile che sovrascrive le proprietà necessarie per adattarsi a un contesto RTL. Questo metodo è relativamente semplice e diretto, ma può portare a duplicazione di codice e richiede la manutenzione di due distinti fogli di stile.

Vantaggi:

• Separazione chiara tra stili LTR e RTL.
• Facilità di disabilitazione dello stile RTL se non necessario.

Svantaggi:

• Possibile duplicazione di codice.
• Maggiore sforzo nella manutenzione di due fogli di stile.

Uso di una classe .is-rtl o dell’attributo dir="rtl"

Un altro metodo comporta l'uso di una classe .is-rtl o l'attributo dir="rtl" nell'elemento <html>, che permette di sovrascrivere le regole CSS specifiche per il contesto RTL. In questo caso, i selettori CSS vengono scritti tenendo conto della classe o dell'attributo, aumentando così la specificità dei selettori stessi.

Vantaggi:

• Non richiede un secondo foglio di stile; tutte le regole sono in un unico posto.
• La specificità aumentata previene conflitti e sovrascritture accidentali.

Svantaggi:

• Aumenta la complessità dei selettori.
• Potrebbe rendere il CSS più difficile da leggere e mantenere.

Uso delle proprietà logiche CSS

Il terzo metodo è l'uso delle proprietà logiche CSS, che permettono di definire gli stili in modo che si adattino automaticamente alla direzione del testo. Questo è l'approccio più moderno e può ridurre significativamente la complessità del codice.

Vantaggi:

• Le regole CSS si adattano automaticamente alla direzione del testo, eliminando la necessità di sovrascritture.
• Riduce il carico di manutenzione e la possibilità di errori.

Svantaggi:

• La compatibilità con i browser più vecchi può essere un problema.
• Richiede una comprensione solida delle proprietà logiche e del loro comportamento.

In sintesi, la scelta tra queste opzioni dipenderà dalle specifiche tecniche, dalle risorse a disposizione e dal target di compatibilità browser. L'uso di proprietà logiche CSS è l'approccio più all'avanguardia e pulito, ma gli altri metodi possono essere più adatti se si necessita di supporto per browser più datati o se si preferisce una separazione più netta tra i due orientamenti di scrittura.

Le proprietà logiche nel dettaglio

Le proprietà logiche CSS sono strumenti progettati per facilitare la creazione di layout responsivi che si adattano automaticamente alla direzione del testo e al modo in cui questo è scritto, eliminando la necessità di scrivere codice ridondante o di mantenere fogli di stile multipli per differenti direzioni di lettura.

Con le proprietà logiche CSS si introducono dei nuovi termini, che sono:

• Asse Block: Questo termine si riferisce all'asse che segue il flusso del contenuto. Per lingue scritte da sinistra a destra (LTR) o da destra a sinistra (RTL), l'asse block è verticale, il che significa che il contenuto fluisce dall'alto verso il basso. Tuttavia, per lingue che adottano una scrittura verticale, come il cinese tradizionale o il giapponese, l'asse block diventa orizzontale, con il contenuto che scorre da destra a sinistra o viceversa.
• Asse Inline: Questo asse è perpendicolare all'asse block e corrisponde alla direzione in cui si dispiega la scrittura all'interno di una linea di testo. Nelle lingue LTR e RTL, l'asse inline è orizzontale. Invece, nelle lingue con scrittura verticale, l'asse inline è verticale, rappresentando il movimento del testo lungo una colonna.

I termini start e end sono usati in combinazione con block e inline per descrivere le estremità delle assi indipendentemente dalla direzione effettiva del testo. Questo significa che block-start si riferisce al punto d'inizio dell'asse block, che potrebbe essere in alto per una lingua LTR e a destra per una lingua con scrittura verticale. Analogamente, inline-end si riferisce al termine dell'asse inline, che potrebbe essere a destra per una lingua LTR e in basso o in alto per una lingua con scrittura verticale.

Esempi Pratici di Proprietà Logiche

• block-size e inline-size: Queste proprietà corrispondono rispettivamente a width e height in un contesto LTR, ma si adattano automaticamente in un contesto di scrittura verticale. block-size determina la dimensione lungo l'asse block, mentre inline-size lungo l'asse inline.
• margin e padding: Invece di utilizzare margin-top, margin-right, margin-bottom e margin-left, si possono usare margin-block-start, margin-inline-end, margin-block-end e margin-inline-start. Questo raggruppamento logico si adatta alla direzione del flusso del contenuto. Analogamente si applica per il padding.
• inset-block e inset-inline: Queste proprietà sono un'alternativa alle proprietà top, right, bottom e left per la posizione degli elementi. inset-block-start e inset-block-end posizionano un elemento lungo l'asse block, mentre inset-inline-start e inset-inline-end lungo l'asse inline.

Utilizzando le proprietà logiche, possiamo creare layout che si adattano in modo più naturale e intuitivo alle diverse direzioni del testo, facilitando la creazione di design che funzionano in modo uniforme in contesti multilingue e multiculturali.

Ecco degli esempi pratici di come potresti utilizzare le proprietà logiche CSS per gestire margini, dimensioni, e posizionamento in modo che rispondano alla direzione del testo e alla modalità di scrittura:

block-size e inline-size

Queste proprietà sostituiscono width e height per definire le dimensioni degli elementi in base all'orientamento del testo.

1.elemento {
2  block-size: 100px; /* Equivalente a height in LTR, a width in scrittura verticale */
3  inline-size: 200px; /* Equivalente a width in LTR, a height in scrittura verticale */
4}

margin e padding

Esempio di come utilizzare i margini e il padding con proprietà logiche che si adattano alla direzione del testo:

1.elemento {
2  margin-block-start: 10px; /* margine superiore in LTR, margine destro in RTL */
3  margin-block-end: 15px; /* margine inferiore in LTR, margine sinistro in RTL */
4  padding-inline-start: 20px; /* padding sinistro in LTR, padding destro in RTL */
5  padding-inline-end: 25px; /* padding destro in LTR, padding sinistro in RTL */
6}

inset-block e inset-inline

Queste proprietà sono utilizzate per la posizione degli elementi all'interno di un layout, in modo simile a top, right, bottom e left.

1.elemento {
2  position: absolute;
3  inset-block-start: 20px; /* top in LTR e RTL, right in scrittura verticale */
4  inset-inline-start: 50px; /* left in LTR, right in RTL, top in scrittura verticale */
5}

Questi esempi mostrano come le proprietà logiche CSS permettano di scrivere codice più pulito e mantenibile, che risulta essere anche più flessibile quando si tratta di supportare diverse direzioni di lettura senza la necessità di duplicare gli stili o di usare fogli di stile aggiuntivi.