How to get i18next-node to display umlauts the right way?

Question

I searched around quite a bit but couldn't find a solution for my problem.

My app uses i18next and it works fine except for one issue: german umlauts (ü,ö,ä) are displayed as �.

I don't understand were I got it wrong, since this example app has no problem with umlauts: http://i18next-example1.eu01.aws.af.cm/?setLng=de-DE (github: https://github.com/rbeere/i18next-jade-express-sample)

How can I figure this one out?

Answer 1

The culprit might be:

• The Translation.json file is not saved as UTF8.
• If any specific fonts are used, their Unicode support is very very limited (this is very unlikely with modern fonts).

• layout.jade file doesn't declare the page encoding. Therefore it's up to the browser to auto-detect it. No matter if this fixes the problem or not, it's a good practice to declare the page encoding in the header:

  meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
  

• Content-Type HTTP header field is not set properly. Change the HTTP response as follows:

  app.get('/', function(req, res) {
       res.header("Content-Type", "text/html; charset=utf-8");
       res.render('index', { title: 'Localization with Express, Jade and i18next-node'});
  });