All geek questions in one place

Rails I18n CSS File

I am trying to internationalize my site, and it is one thing to use different fonts for different languages. It is also necessary to replace some text images.

I think the only way to do this is to have additional locale-specific CSS files in the shared folder and load them depending on the language in my view. This avoids asset conditions from compiling these specific CSS files. But I wonder if there is a better way to do this?

+6
source share
3 answers

Your best bet in an organization is to have different stylesheets specific to localization, and then set up a condition in your layout on which stylesheets will be displayed based on the locale.

Just set only the local specific style, and if you think about it ... it should not have a big impact on the load time, because I believe that you only change the font size.

UPDATE from OP:

Here is what I set up to work:

  • I created the locales directory in app/assets/stylesheets
  • I put internal locale style sheets inside e.g. fr.sass
  • I set a condition in layouts/application.html.erb to link to css files: <% if I18n.locale != :en %> <%= stylesheet_link_tag "locales/" + I18n.locale.to_s %> <% end %>
  • I set precompilation rules in config/application.rb

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

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

+11
source

I agree with Onno. I needed very simple changes, so I added the language as a language tag as described in this answer: fooobar.com/questions/908607 / ...

Html:

 <html lang="<%= I18n.locale || 'en' %>">

Sass:

 body { font-family:verdana,arial,helvetica,sans-serif; html[lang="jp"] & { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; } }
+4
source

You can also use locale specific class attributes in html rendered. I think this is the best / best way to achieve what you want. Inclusion of css in the publication is not so pleasant.

+2
source

Source: https://habr.com/ru/post/908606/

More articles:


All Articles