How to translate javascript strings in Rails – .js localization

Hi there!

Today i have achieved the configuration of a great gem that will help you to translate your javascript strings.

It is called https://github.com/fnando/i18n-js

I was following the instructions but a couple of things did not work. Both in application.rb

1. Library

In the instructions it says to add the following line:

config.middleware.use I18n::JS::Middleware

But in my case it did not work. I searched and found this alternative:

config.middleware.use SimplesIdeias::I18n::Middleware

(Thanks http://stackoverflow.com/users/2933134/halogen for the hint here: http://stackoverflow.com/questions/20724971/uninitialized-constant-i18njs-ruby-on-rails

2. Configuration

I had to change this line

config.assets.initialize_on_precompile = false

and set it to true

config.assets.initialize_on_precompile = true

3. Inform js of the current locale
Another important thing I had to do was to add a couple of lines to the application.html.erb


I18n.defaultLocale = "";
I18n.locale = "";

And then it started working nicely.

As an example, in the .js file I put

var alertMsg = I18n.t('posts.alert');

And that corresponds to


en:
posts:
alert: "Alert message"

How this works internally I am not sure. I have realised that the key file is translations.js that is automatically created under public/assets

Translations.js gets automatically updated, and you can also update it manually with:

$ rake i18n:js:export

I have also evidenced that the Rails cache can spoil the party. So if you notice erratic behaviour do clear the cache:

rake tmp:clear (I have had similar issues in the past…)

Hope it helped! Thanks to Nando Vieira for the amazing work!

Advertisements

Translating WordPress themes

There are a few things to take into account:

1. Gettext the strings:
WordPress uses an opensource solution called GetText, that has a php version included with the WordPress package

For example:

<?php printf( __( 'View all posts by %s ', 'twentyeleven' ), get_the_author() ); ?>

A complete guide can be found here: http://urbangiraffe.com/articles/translating-wordpress-themes-and-plugins/

2. Generating the .po file

Name it like the language you are using. For example, Spanish from Spain is es_ES.po. Put all the strings there. Following the example

#: content.php:57
msgid "View all posts by %s "
msgstr "Ver todas las entradas por %s "

3. Put the .mo file into the /languages directory of your theme

Following the example, es_ES.mo

Like in many other occasions, the best thing may be to follow an example. So, the guys at WordPress with the help of the community have translated the included themes such as TwentyTwelve here:

http://translate.wordpress.org/projects/wp/3.5.x/twentytwelve/es/default

Thanks to Roger for this post in StackOverflow: http://stackoverflow.com/questions/7105556/wordpress-theme-and-language-pack