Offline.js - Multi-language

Question

I am use Offline.js. Offline.js is a library to automatically alert your users when they've lost internet connectivity.

The Offline.js provide the different language in the css file but each one language contains his css file.

In my website I detect user language and I show the words in his language for a good user experience.

Can you adapt this library for that?

Thanks

You mean dynamically change the language file loaded by Offline.js, using code external to Offline.js's code? — Jared Farrish, Oct 17 '15 at 17:32
I want to find a way to dynamically change the language. I did not see offline.js has that feature — saeta, Oct 17 '15 at 17:40
As mentioned in @KyleFalconer's comment, you can dynamically load the language-appropriate CSS file or create it dynamically using `document.createElement('style')`. — Jared Farrish, Oct 17 '15 at 17:45
then load the particular language css file only after detecting the language using javascript — J Santosh, Oct 17 '15 at 18:22

André B. · Answer 1 · 2016-04-08T20:17:54.297

If you use less, you can import contextualize the css like this:

@import (inline) '../../bower_components/offline/themes/offline-theme-default.css';

.language-de {
  @import (less) '../../bower_components/offline/themes/offline-language-german.css';
}

.language-en {
  @import (less) '../../bower_components/offline/themes/offline-language-english.css';
}

You can then switch the language by setting the language-... class on your <body> element for example.

UPDATE: If you use the cleancss tool, make sure that you add '@charset "UTF-8";' in your main LESS file... otherwise there will be an @charset inside a block and cleanncss will mess up your CSS.

UPDATE: SASS can import css as well. Like that:

@import '../../bower_components/offline/themes/offline-theme-default';

.language-de {
  @import '../../bower_components/offline/themes/offline-language-german';
}

.language-en {
  @import '../../bower_components/offline/themes/offline-language-english';
}

Offline.js - Multi-language

1 Answers1