• 0

How to make a HTML5/CSS3 website multilingual with 1 click?!


Question

Hello!

 

I'm not a webdesigner, noir a webdeveloper. But I'm making a little website, where I have template website, made of HTML5 + CSS3. My webhost does not support any PHP, and I was wondering if it's possible to make it multilingual with 1 click.

 

I had a little thoery/idea how it could work, but since I have not clue what HTML5 or CSS3 can do, I'm not sure if it's possible to do, anyway, here it goes:

 

The template has a index.html (which has all the text) and loads some .js and .css files for the animations and style.

 

(1) So, immediately my idea was, to replace all the text with a variable, that I store in a .xml/.lang file, where I define each "paragraph" that I have in my index.html. Make this xml file for all language that I have, for example I would have: english.lang (.xml) then german.lang (.xml) and so forth. Then I make a button (or little flags) in the index.html and if you click and english flag, the website replaces all text variables with the once stored in the English one, for German the other, and for the 3rd also. Is this possible, and if, how can I define the .xml/.lang file?

 

(2) My second idea was, to store the text in the ccs file and load the language as "profiles", make also little flags somewhere in the corner and then if 1 is clicked it changes the text shown, just as you make font decrease/increase size with CSS3.

 

(3) ...

 

That's all I had in mind and idea, but as sad....I have no f**** clue how to program the code for it, for me, logically it seam so easily to be done, but maybe in code it's a long walk. Help is much-much appreciated, or any other, more simple or easy idea too.

 

Thanks for reading. :)

17 answers to this question

Recommended Posts

  • 0

get a webhost that does support PHP and do that kind of things server side.

 

In theory, you could do what you are talking about, give every element on the page you want multilang an ID, make language files in JSON (easier to use in js than XML) and replace all the text with javascript. But it really is overly complex and not user friendly.

 

edit: some more explanation of your idea

 

give every element an ID and class, for example <h1 id="title" class="shouldtranslate">the title</h1>

 

go through all the elements with class shouldtranslate with jquery

 

$(".shouldtranslate").each(function()

{

 

//get the id

var id = $(this).attr("id");

 

//get the property in the json with that id and set it as the new content

 

$(this).text(mylanguagejsonobject[id]);

 

});

 

you json would look something like

 

{ title : "le titre" }

 

But as said, don't do that, it's not user friendly

  • 0
  On 17/07/2013 at 09:05, XerXis said:

get a webhost that does support PHP and do that kind of things server side.

 

In theory, you could do what you are talking about, give every element on the page you want multilang an ID, make language files in JSON (easier to use in js than XML) and replace all the text with javascript. But it really is overly complex and not user friendly.

 

Yup. That was my big fear, logically it seems sooooo easy to do and then to code it down, would be like a mess. I'm sad. :( Thou if you say JSON is easier, I will google around a bit, maybe I find something that helps me to start somewhere.

 

Sadly PHP server is not an option, don't want to spend money and something as tiny as this, just a personal website and my domain host simply does not provide PHP, only for "hard money" which I'm not going to spend.

  • 0
  On 17/07/2013 at 09:11, Class said:

Yup. That was my big fear, logically it seems sooooo easy to do and then to code it down, would be like a mess. I'm sad. :( Thou if you say JSON is easier, I will google around a bit, maybe I find something that helps me to start somewhere.

 

Sadly PHP server is not an option, don't want to spend money and something as tiny as this, just a personal website and my domain host simply does not provide PHP, only for "hard money" which I'm not going to spend.

the code wouldn't be a mess, in fact the code only needs to be a few lines (like in my edited post, except you would have to use $.get first to get your json from the server.

 

The problem is, your site would only  work if javascript is enabled and you wouldn't be able to code a fallback. Search engines wouldn't be able to index your site in the other languages, so you would lose visitors because of that. And people with visual disabilities wouldn't be able to use your site either as their screen readers would probably flip out. All in all, very much possible, very much a bad idea

  • 0
  On 17/07/2013 at 09:17, the better twin said:

You could try Google's Ajax Language API.

Heres a tutorial: 

http://www.labnol.org/internet/website-translation-with-google-language-api/4367/

that just does automatic translation, the results are terrible and it has the same drawbacks

  • 0
  On 17/07/2013 at 09:18, XerXis said:

that just does automatic translation, the results are terrible and it has the same drawbacks

Fair enough. Sounds like you have much more experience with this than I do. 

  • 0

Just use JS in this case, make a duplicate off all elements and give each duplicate it's own class (english, german etc) then make sure they're all hidden by default, based on visitor language you can show .english or .german or .whatever with js.

 

Make sure to add a noscript element informing visitors who don;t have js why they don't see anything.

 

 

Edit: http://www.websitecodetutorials.com/code/javascript/multilingual-website-demo1.php here's some js that can help which includes cookies too so they preference stays saved.

  • 0
  On 17/07/2013 at 09:15, XerXis said:

the code wouldn't be a mess, in fact the code only needs to be a few lines (like in my edited post, except you would have to use $.get first to get your json from the server.

 

The problem is, your site would only  work if javascript is enabled and you wouldn't be able to code a fallback. Search engines wouldn't be able to index your site in the other languages, so you would lose visitors because of that. And people with visual disabilities wouldn't be able to use your site either as their screen readers would probably flip out. All in all, very much possible, very much a bad idea

 

Oh, sry, I didn't see you edited. Will take a look right away...

 

Now I got what you mean. True. I don't want to drag actually any visitors. It's just I use the domain mainly for my private email, I just want to have a tiny website behind it, so if by accident someone is think, {oh, let's open that website} there should be something. I just use it in my CV and stuff, it's much better to have not a @gmail.com ending. Will try to think of something else...

 

  On 17/07/2013 at 09:17, the better twin said:

You could try Google's Ajax Language API.

Heres a tutorial: 

http://www.labnol.org/internet/website-translation-with-google-language-api/4367/

 

EDIT: tutorials a bit outdated 

 

Agree, it's pretty outdated and horrible translates coming up.

 

  On 17/07/2013 at 09:18, XerXis said:

that just does automatic translation, the results are terrible and it has the same drawbacks

 

Yup.

 

  On 17/07/2013 at 09:26, the better twin said:

Fair enough. Sounds like you have much more experience with this than I do. 

 

But thanks for the suggestion, it's always welcome. I'm a huge noob myself is coding and stuff.

 

  On 17/07/2013 at 09:48, Seahorsepip said:

Just use JS in this case, make a duplicate off all elements and give each duplicate it's own class (english, german etc) then make sure they're all hidden by default, based on visitor language you can show .english or .german or .whatever with js.

 

Make sure to add a noscript element informing visitors who don;t have js why they don't see anything.

 

 

Edit: http://www.websitecodetutorials.com/code/javascript/multilingual-website-demo1.php here's some js that can help which includes cookies too so they preference stays saved.

 

Actually, that class stuff in .js seems like a good idea, but as I see that site is a PHP code, isn't it? Well, by "inspecting" it, I didn't see any PHP code...so this might work smooth as oiling hot girl on the beach. :D

 

Just to analyze and understand the code a bit....in the header you define 2 css, each having the their own visual setting inside.

<link href="english.css" rel="stylesheet" type="text/css">
<link href="spanish.css" rel="alternate stylesheet" type="text/css" title="alternate">

Then, inside the english.css you just simply hide/block the unwanted text with this:

.spanish {
display:none;
}

in the other, the spanish.css you set:

.spanish {
display:block;
}
li .spanish {
display:inline;
}
.english {
display:none;
}

Back to the original index.html, you setup a java script that makes the switch dynamically:

<script src="styleswitch.js" type="text/javascript"></script>

Which is this code:

function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

Finally, you make 2 buttons/link that command the .js to execute:

<a href="javascript:chooseStyle('none', 60)">English Language</a>
<a href="javascript:chooseStyle('alternate', 60)">Spanish Language</a>

That about it, right?

 

Oh, and you have to make double entries inside the index.html, like this:

<span class="english">English</span>
<span class="spanish">Spanish</span>
  • 0

Doing it client side is going to be pretty crappy (The client will basically end up downloading every page twice + lay it out twice/etc.). This is something ideally suited to a server side templating/framework library, a good one should support it transparently.

  • 0
  On 17/07/2013 at 10:22, The_Decryptor said:

Doing it client side is going to be pretty crappy (The client will basically end up downloading every page twice + lay it out twice/etc.). This is something ideally suited to a server side templating/framework library, a good one should support it transparently.

 

yes, the workload should be on the server, not on the client; you are only making a worse experience for the user if the heavy load is processed client side.

  • 0
  On 17/07/2013 at 10:22, The_Decryptor said:

Doing it client side is going to be pretty crappy (The client will basically end up downloading every page twice + lay it out twice/etc.). This is something ideally suited to a server side templating/framework library, a good one should support it transparently.

 

True. But if that not possible, there is really only 2 options left.

  1. Leave it only english, that (almost) everyone is speaking
  2. Or make a client side "switch" in language....that css + js doesn't seem to do that much of a load for a website that consist only from a index.html, i think. So, in a big scale might be a crappy solution. For a single index.html, shouldn't be the case or?

 

  On 17/07/2013 at 10:58, Praetor said:

yes, the workload should be on the server, not on the client; you are only making a worse experience for the user if the heavy load is processed client side.

 

I have no other idea for it...

  • 0

i'm not sure you *have* to use javascript. I played with XML and XSLT a long time ago, which is very powerful once you figure out the basics of how it works. You can just make multiple XML files each with a different language which contains all the words on the page (using custom structure/tags, since XML uses arbitrary tags), in each XML reference an XSLT stylesheet, which you can use to render it to html, and in the XSLT make reference to a CSS file to style the HTML that just got derived from your XML file. That way you can just have links to each XML file for the different languages, but still only have one-ish place to edit to change the style.

 

obviously, just as hacky as the aforementioned suggestions, the best is still to do it server-side, so much easier.

  • 0

Server side isn't possible in his case (I wonder how he was able to find hosting which is so bad that they don't support php or asp atleast xD).

@primexx isn't using external xml files for each language it actually making worse? since you're doing additional http request :p

 

 

Easiest would be just a index php with language detect from ip and then load the correct php file with "include", I'd just get a better hosting to be honest :/

  • 0
  On 17/07/2013 at 15:37, Seahorsepip said:

Server side isn't possible in his case (I wonder how he was able to find hosting which is so bad that they don't support php or asp atleast xD).

@primexx isn't using external xml files for each language it actually making worse? since you're doing additional http request :p

 

 

Easiest would be just a index php with language detect from ip and then load the correct php file with "include", I'd just get a better hosting to be honest :/

 

well all these workarounds suck. I agree a better host is best.

  • 0
  On 17/07/2013 at 15:37, Seahorsepip said:

Server side isn't possible in his case (I wonder how he was able to find hosting which is so bad that they don't support php or asp atleast xD).

@primexx isn't using external xml files for each language it actually making worse? since you're doing additional http request :p

 

 

Easiest would be just a index php with language detect from ip and then load the correct php file with "include", I'd just get a better hosting to be honest :/

 

It's really cheap! Do don't consider it as a webhost, more like I pay only for the domain and they provide a flat-easy only HTML webhosting for that. It's costs 20EUR for 3 years, aprox less then 30$. So for this price? Will you get a domain name + proper webhosting? Doubt it...or?!

 

Actually, previously I had website where I made my language change with a simple PHP, without knowing PHP even. Anyway, now I have this host, what can I do? I don't want to spend more on then it's actually worth. HTML5 is nice nowadays and in most chases should be enought. 

 

  On 17/07/2013 at 14:18, primexx said:

i'm not sure you *have* to use javascript. I played with XML and XSLT a long time ago, which is very powerful once you figure out the basics of how it works. You can just make multiple XML files each with a different language which contains all the words on the page (using custom structure/tags, since XML uses arbitrary tags), in each XML reference an XSLT stylesheet, which you can use to render it to html, and in the XSLT make reference to a CSS file to style the HTML that just got derived from your XML file. That way you can just have links to each XML file for the different languages, but still only have one-ish place to edit to change the style.

 

obviously, just as hacky as the aforementioned suggestions, the best is still to do it server-side, so much easier.

 

OK. Might dig in a bit into that...althou I started to structure it with the above suggestions.

 

  On 17/07/2013 at 16:07, primexx said:

well all these workarounds suck. I agree a better host is best.

 

True.

  • 0
  On 18/07/2013 at 13:27, Class said:

...

Actually, previously I had website where I made my language change with a simple PHP, without knowing PHP even. Anyway, now I have this host, what can I do? I don't want to spend more on then it's actually worth. HTML5 is nice nowadays and in most chases should be enought. 

...

Just because you can do something on the client, doesn't mean you should (And building the site template is something that should definitely be done on the server)

Yes, you can do a full multi-lingual site with pure HTML/JS, but you don't want to because it creates a bad experience for the user specifically.

This topic is now closed to further replies.
  • Posts

    • No mention of the new Apple TV 8K?
    • I really hate it that I can't access the historical changes in my notes and if I accidentally delete large portions of the text which happens more often than not, sometimes, there's no recovering. There should always be a way to go backwards in time, simply because we have iCloud. And why is there no normal export capability? There should be a historical-change-back up and export capability.
    • SeaMonkey 2.53.21 by Razvan Serea The SeaMonkey project is a community effort to develop the SeaMonkey all-in-one internet application suite. Such a software suite was previously made popular by Netscape and Mozilla, and the SeaMonkey project continues to develop and deliver high-quality updates to this concept. Containing an Internet browser, email & newsgroup client with an included web feed reader, HTML editor, IRC chat and web development tools, SeaMonkey is sure to appeal to advanced users, web developers and corporate users. Under the hood, SeaMonkey uses much of the same Mozilla source code which powers such successful siblings as Firefox, Thunderbird, Camino, Sunbird and Miro. Legal backing is provided by the Mozilla Foundation. SeaMonkey 2.53.21 changelog: Unable to load JSON Bookmarks file, Open/Cancel do the same thing bug 1940204. Move replaceVars helper into menu-manager.js for cZ bug 1937379. Remove dumpObject helper from utils.js in cZ bug 1937380. Remove toOpenWindowByType helper from utils.js in cZ bug 1937382. Fix makeLogName helper to not encode twice in prefs.js in cZ bug 1937387. Remove use of escapeFileName helper and tidy up pref_mungeName helper in cZ bug 1937395. Add helper to file-utils.js for ensuring an nsIFile is returned in cZ bug 1937397. Remove unused http.js file from cZ bug 1937890. Remove unused IRC tests from static.js in cZ bug 1937896. Switch from deprecated escape/unescape in cZ bug 1938933. Tidy up use of prefBranch outside of pref-manager in cZ bug 1938935. Make use of pref fallbacks in pref-manager in cZ bug 1938937. Remove unused edit context menu from cZ bug 1939929. Use XPCOMUtils.generateQI in connection-xpcom in cZ bug 1939930. Merge menus.xul, popups.xul and scripts.xul into chatzilla.xul bug 1939958. Make use of toSOutputStream and toSInputStream helpers in DCC code in cZ bug 1939965. Stop hard-coding commandkey for reloadui in cZ bug 1939968. Use suite's FillInHTMLTooltip helper instead of having own version in cZ bug 1939969. Split custom-away from other away/back commands in cZ bug 1942655. Remove ChatZilla Homepage link from Help menu and about command in cZ bug 1942916. Re-arrange toolbar menus in cZ bug 1943783. Remove ChatZilla Homepage link from about and prefs dialogs in cZ bug 1943844. Use custom controller for userlist and tidy up some controller use in cZ bug 1945325. Make use of observes for show/hide elements in cZ bug 1945378. Don't dynamically create focus-input key element in cZ bug 1947028. Remove unused toolbar creation code in cZ bug 1947030. Remove unused updateMenus code from cZ bug 1947031. Clean up whitespaces in cZ package manifest bug 1947040. Remove unused uninstallKeys code from cZ bug 1950002. Use node.remove(), especially instead of node.parentNode.removeChild(node) in cZ bug 1951250. Remove __cz_condition from cZ bug 1951253. Remove outputWindowURL pref from cZ bug 1951256. Remove unused JS tests in cZ bug 1951297. Use includes, startsWith and endsWith instead of indexOf and substr in cZ bug 1951302. Use {} and [] instead of new Object() and new Array() in cZ bug 1951303. Fixup function naming for lint in cZ bug 1955141. Fixup method naming for lint in cZ bug 1955767. Remove old Mozilla 1.0 code from updateAppMotif in cZ bug 1955771. Use throw Components.Exception in cZ bug 1955774. Migrate output-window from HTML to XHTML to make localisation more standard in cZ bug 1955825. Merge munger.js into mungers.js in cZ bug 1956373. Remove unused tagName from mungers.js in cZ bug 1956374. Flatten directory structure in cZ bug 1956375. Tidy up about dialog page in cZ bug 1956376. Add helper to commands.js for sending CTCP commands in cZ bug 1956377. Migrate to standard menus for menu toolbar in cZ bug 1957763. Install plugin dialog broken in cZ bug 1961599. cZ change nick menu not working bug 1962112. Away status isn't reflected correctly in all channels in cZ bug 1962234. Fix dark motif userlist in cZ bug 1967072. SeaMonkey Composer adds moz-do-not-send attribute for links and images bug 1827146. Use menu_Toolbars overlay for navigatorOverlay and console bug 1945335. Remove defunct 2.53 prerelease builds from debugQA extension bug 1947043. Handling of MOZ_LANGPACK_CONTRIBUTORS in defines.inc files should be less custom bug 1951101. Control + U shortcut for underlined text is not working bug 1872514. Context menu search (with default search engine) does not work in the content area of a message compose or SM-Composer window bug 1062092. The following bugs were fixed in our branch of the Gecko source code only: on FreeBSD sqlite3 fails to link for missing math functions bug 1944954. Expand init.configure to use version_package.txt to set MOZ_PKG_VERSION bug 1952757. Change supported msvc Compilers for SeaMonkey 2.53 bug 1954176. SeaMonkey 2.53.21 contains (among other changes) the following major changes relative to SeaMonkey 2.49.5: The Bookmarks Manager has switched its name to Library, and now also includes the History list. When History is invoked, the Library will be shown with the History list selected. The extensive modifications were needed because of Mozilla Gecko platform API changes. Download Manager has been migrated to a new API. Although it looks pretty much the same as before, the search option is missing and some other minor details work differently. The previous downloads history is removed during the upgrade. The layout panel was added to the CSS Grid tools. TLS 1.3 is the default SSL version now. Support for all NPAPI plugins like Flash, Java and Silverlight has been removed. For displaying pdf files in the browser you can use pdf.js-seamonkey from Isaac Schemm. SeaMonkey now uses a new api for formatting regional data like time and date. Default is to use the application locale of the current SeaMonkey build. If you use a language pack or a different OS formatting this is usually not desired. You can change the formatting from the application locale to the regional settings locale (OS) in the preferences dialog under "Appearance". SeaMonkey 2.53.21 uses the same backend as Firefox and contains the relevant Firefox 60.8 security fixes. Download: SeaMonkey 64-bit | Portable SeaMonkey 64-bit ~60.0 MB (Freeware) Download: SeaMonkey 32-bit | Portable SeaMonkey 32-bit View: SeaMonkey Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • It doesn't work for the view, but the music gets me every time:  
  • Recent Achievements

    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
    • Week One Done
      jfam earned a badge
      Week One Done
    • First Post
      survivor303 earned a badge
      First Post
    • Week One Done
      CHUNWEI earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      428
    2. 2
      +FloatingFatMan
      207
    3. 3
      snowy owl
      194
    4. 4
      ATLien_0
      191
    5. 5
      Xenon
      141
  • Tell a friend

    Love Neowin? Tell a friend!