martinandert / react-translate-component

A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.
MIT License
322 stars 31 forks source link

Right to left text direction languages (Farsi, Arabic, Hebrew etc.) #35

Closed bigstas closed 6 years ago

bigstas commented 6 years ago

Hi, I'm using this component, works great for our app. Thanks so much for making it. One issue I'm having is that I would like to support some languages with right-to-left text direction (Farsi at the moment, Arabic in the near future, possibly others). HTML "sees" strings as left-to-right by default, but you can set the text direction to right-to-left using CSS: .myParagraph { direction: rtl; } Otherwise, if HTML "sees" text as right to left, then it automatically puts full stops and question marks on the right side of paragraphs (what it "sees" as the end of the sentence) instead of the left. So one way this could be done is to add some global state to our app that sets the text direction, and then the style of every single text-component in the app will respond to that app-level state. While that seems like a conceivable solution, it feels hacky and like a lot of work. Is there any thing in react-translate-component that can make this easier and prettier? Thanks!

bigstas commented 6 years ago

Ended up setting the entire app's text direction when the language has a different text direction to before.

counterpart.onLocaleChange( (newLocale, oldLocale) => {
    // check text direction
    const oldDirection = getDirection(oldLocale)
    const newDirection = getDirection(newLocale)
    if (oldDirection !== newDirection) {
        // get the "content" div, which is written in index.html (the container for the whole app) 
        // and change its text direction style
        document.getElementById("content").style["direction"] = newDirection
    }
})