Internazionalizzazione

Il web è disponibile per tutti nel mondo, come suggerisce il nome stesso. Ciò significa che il tuo sito web è potenzialmente disponibile per chiunque abbia accesso a internet, indipendentemente da dove si trova, dal dispositivo che utilizza o dalle lingue che parla.

L'obiettivo del responsive design è rendere i tuoi contenuti disponibili a tutti. L'applicazione della stessa filosofia alle lingue umane è la forza trainante dell'internazionalizzazione, ovvero la preparazione di contenuti e design per un pubblico internazionale.

Proprietà logiche

L'inglese viene scritto da sinistra a destra e dall'alto verso il basso, ma non tutte le lingue vengono scritte in questo modo. Alcune lingue, come l'arabo e l'ebraico, si leggono da destra a sinistra e alcuni caratteri giapponesi si leggono in verticale anziché in orizzontale. Per adattarsi a queste modalità di scrittura, in CSS sono state introdotte le proprietà logiche.

Se scrivi CSS, potresti aver utilizzato parole chiave direzionali come "sinistra", "destra", "alto" e "basso". Queste parole chiave si riferiscono al layout fisico del dispositivo dell'utente.

Le proprietà logiche, invece, si riferiscono ai bordi di una casella in relazione al flusso dei contenuti. Se la modalità di scrittura cambia, il CSS scritto con proprietà logiche verrà aggiornato di conseguenza. Non è così per le proprietà direzionali.

Mentre la proprietà direzionale margin-left si riferisce sempre al margine sul lato sinistro di una casella di contenuti, la proprietà logica margin-inline-start si riferisce al margine sul lato sinistro di una casella di contenuti in una lingua che si scrive da sinistra a destra e al margine sul lato destro di una casella di contenuti in una lingua che si scrive da destra a sinistra.

Affinché i tuoi progetti si adattino a diverse modalità di scrittura, evita le proprietà direzionali. Utilizza invece le proprietà logiche.

.byline {
  text-align: right;
}

.byline {
  text-align: end;
}

Quando il CSS ha un valore direzionale specifico come left o right, esiste una proprietà logica corrispondente. Dove una volta avevamo margin-left, ora abbiamo anche margin-inline-start.

In una lingua come l'inglese, in cui il testo scorre da sinistra a destra, inline-start corrisponde a "sinistra" e inline-end a "destra".

Allo stesso modo, in una lingua come l'inglese in cui il testo viene scritto dall'alto verso il basso, block-start corrisponde a "in alto" e block-end a "in basso".

Se utilizzi proprietà logiche nel CSS, puoi utilizzare lo stesso foglio di stile per le traduzioni delle pagine. Anche se le pagine vengono tradotte in lingue scritte da destra a sinistra o dal basso verso l'alto, il design verrà modificato di conseguenza. Non è necessario creare design separati per ogni lingua. Utilizzando le proprietà logiche, il design risponderà a ogni modalità di scrittura. Ciò significa che il tuo design può raggiungere più persone senza che tu debba dedicare tempo alla creazione di design separati per ogni lingua.

Le moderne tecniche di layout CSS come grid e flexbox utilizzano le proprietà logiche per impostazione predefinita. Se pensi in termini di inline-start e block-start anziché left e top, troverai queste tecniche moderne più facili da capire.

Prendi un pattern comune come un'icona accanto a del testo o un'etichetta accanto a un campo del modulo. Invece di pensare "l'etichetta deve avere un margine a destra", pensa "l'etichetta deve avere un margine alla fine del suo asse inline".

label {
  margin-right: 0.5em;
}

label {
  margin-inline-end: 0.5em;
}

Se la pagina viene tradotta in una lingua da destra a sinistra, non sarà necessario aggiornare gli stili. Puoi simulare l'effetto della visualizzazione delle pagine in una lingua da destra a sinistra utilizzando l'attributo dir nell'elemento html. Un valore di ltr significa "da sinistra a destra". Un valore "rtl" significa "da destra a sinistra".

Se vuoi sperimentare tutte le permutazioni delle direzioni del documento (l'asse del blocco) e delle modalità di scrittura (l'asse in linea), ecco una dimostrazione interattiva.

Identificare la lingua della pagina

È consigliabile identificare la lingua della pagina utilizzando l'attributo lang nell'elemento html.

<html lang="en">

Questo esempio si riferisce a una pagina in inglese. Puoi essere ancora più specifico. Ecco come dichiarare che una pagina utilizza l'inglese statunitense:

<html lang="en-us">

Dichiarare la lingua del documento è utile per i motori di ricerca. È utile anche per le tecnologie assistive come screen reader e assistenti vocali. Fornendo i metadati della lingua, aiuti questi tipi di sintetizzatori vocali a pronunciare correttamente i tuoi contenuti.

L'attributo lang può essere inserito in qualsiasi elemento HTML, non solo in html. Se cambi lingua nella pagina web, indica la modifica. In questo caso, una parola è in tedesco:

<p>I felt some <span lang="de">schadenfreude</span>.</p>

Identificare la lingua di un documento collegato

Esiste un altro attributo chiamato hreflang che puoi utilizzare nei link. L'attributo hreflang utilizza la stessa notazione del codice lingua dell'attributo lang e descrive la lingua del documento collegato. Se è disponibile una traduzione dell'intera pagina in tedesco, inserisci il link nel seguente modo:

<a href="/path/to/german/version" hreflang="de">German version</a>

Se utilizzi un testo in tedesco per descrivere il link alla versione in tedesco, utilizza sia hreflang che lang. In questo caso, il testo "Deutsche Version" è contrassegnato come in lingua tedesca e anche il link di destinazione è contrassegnato come in tedesco:

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

Puoi utilizzare anche l'attributo hreflang sull'elemento link. Questo va inserito nel head del documento:

<link href="/path/to/german/version" rel="alternate" hreflang="de">

Tuttavia, a differenza dell'attributo lang, che può essere inserito in qualsiasi elemento, hreflang può essere applicato solo agli elementi a e link.

Considerare l'internazionalizzazione nel design

Quando progetti siti web che verranno tradotti in altre lingue e modalità di scrittura, tieni presente questi fattori:

• Alcune lingue, come il tedesco, hanno parole lunghe di uso comune. L'interfaccia deve adattarsi a queste parole, quindi evita di progettare colonne strette. Puoi anche utilizzare CSS per introdurre i trattini.
• Assicurati che i valori di line-height possano contenere caratteri come accenti e altri segni diacritici. Le righe di testo che hanno un aspetto corretto in inglese potrebbero sovrapporsi in un'altra lingua.
• Se utilizzi un font web, assicurati che abbia una gamma di caratteri sufficientemente ampia da coprire le lingue in cui verrà eseguita la traduzione.
• Non creare immagini con testo. In questo caso, dovrai creare immagini separate per ogni lingua. Separa invece il testo e l'immagine e utilizza CSS per sovrapporre il testo all'immagine.

Pensa a livello internazionale

Attributi come lang e hreflang rendono il tuo HTML più significativo per l'internazionalizzazione. Allo stesso modo, le proprietà logiche rendono il CSS più adattabile.

Se sei abituato a pensare in termini di top, bottom, left e right, potrebbe essere difficile iniziare a pensare a block start, block end, inline start e inline end. Ma ne vale la pena. Le proprietà logiche sono fondamentali per creare layout veramente adattabili.

Mettiti alla prova

Metti alla prova le tue conoscenze sull'internazionalizzazione.

Successivamente, imparerai ad affrontare i layout a livello di pagina, noti anche come macro-layout.