Che cos'è il supporto RTL (Right-to-Left)?

Il supporto RTL è la capacità di uno storefront di essere renderizzato correttamente per le lingue che scorrono da destra a sinistra, come l'arabo, l'ebraico, il persiano e l'urdu. È molto più che un semplice mirroring del layout: coinvolge la tipografia, l'iconografia, le animazioni, il comportamento dei form e persino il modo in cui vengono ritagliate le immagini di prodotto.

Definizione

Il supporto RTL parte dall'attributo HTML dir="rtl", integrato da proprietà CSS logiche (margin-inline-start invece di margin-left) e da un design system che fornisce varianti LTR e RTL dei componenti direzionali. Numeri, valute e nomi di prodotto in caratteri latini restano LTR all'interno di un paragrafo RTL, generando un testo bidirezionale che il browser gestisce tramite l'algoritmo Unicode Bidi, ma solo se il markup usa isolati direzionali corretti. L'iconografia che implica una direzione (frecce, barre di avanzamento, caroselli) deve essere invertita, mentre i loghi e le icone del marchio restano invariati.

Perché è importante

MEA e alcune parti dell'Asia centrale rappresentano mercati e-commerce in rapida crescita in cui l'RTL non è una nicchia ma la norma predefinita. Uno storefront che presenta un layout mezzo invertito, con il testo capovolto ma il drawer del carrello che continua a entrare da destra, risulta rotto ed erode la fiducia in pochi secondi. Oltre all'estetica, l'RTL influisce sul completamento del checkout: etichette dei campi disallineate, campi dell'indirizzo nell'ordine sbagliato o pattern di numero di telefono LTR sono cause reali di abbandono. In uno stack di Composable Commerce con un unico design system, il supporto RTL rende inoltre la piattaforma a prova di futuro: aggiungere ar-SA o he-IL diventa una modifica di configurazione piuttosto che una ricostruzione.

Casi d'uso

Un retailer di moda in espansione verso ar-AE configura il proprio design system per invertire i token direzionali alla radice, cosicché spaziatura, allineamento e varianti dei componenti si invertano automaticamente. Un marketplace usa i campi locale del CMS per fornire immagini hero adatte all'RTL e garantisce che il copy di prodotto in arabo usi font tipograficamente appropriati con una kerning corretta. Un brand in abbonamento combina l'RTL con il Locale Routing, così i percorsi /ar/ae/ attivano sia il contenuto in arabo che il foglio di stile RTL, mentre la Storefront API sottostante resta agnostica rispetto alla direzione. L'RTL interagisce anche con l'Edge-Personalization: esperimenti e banner devono essere realizzati pensando ai lati logici, non a un "sinistra" o "destra" fisso nel codice.

Correlati

Scopri Multi-Brand and Multi-Market.