Reagisci e riduci le best practice di traduzione a livello di app

La traduzione può richiedere molto tempo se non la si prepara nella progettazione iniziale dell'applicazione. Se hai un sacco di testo in linea nei tuoi file front-end, non penso che ci sia una risposta migliore di dover passare e sostituire tutto il testo con riferimenti variabili. Potresti essere in grado di configurare alcuni strumenti o Regex per automatizzare parte di questo, ma almeno ci vorrà un sacco di revisione manuale per assicurarti di averli convertiti tutti.

Dato che stai usando React, dovrai controllare qualsiasi stringa definita nel tuo JavaScript che possa essere mostrata all'utente, Potresti anche dover cercare attraverso il tuo back-end e trovare le stringhe codificate che potrebbero essere visualizzate utente.

La cosa più ovvia da fare per gestire la traduzione effettiva è di avere tutto il testo visualizzato all'utente in un file statico o nel database. Quindi leggi la lingua che ti serve in un oggetto che i tuoi componenti fanno riferimento per visualizzare il testo corretto. Supponendo che questa app venga mantenuta attivamente con nuove funzionalità e aggiornamenti, sarà necessario impostare un processo in cui le stringhe nuove o modificate possono essere contrassegnate per la traduzione. Ho visto principalmente strumenti di casa per questo, ma probabilmente è disponibile anche un software dedicato.

Raccomando comunque di decidere di farlo, che le variabili di traduzione siano nell'intelligenza del tuo IDE e abbiano una convenzione di denominazione in modo che gli sviluppatori possano trovare rapidamente una stringa o realizzare di aver bisogno di aggiungerne una nuova. I tuoi traduttori dovrebbero anche essere in grado di salvare direttamente nel database / file statico senza assistenza del programmatore.

La cosa da sinistra a destra dell'arabo dipenderà molto dallo stile del tuo sito esistente, ma idealmente puoi gestirlo interamente all'interno del tuo CSS. Se solo cambiando l'allineamento del testo funzionerà per la maggior parte dei casi senza sembrare troppo male, l'impostazione di una semplice classe CSS su tutto il corpo potrebbe essere sufficiente. Altrimenti puoi verificare questa classe e impostare regole speciali per i tuoi singoli componenti fino a quando l'applicazione non avrà un aspetto gradevole nella nuova lingua.

Alcune cose da considerare non menzionate dall'altra risposta. La localizzazione può essere molto dura, con una cosa che si può dare per scontato andando totalmente fuori dalla finestra. Ad esempio, alcune lingue hanno forme diverse di parole che dipendono se ci sono 1, 2, 3, 4 o 5 di esse, piuttosto che un semplice singolare o plurale. Può aiutare a fare un po 'di ricerca su questo, o assumere un esperto. Potrebbero esserci anche biblioteche per aiutarti. Non conosco il tuo stack ma nella mia esperienza con C # c'era una libreria molto utile, Humanizer, che ha aiutato molto con questo.

Qualcosa di specifico per l'arabo - assicurati di controllare se è necessario implementare l'Hijri o il calendario islamico - questo non è completamente correlato uno a uno con il calendario gregoriano / occidentale, il che può essere complicato.

Per lavorare da destra a sinistra, puoi ottenere rapidamente una versione base aggiungendo la proprietà css direction: rtl; al tag body . Tuttavia, sarà probabilmente necessario apportare ulteriori modifiche per far funzionare i singoli elementi. Probabilmente vale la pena avere due fogli di stile, uno per ciascuna direzione. Se utilizzi un preprocessore per il tuo CSS come SASS o LESS questo sarà molto più facile da mantenere.

Inoltre, sfogliando da destra verso sinistra, alcune icone sono invertite mentre altre non dovrebbero esserlo. Ad esempio, le icone che mostrano il flusso del tempo attorno a un quadrante non dovrebbero essere invertite, mentre dovrebbero essere le icone che mostrano i documenti o la scrittura. Esiste una buona guida approfondita al seguente indirizzo material.io .