Rails I18N of CSS File

Rails I18n of CSS file

Your best bet in organization is to have different style sheets specific to localization, then set up a condition in your layout on what style sheets to render based of the locale.

Just only put local specific style, and if you think about it...it shouldn't effect load times that much because I believe you are only changing font sizes.

UPDATE from OP:

Here is what I have configured to have this working:

I created a locales directory under app/assets/stylesheets
I put locale specific stylesheets inside, such as fr.sass
I setup the condition in the layouts/application.html.erb to reference the css files:
<% if I18n.locale != :en %> <%= stylesheet_link_tag "locales/" + I18n.locale.to_s %> <% end %>
I setup the pre-compile rules in config/application.rb

config.assets.precompile += 'locales/*.css'

Note that I am white-listing the assets I want to compile into application.css, so the locale specific styles will not get into the application.css.

How can I put CSS style in my I18n locale?

If you want to add something fancy like this to your locale you must add the _html extension to the key.

From the docs

Keys with a '_html' suffix and keys named 'html' are marked as HTML
safe. When you use them in views the HTML will not be escaped.

en:
  welcome_html: "<b>Bolded text</b>"

then just the regular stuff in your views

<%= t('welcome_html')

Access the Locale in Ruby in CSS files

You can add current locale to html tag as lang.
For example

%html{lang: I18n.locale}
<html lang="en"> or <html lang="ru">

and add specific language style with language prefix

html[lang="en"] {
  # for english part
}

html[lang="ru"] {
  # for russian part
}

also you can change behavior existing class

.test-title {
  html[lang="en"] & {
    // specific english style
  }
}

Loading different css files or images based on locale in Rails application

You can just reference the locale when including an asset. Let's say you want to include a stylesheet specific to the current locale :

stylesheet_link_tag "custom_#{I18n.locale}.css"

If the current locale is en, this will look for the custom_en.css file.

A word of warning though : you should make sure to create a file for each locale that you intend to use.

How to format date elements (year, month, date) individually with CSS and Rails i18n?

you could do something like this

date:
  formats:
    styled: ! '<span class="day">%-d</span> <span class="month">%b</span> <span class="year">%Y</span>'

use that format

<span class="date"><%= l Date.today, format: :styled %></span>

and then specify css for those classes

.date .day {} ...

What is the convention in Rails (with asset pipeline) for internationalization inside CSS?

You don't need to generate a new CSS file for each locale - that borders on madness. Why does your CSS care about the text content of your website?

I think your best bet would be to use a data-attribute to grab the value...

<div class='bs-docs-example' data-before-content='<%= t.css_example %>'>
  <!-- html here -->
</div>

And then in your css:

.bs-docs-example:after {
  content: attr(data-before-content);
}

You could probably find a way to extract this into a partial (or helper), so that your erb file ends up like this:

<%= docs_example do %>
  <!-- html here -->
<% end %>

And a helper method:

def docs_example
  content_tag(:div, class: "bs-docs-example", "data-before-content" => t.css_example) do
    yield
  end
end

Rails I18N of CSS File