Usa dir in HTML per impostare la direzione di base del testo e flex-direction: row-reverse in CSS per invertire il flusso di una riga flex. Quando disponi delle schede su una pagina pubblica dal tuo Mac, decidi prima se devi cambiare la direzione del testo, la sequenza degli elementi o l’allineamento.

Questa guida presuppone che tu stia modificando l’HTML e il CSS di una pagina in un editor di testo e visualizzandone l’anteprima in un browser desktop. L’obiettivo è disporre tre riquadri neutri — Alpha, Beta e Gamma — mantenendo intenzionali il comportamento del testo e l’ordine nel documento.

Cosa cambia davvero ciascuna impostazione di direzione?

L’attributo dir di HTML descrive la direzione di base del testo di un elemento. I suoi valori espliciti sono ltr e rtl; auto chiede al browser di determinare la direzione in base al contenuto. WHATWG incoraggia gli autori a esprimere la direzione del testo tramite HTML, così che l’informazione rimanga disponibile anche senza CSS. Standard HTML: l’attributo dir.

Anche direction in CSS controlla la direzione di base del testo e influisce sul comportamento del layout. È ereditata, quindi impostare direction: rtl su un contenitore può influire sui suoi discendenti. MDN consiglia di usare HTML dir quando possibile. Considera una sovrascrittura della direzione in CSS una scelta intenzionale sulla direzione del testo, anziché un modo pratico per spostare riquadri. MDN: direction.

flex-direction in CSS controlla l’asse principale di un contenitore flex. row segue l’asse in linea della modalità di scrittura corrente; row-reverse scambia le direzioni di inizio e fine dell’asse principale. Cambia la direzione in cui gli elementi vengono disposti, mantenendone la sequenza nel codice sorgente. W3C: direzione del flusso flex.

Questi meccanismi interagiscono. Con la scrittura orizzontale, una riga flex ltr inizia a sinistra, mentre una riga flex rtl inizia a destra. Aggiungere row-reverse inverte entrambe le direzioni iniziali. Di conseguenza, row-reverse non significa sempre che il primo elemento appaia a destra. MDN: flex-direction.

Quale impostazione corrisponde al risultato desiderato?

Prima di modificare la pagina, descrivi il risultato desiderato in termini concreti: «Mantieni inalterate le etichette inglesi, disponi i riquadri in ordine visivo inverso e mantieni il gruppo a destra». Questa frase individua decisioni distinte relative al testo, al flusso degli elementi e all’allineamento.

Risultato desiderato Punto di partenza appropriato Cosa controllare
Impostare la direzione di base del testo del contenuto HTML dir="ltr" o dir="rtl" Applicalo all’ambito in cui il testo richiede quella direzione.
Invertire la progressione visiva di tutti gli elementi in una riga flex flex-direction: row-reverse Controlla prima la direzione attuale del contenitore.
Spostare una riga invariata verso il bordo di fine dell’asse principale justify-content: flex-end Assicurati che ci sia spazio libero da usare per l’allineamento.
Cambiare la sequenza significativa ovunque Riordina gli elementi nel codice sorgente Verifica che la sequenza risultante abbia senso per la lettura.
Riposizionare visivamente elementi selezionati Valori individuali di order Esamina la differenza tra ordine visivo e ordine nel codice sorgente.

La distinzione tra inversione e allineamento è importante. Con una riga ltr, justify-content: flex-end può posizionare insieme Alpha, Beta e Gamma a destra senza invertirne la sequenza. L’allineamento distribuisce lo spazio disponibile lungo l’asse principale; flex-end si riferisce al lato di fine dell’asse principale del contenitore flex. Il suo effetto può scomparire quando gli elementi flessibili occupano quello spazio. MDN: justify-content.

Se i lettori devono incontrare una sequenza in un ordine specifico, stabilisci quell’ordine nel documento stesso. W3C sconsiglia esplicitamente di usare l’inversione flex o order per compensare un ordine errato nel codice sorgente. W3C: ordine e orientamento.

Prevedi le quattro combinazioni prima di modificare la pagina

Il confronto seguente deriva dalle regole degli assi documentate. Presuppone writing-mode: horizontal-tb, una sola riga flex, valori order uguali e un ordine nel codice sorgente di Alpha, Beta, Gamma. «Aspetto da sinistra a destra» descrive le posizioni fisiche dei riquadri sullo schermo.

Direzione del contenitore Direzione flex Il primo riquadro inizia a Aspetto da sinistra a destra
ltr row Sinistra Alpha, Beta, Gamma
ltr row-reverse Destra Gamma, Beta, Alpha
rtl row Destra Gamma, Beta, Alpha
rtl row-reverse Sinistra Alpha, Beta, Gamma

La seconda e la terza riga possono sembrare uguali quando il contenuto è composto da semplici rettangoli. Tuttavia, le impostazioni della direzione del testo sono diverse. La quarta combinazione spiega una sorpresa frequente: applicare sia rtl sia row-reverse produce una progressione degli elementi da sinistra a destra. MDN documenta questo comportamento dipendente dalla direzione. MDN: flex-direction.

La direzione di base del testo influisce anche sulla punteggiatura e sull’ordine delle sequenze di testo con direzionalità. Impostare rtl non inverte semplicemente ogni carattere di una parola inglese. Un’etichetta può rimanere riconoscibile, mentre la punteggiatura appare in una posizione inaspettata. Per questo i riquadri semplici sono utili per esaminare il posizionamento dei contenitori, ma non bastano per valutare il comportamento del testo. Note d’uso di dir su MDN.

Prova una pagina di confronto completa sul tuo Mac

Salva il documento completo seguente come direction-demo.html usando un editor di testo semplice, quindi apri il file nel browser. Usa etichette di esempio e rettangoli CSS, senza dipendenze esterne. I risultati previsti derivano dalle regole documentate; l’esempio non viene presentato come risultato verificato in un browser.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

Confronta le quattro righe con la tabella delle previsioni. Tutte e quattro contengono la stessa sequenza nel codice sorgente. Cambiano solo la direzione del contenitore e la classe di inversione. La modalità di scrittura orizzontale esplicita mantiene questa dimostrazione incentrata sul normale caso desktop orizzontale.

Poi modifica solo justify-content: flex-start in justify-content: flex-end, salva e ricarica la pagina. I gruppi dovrebbero spostarsi ai bordi opposti dell’asse principale, mantenendo la progressione degli elementi di ciascuna riga. In questo modo separi il posizionamento dall’inversione senza introdurre un’altra impostazione di direzione del testo. MDN: justify-content.

Infine, ripristina l’impostazione di allineamento e aggiungi un punto dopo Alpha in ogni riga. Confronta la punteggiatura oltre alle posizioni dei riquadri. È una verifica illustrativa della direzione del testo, non un consiglio di assegnare rtl alle normali etichette inglesi. La spiegazione di MDN sulla direzione di base descrive perché la punteggiatura ai confini merita una verifica a sé. MDN: dir.

Diagnostica i risultati inattesi nel layout effettivo

Verifica che il genitore sia un contenitore flex

Controlla l’elemento che contiene i riquadri. flex-direction si applica quando il suo display è flex o inline-flex. Una dichiarazione su un normale contenitore block non crea un layout flex. Controlla anche se una regola successiva modifica il valore effettivo alla larghezza corrente del browser. Descrizione di flex-direction su MDN.

Controlla la direzione ereditata prima di aggiungere un’altra inversione

Esamina il contenitore e i suoi antenati per verificare la presenza di dir, quindi controlla le dichiarazioni CSS direction. Se dir viene omesso, la direzione in genere viene ereditata dal genitore; ometterlo non richiede il rilevamento automatico. Se la sequenza nel codice sorgente inizia inaspettatamente a destra, la direzione ereditata potrebbe spiegarlo. Ereditarietà di dir su MDN.

Evita di usare dir="auto" come interruttore del layout. WHATWG lo definisce come rilevamento della direzione basato sul contenuto, principalmente sul primo carattere con direzionalità forte, e consiglia di riservarlo ai casi in cui la direzione del testo è davvero sconosciuta. Un requisito di layout non dovrebbe dipendere dall’etichetta che capita di comparire per prima. Standard HTML: l’attributo dir.

Distingui l’inversione degli elementi da quella delle righe

Se il problema si presenta solo dopo aver ristretto la finestra, controlla l’andata a capo. row-reverse cambia la progressione lungo l’asse principale; wrap-reverse cambia la direzione in cui vengono impilate le righe flex. Il valore predefinito nowrap mantiene una sola riga e può consentire la fuoriuscita del contenuto. Si tratta di controlli distinti, quindi prova anche una finestra stretta oltre alla larghezza desktop iniziale. MDN: flex-wrap.

Cerca le regole di ordinamento individuali

Controlla se uno dei riquadri ha un valore order. Il layout flex raggruppa gli elementi in base a quell’intero, dal più basso al più alto, e mantiene l’ordine nel codice sorgente all’interno dei gruppi con lo stesso valore. L’inversione cambia poi la direzione in cui viene disposta la sequenza risultante. Reimposta eventuali ordinamenti imprevisti a livello di singolo elemento prima di concludere che la direzione del contenitore sia errata. Ordinamento degli elementi flex su MDN.

Verifica la sequenza di lettura prima di mantenere la modifica

Per riquadri decorativi neutri, l’inversione visiva può essere l’unico requisito. Per link o controlli, esamina la sequenza nel codice sorgente e segui il focus da tastiera nel componente. L’inversione flex di per sé non cambia la navigazione sequenziale né l’ordine di lettura vocale. Un gruppo invertito visivamente può quindi mantenere la sequenza originale delle interazioni. W3C: direzione del flusso flex.

Usa questa verifica per decidere se modificare il codice sorgente. Se Gamma, Beta, Alpha è la sequenza significativa desiderata, inserisci gli elementi in quell’ordine. Se Alpha, Beta, Gamma rimane la sequenza di lettura corretta e solo la presentazione deve essere invertita, valuta la disposizione visiva tenendo conto di questa distinzione. MDN illustra il comportamento dell’ordine nel codice sorgente con link selezionabili da tastiera. Ordinamento degli elementi flex su MDN.

Scegli il meccanismo in base al requisito: HTML dir per la direzione di base del testo, flex-direction per il flusso lungo l’asse flex e l’allineamento per posizionare una sequenza invariata. Prima di mantenere il risultato, confronta separatamente la disposizione dei riquadri, la punteggiatura, la gestione delle righe e l’ordine nel codice sorgente. Così avrai un metodo ripetibile per risolvere un layout che sembra solo invertito.

Fonti