0

I added french translation using i18n gem. Most of the french words with accent characters get printed correctly but some of the words are behaving incorrectly.

Sécurité gets printed instead of Sécurité. I tried to escape the accented characters with backticks or double single quotes but was unable to achieve the correct result.

In .re file: <h3 className="text-lg font-semibold"> {t("security") |> str} </h3>

In .yml file: security: "Sécurité"

hasanadeem
  • 69
  • 9
  • 1
    This appears to be a **character encoding** problem; you're mixing up `latin-1` (ISO 8859-1) with `utf-8`. Check what encoding your database table is using, and that you're not forcing data into incorrect encodings elsewhere. – Tom Lord Feb 09 '21 at 15:25
  • The issue is not with DB. I'm just trying to display the word on frontend. It's not coming from DB. – hasanadeem Feb 09 '21 at 15:38
  • I can guarantee you that **something** is screwing up character encoding. (The fix isn't to insert a backslash or similar.) You didn't actually show any code, so I can only speculate where the problem originates -- I'd check at what point precisely the character is rendering wrong, and then investigate why the character encoding is wrong at the point. – Tom Lord Feb 09 '21 at 15:44
  • @TomLord added code in the question. – hasanadeem Feb 09 '21 at 15:54
  • 1
    So it's probably something in React that renders the page as latin-1, instead of utf-8? If you google rendering UTF-8 in react (I'm no expert in this specifically), you'll find a whole load of people complaining about an almost identical problem to yours. Possibly [adding `` in the header](https://www.reddit.com/r/reactjs/comments/7tppu3/how_to_handle_special_characters/) fixes it? – Tom Lord Feb 09 '21 at 16:55

0 Answers0