Il World Wide Web è disponibile per tutti nel mondo: è proprio lì nel nome! 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 parlano.
L'obiettivo del design reattivo è rendere i tuoi contenuti disponibili per tutti. Applicare la stessa filosofia alle lingue umane è la forza trainante dell'internazionalizzazione, che ti consente di preparare i tuoi contenuti e il tuo design per un pubblico internazionale.
Proprietà logiche
L'inglese si scrive da sinistra a destra e dall'alto verso il basso, ma non tutte le lingue sono scritte in questo modo. Alcune lingue, come l'arabo e l'ebraico, leggono da destra a sinistra, mentre alcuni caratteri giapponesi vengono letti in verticale anziché in orizzontale. Per soddisfare queste modalità di scrittura, sono state introdotte proprietà logiche in CSS.
Se scrivi il codice CSS, è possibile che tu abbia utilizzato parole chiave direzionali come "left", "right", "top" e "bottom". Queste parole chiave fanno riferimento alla disposizione fisica del dispositivo dell'utente.
Le proprietà logiche, invece, si riferiscono ai bordi di una casella in relazione al flusso di contenuti. Se la modalità di scrittura cambia, il codice CSS scritto con proprietà logiche verrà aggiornato di conseguenza. Questo non accade con le proprietà direzionali.
Mentre la proprietà direzionale margin-left fa sempre riferimento 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 da sinistra a destra e al margine sul lato destro di una casella di contenuti in una lingua da destra a sinistra.
Affinché i tuoi progetti si adattino a diverse modalità di scrittura, evita le proprietà direzionali. Utilizza invece proprietà logiche.
.byline {
text-align: right;
}
.byline {
text-align: end;
}
Quando 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 corrisponde a "destra".
Analogamente, in una lingua come l'inglese in cui il testo è scritto dall'alto verso il basso, block-start corrisponde a "top" e block-end corrisponde a "bottom".
Se utilizzi proprietà logiche nel CSS, puoi utilizzare lo stesso foglio di stile per le traduzioni delle tue pagine. Anche se le tue pagine sono tradotte in lingue scritte da destra a sinistra o dal basso verso l'alto, il tuo design si adeguerà di conseguenza. Non è necessario creare design separati per ogni lingua. Se utilizzi proprietà logiche, il tuo design risponderà a ogni modalità di scrittura. Ciò significa che il tuo design può raggiungere più persone senza che tu debba dedicare tempo a creare design separati per ogni lingua.
Le tecniche di layout CSS moderne, come grid e flexbox, utilizzano proprietà logiche per impostazione predefinita.
Se pensi in termini di inline-start e block-start anziché di left e top
, troverai queste tecniche moderne più facili da comprendere.
Utilizza uno schema comune come un'icona accanto a del testo o un'etichetta accanto a un campo del modulo. Invece di pensare a "l'etichetta dovrebbe avere un margine a destra", prova a dire che "l'etichetta dovrebbe avere un margine all'estremità dell'asse in linea".
label {
margin-right: 0.5em;
}
label {
margin-inline-end: 0.5em;
}
Se la pagina viene tradotta in una lingua da destra a sinistra,
gli stili non dovranno essere aggiornati.
Puoi riprodurre l'effetto della visualizzazione delle pagine in una lingua da destra a sinistra utilizzando l'attributo dir nell'elemento html.
Il valore ltr significa "da sinistra a destra". Il valore "rtl" significa "da destra a sinistra".
Se vuoi fare esperimenti con tutte le permutazioni delle direzioni del documento (asse dei blocchi) e delle modalità di scrittura (asse in linea), ecco una dimostrazione interattiva.
Identifica la lingua della pagina
Ti consigliamo di identificare la lingua della pagina utilizzando l'attributo lang nell'elemento html.
<html lang="en">
Questo esempio è per una pagina in inglese. Puoi essere ancora più specifico. Per dichiarare che una pagina utilizza l'inglese americano:
<html lang="en-us">
Dichiarare la lingua del documento è utile per i motori di ricerca. È utile anche per le tecnologie per la disabilità come gli screen reader e gli assistenti vocali. Fornendo metadati relativi alla lingua, aiuti questi tipi di sintetizzatori vocali a pronunciare correttamente i tuoi contenuti.
L'attributo lang può essere associato a qualsiasi elemento HTML, non solo a html. Se cambi lingua nella pagina web, indica questa 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 per i link.
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 in questo modo:
<a href="/path/to/german/version" hreflang="de">German version</a>
Se utilizzi testo in tedesco per descrivere il link alla versione in tedesco, utilizza sia hreflang sia lang.
Qui, il testo "Deutsche Version" è contrassegnato come tedesco e il link di destinazione è contrassegnato anche come in tedesco:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
Puoi anche utilizzare l'attributo hreflang nell'elemento link. Questo valore deve essere inserito nell'elemento head del documento:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
Tuttavia, a differenza dell'attributo lang, che può essere applicato a qualsiasi elemento, hreflang può essere applicato solo agli elementi a e link.
Considera l'internazionalizzazione nella tua progettazione
Quando progetti siti web che verranno tradotti in altre lingue e modalità di scrittura, pensa a questi fattori:
- Alcune lingue, come il tedesco, hanno parole lunghe nell'uso comune. L'interfaccia deve adattarsi a queste parole, per cui evita di progettare colonne strette. Puoi anche utilizzare CSS per introdurre i trattini.
- Assicurati che i valori
line-heightpossano contenere caratteri come accenti e altri segni diacritici. Le righe di testo che sembrano in inglese potrebbero sovrapporsi in un'altra lingua. - Se utilizzi un carattere web, assicurati che abbia una serie di caratteri sufficientemente ampia da coprire le lingue in cui intendi tradurre.
- Non creare immagini che contengono testo. In questo caso, dovrai creare immagini separate per ogni lingua. Separa il testo dall'immagine e utilizza i CSS per sovrapporre il testo all'immagine.
Pensa a livello internazionale
Attributi come lang e hreflang rendono il tuo codice HTML più significativo ai fini dell'internazionalizzazione.
Analogamente, le proprietà logiche rendono il tuo 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 reattivi.
Verifica la tua comprensione
Verifica le tue conoscenze sull'internazionalizzazione.
In inglese, il lato fisico right di una scatola, è logicamente quale lato?
block-starttopblock-endbottominline-startleftinline-endQuale attributo dovresti aggiungere al tuo codice HTML per renderlo più significativo ai fini dell'internazionalizzazione?
englishlanglanguagei18nPoi imparerai ad affrontare i layout a livello di pagina, noti anche come layout di macro.