Internationalization I18n in Ruby on Rails

In this Article we are going to built simple rails simple application to demonstrate the features of Rails Internationalization (I18n). We will cover very basic aspect of Internationalization.

What is Internationalization?

Internationalization means developing the application that can adapt any language easily without making any complex changes. Internationalization can be apply on string, date and currency format of the rails application web page.

Let’s build a demo Rails App with I18n

We are using I18 since the early version rails 2.2. It provides the framework that makes so easy to translate the App in various languages. Let’s create one demo. Apply the following steps as written and you will get the nice demo app at the end of this article.

Step:1 Create rails application using below command and I am using rails 5.2 version

rails new tech-internationalization

Step2: Go inside directory and bundle install

cd tech-internationalization

bundle install

Step3: Generate controller

rails generate controller Welcome index

Step4: Create the CRUD using following command

rails g scaffold User name email

Step5: Migrate database and start rails server

rails db:migrate

rails s

Step6: Configuration for I18

config.i18n.available_locales = [:en, :ru, :hi, :es, :nl, :gu]
config.i18n.default_locale = :en

# Rails internationalization
gem 'rails-i18n'

# Third party api
gem 'httparty'

Gem “rails-i18n” use for internationalization

Gem “httparty” use for third party API

Step7: Install the bundle and restart the server

How to store the Translations?

Inside config/locales

There is one default file en.yml and you may create other file for each language

# English
en:
  header:
    menu:
      language: 'Language'
      home: 'Home'
      about_us: 'About Us'
      service: 'Service'
      search: 'Search'
  content:
    demo_text: 'Internationalization Demo here'
  user:
    user_text: 'User'

# Russian
ru:
  header:
    menu:
      language: 'язык'
      home: 'Главная'
      about_us: 'Насчет нас'
      service: 'обслуживание'
      search: 'Поиск'
  content:
    demo_text: 'Интернационализация Демо здесь'
  user:
    user_text: 'пользователей'

How to use this string in header html file?

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin:24px 0;">
  <a class="navbar-brand" href="/"><%= image_tag 'techcompose.png', width: 50, height: 50%></a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <%= t 'header.menu.language'%>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <%= link_to 'English', url_for(locale: :en), class: "dropdown-item" %>
            <%= link_to 'Russisch', url_for(locale: :ru), class: "dropdown-item" %>
            <%= link_to 'हिंदी', url_for(locale: :hi), class: "dropdown-item" %>
            <%= link_to 'Español', url_for(locale: :es), class: "dropdown-item" %>
            <%= link_to 'Nederlands', url_for(locale: :nl), class: "dropdown-item" %>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)"><%= t 'header.menu.home'%></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)"><%= t 'header.menu.about_us'%></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)"><%= t 'header.menu.service'%></a>
      </li>
      <li class="nav-item">
        <%= link_to (t 'user.user_text'), users_path, class: "nav-link" %>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="<%= t 'header.menu.search'%>">
      <button class="btn btn-success my-2 my-sm-0" type="button"><%= t 'header.menu.search'%></button>
    </form>
  </div>
</nav>

t ‘header.menu.home’

Create custom message with your text

t ‘header.menu.service’my-name:’techcompose’

en:
header:
  menu:
    language: 'Language'
    home: 'Home'
    about_us: 'About Us'
    service: 'Service from %{my_name}'

Change the language

http://localhost:3000/en/welcomes

http://localhost:3000/hi/welcomes

Rails.application.routes.draw do
scope "/:locale" do
  resources :users
  resources :welcome, only: [:index]
end
root 'welcome#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

And inside application controller set locale param

class ApplicationController < ActionController::Base
before_action :set_locale
private
  def set_locale
    I18n.locale = extract_locale || I18n.default_locale
  end

  def extract_locale
    parsed_locale = params[:locale]
    I18n.available_locales.map(&:to_s).include?(parsed_locale) ? parsed_locale : nil
  end

  def default_url_options
    { locale: I18n.locale }
  end
end

How to switch language from html?

_header.html.erb

<%= link_to ‘English’, url_for(locale: :en), class: “dropdown-item” %>
<%= link_to ‘Russisch’, url_for(locale: :ru), class: “dropdown-item” %>
<%= link_to ‘हिंदी’, url_for(locale: :hi), class: “dropdown-item” %>
<%= link_to ‘Español’, url_for(locale: :es), class: “dropdown-item” %>
<%= link_to ‘Nederlands’, url_for(locale: :nl), class: “dropdown-item” %>

Contact Ruby on Rails Development Company to develop your Business mobile app or web application with elegant design. Contact us to Hire dedicated ROR developer today or reach us at inquiry@techcompose.com for any assistance regarding ROR development requirement.