Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Static Html Website - Bootstrap - Multi language Support

To begin with I want to state that I am newbie in Web Development.

I was asked to build a static website (for a small - size hotel), and I bought this responsive html5 - CSS3 template. It consists of pure html5 - css3 , and some JavaScript for slideshows etc and uses the bootstrap framework.

I have already build the website, and now I was asked to add multilanguage support to it. Can I accomplish this via bootstrap? Can it even be done with CSS?

If not, should I have a copy of all my .html files in a subfolder (e.g "website"/en/"content" ) and redirect the user via a link at the top of the page, or should I use JavaScript to decide the language?

Briefly, I would like a user that visits my website from another country to get the English version of the site, while all others get the default language. I want as fast development as possible (that's why I bought a template) to get up and running asap (summer season has already started). I have a reasonable background in programming, but I am totally new in Web Development.

like image 265
sestus Avatar asked Jun 04 '14 10:06

sestus


People also ask

How do you serve a page with content in multiple languages HTML?

To change the language, just simply set the lang attribute. We can define it anywhere in the document, such as in the body, in the paragraph, in the heading, or in the span tag. But the best practice is to set the lang in the span tag.


1 Answers

You can do this within a single file without using any server-side programming languages. You should check out i18next for a proper javascript solution.

You can also use pure CSS to translate a homepage. Try something like

.en, .de, .it { display:none; } /* hide all elements with a language class */ .en:lang(en), .de:lang(de), .it:lang(it) { display:block; } /* show those elements that match their language class */ 

When you set a proper lang attribute on your html tag (e.g. by javascript) you can translate your page very easy:

<div class="en">Good morning</div> <div class="de">Guten Morgen</div> <div class="it">Ciao</div> 
like image 177
kekub Avatar answered Sep 19 '22 02:09

kekub