How to translate JavaScript strings in Rails

Rails I18n and elegant message passing to JavaScript

The process of “internationalization” usually means to abstract all strings and other locale specific bits (such as date or currency formats) out of your application. The process of “localization” means to provide translations and localized formats for these bits.

How I18n in Ruby on Rails Works

The limits of my language are the limits of my world. ‒Ludwig Wittgenstein. With over 6,909 distinct languages in the world and most of them differing in so many different ways (e.g. in pluralization rules), it is difficult to provide specific tools for internalization. However, for unrestricted barriers of languages, Rails I18n API focuses on:

  • providing support for English and similar languages out of the box
  • making it easy to customize and extend everything for other languages

As part of this solution, every static string in the Rails framework – e.g. Active Record validation messages, time and date formats – has been internationalized, so localization of a Rails application means “over-riding” these defaults.

 1.1 The Overall Architecture of the Library

Thus, the Ruby I18n gem is split into two parts:

  • The public API of the i18n framework – a Ruby module with public methods that define how the library works
  • A default backend (which is intentionally named Simple backend) that implements these methods

As a user you should always only access the public methods on the I18n module, but it is useful to know about the capabilities of the backend.

Here, the simplest way to implement internationalization in JavaScript;

a) Use the Script

<script type=”text/javascript”>
window.I18n = <%= I18n.backend.send(:translations).to_json.html_safe %>
</script>

b) You can add the below code in JS file;

I18n[“en-US”][“alpha”][“welcome”];

c) Get help from the application helper by adding the below method;

def current_translations

@translations ||= I18n.backend.send(:translations)

@translations[I18n.locale].with_indifferent_access

end

d) The backend needs to be initialized if it hasn’t been already.

I18n.backend.send(:init_translations) unless I18n.backend.initialized?

# now you can safely dump the translations to json

e) Invoke the below in your application.html.erb ;

<script type=”text/javascript”>

window.I18n = <%= current_translations.to_json.html_safe %>

</script>

f) To avoid having to know the current locale in JavaScript.

I18n[“alpha”][“welcome”]; Or I18n.alpha.welcome;

g) Various libraries and plugins for Internationalization & localisation:

i18next – https://github.com/i18next/i18next

I18n gem – https://github.com/svenfuchs/i18n

requirejs-i18n – https://requirejs.org/docs/api.html#i18n

At RailsCarma we use the latest tools and techniques to build unique application. Check out our portfolio to understand how we are helping to change the shape of software industry.To Know More About Ruby on Rails Development, get in touch with us now!

LUBAIB CEEJEY
Sr. Ruby on Rails Developer

Subscribe For Latest Updates

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

en_USEnglish