Tutorial - creating a bilingual site

rainforest1155 · Nov-21-2005, 02:20 PM

Had some fellow dgrinners over here helping me in creating my dual language site. Now I did create a little tutorial out of it, because I already got 2 mails asking for some help in getting this done (Michael and James

).
It all got a bit technical, so if you've got any problems or questions, feel free to ask!
If someone got solutions for the problems I listed at the end, I would be very glad!

Here we go:
Copy this into your Javascript section:

Code:

//-------start of StyleSheetSwitch Code
// add your own reliable webspace where you'll have to put lang1_file and lang2_file
// don't add a '/' at the end of the server address - this is done later!!
var _g_myServer = "http://your-webspace.com/path-to-lang-css-files";
var lang1 = "english";
var lang1_file = "eng.css";
var lang2 = "german";
var lang2_file = "ger.css";
 
function readCookieStyle(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
 
function createCookieStyle(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
 
function setSheet(lang) {
createCookieStyle("style", lang, 365);
location.reload();
}
 
function includeBrowserCSS()
{
document.writeln("<style type=\"text/css\">");
var lang;
var lang_file;
var cookie = readCookieStyle("style");
if (cookie == lang1) {
lang = lang1;
lang_file = lang1_file;
}
if (cookie == lang2) {
lang = lang2;
lang_file = lang2_file;
}
// when no cookie is found, use lang1 as standard language
if (cookie != lang1 && cookie != lang2) {
lang = lang1;
lang_file = lang1_file;
}
document.writeln("@import url("+_g_myServer+"/"+lang_file+");");
document.writeln("</style>");
createCookieStyle("style", lang, 365);
}
//------ end of StyleSheetSwitch Code

Replace the variables (_g_myServer, lang1, lang1_file, lang2, lang2_file) with your own information. As you see, you need some sort of reliable webspace to host the two simple css files turning one or another language on your smugmug-page on.

The following part launches the whole script and now goes into the head-tag
(if you have the following lines still in your header-section please remove them from their)
New: added <noscript>-tag that sets a standard language for visitors without javascript-support. Just replace my sample link with the full address to the language-css-file of your choice (in my case I set the default to English with eng.css).

Code:

<script language="javascript">
includeBrowserCSS();
</script>
<noscript><link rel="stylesheet" type="text/css" href="http://your-webspace.com/path-to-lang-css-files/eng.css"></noscript>

Now comes the language switcher in the footer. On click this creates a cookie with the selected language:

Code:

<a href="#top" onclick="setSheet(lang1);return false;">English</a>
<a href="#top" onclick="setSheet(lang2);return false;">Deutsch</a>

Now come the little css-files which need to be hosted externally:
eng.css:

Code:

.ger {display:none;}

ger.css:

Code:

.eng {display:none;}

The external hosted css-files should be pretty self-explanatory. In the eng.css the '.ger'-class is hidden and in the ger.css the '.eng'-class is hidden.

After you've done all this you should be able to add bi-lingual captions, gallery descriptions and a bio. This is done according to a scheme where both languages are surrounded by a span-tag and only one of the tags is displayed according to the user's language choice. It goes like this:

<html>Text that is displayed independent from any language choice Deutscher Text - German text English text - notice the space after the beginning span-tag: It's to separate the language specific text from the language independent text.</html>

Problems:
- doesn't work in previewed descriptions on homepage and category navigation, because html is filtered there
- also doesn't work in traditional view, smugmaps and full screen slideshow, because html is filtered out of the caption. This displays both languages.
- alt-tag (when image can't be displayed) always contains both languages (html is filtered)
- both languages are shown when external server isn't availiable

Hope this is useful for some of you. It might be even possible to simply add some more languages. In thinking about it I didn't see any problems, but there might occur some in the actual realization. If someone's interested, we could work this out together.

Sebastian

EDIT: Updated the script according to the new customization options of smugmug from 11/27 (see big, bold text in my post). No more need for CSS-hacks - it's now according to the standards.

EDIT2: Include support for browser's having javascript disabled - instead of seeing both languages they get one default language set by you!

Mike Lane · Nov-21-2005, 02:28 PM

Does this work anymore considering that you cannot hack the CSS box to insert stuff into the header? If so, how do you get around it?

rainforest1155 · Nov-21-2005, 02:33 PM

Quote:

Originally Posted by Mike Lane

Does this work anymore considering that you cannot hack the CSS box to insert stuff into the header? If so, how do you get around it?

As Anton gets around it by running the script from within the body in the smugmug-header, which is somehow illegal, but seems to work at least in IE and Firefox. I've no idea on how to get it done without it.

Sebastian

flyingdutchie · Nov-21-2005, 06:10 PM

Quote:

Originally Posted by rainforest1155

As Anton gets around it by running the script from within the body in the smugmug-header, which is somehow illegal, but seems to work at least in IE and Firefox. I've no idea on how to get it done without it.

Sebastian

It actually seems to work on even more (modern) browsers, such as Netscape, Opera, and i think even Safari.

The 'illegal' parts are adding <link> elements (acting as links to external CSSs), through javascript, after the <body> link as been opened. But, i guess, as long as one does this before any other (visual) element within the <body> tag has been started/opened, it is fine.

flyingdutchie · Nov-22-2005, 06:06 PM

Quote:

Originally Posted by flyingdutchie

It actually seems to work on even more (modern) browsers, such as Netscape, Opera, and i think even Safari.

The 'illegal' parts are adding <link> elements (acting as links to external CSSs), through javascript, after the <body> link as been opened. But, i guess, as long as one does this before any other (visual) element within the <body> tag has been started/opened, it is fine.

The 'illegal' placement is handled awkwardly by Netscape 7 (i don't know about version 8) and especially Opera 8 (and up?). This is what happens:
First the page is loaded only using the style-sheets specified inside the <HEAD> tag! You'll see this first (default smugmug style). Then a fraction of a second later, the CSS is loaded from the 'illegal' spot and the new CSS selectors will be applied and the page looks OK. But this 'flashing' effect is bothersome!

flyingdutchie · Nov-22-2005, 06:25 PM

Quote:

Originally Posted by flyingdutchie

The 'illegal' placement is handled awkwardly by Netscape 7 (i don't know about version 8) and especially Opera 8 (and up?). This is what happens:
First the page is loaded only using the style-sheets specified inside the <HEAD> tag! You'll see this first (default smugmug style). Then a fraction of a second later, the CSS is loaded from the 'illegal' spot and the new CSS selectors will be applied and the page looks OK. But this 'flashing' effect is bothersome!

Even IE and FireFox seem to have some issues with it:
The page goes white for a fraction of a second before redrawing the page as it should be.

rainforest1155 · Nov-23-2005, 12:47 AM

Quote:

Originally Posted by flyingdutchie

The 'illegal' placement is handled awkwardly by Netscape 7 (i don't know about version 8) and especially Opera 8 (and up?). This is what happens:
First the page is loaded only using the style-sheets specified inside the <HEAD> tag! You'll see this first (default smugmug style). Then a fraction of a second later, the CSS is loaded from the 'illegal' spot and the new CSS selectors will be applied and the page looks OK. But this 'flashing' effect is bothersome!

Hm, that's strange. I did a test with Netscape 7.2 and Opera 8.5 Build 7700 and I didn't notice this behaviour. No flashing as this should be pretty good visible on my homepage, as the bio is very long in both languages. I did it a couple of times and cleared the cache every time, because I thought my eyes weren't awake yet, but I see nothing in both browsers.

I also checked your site...it's fine. I'm on Win2000 - maybe that's a factor.

I remember setting my Opera to that it should reveal itself as Opera and not as IE which was set after installing it.

Thanks for taking the time to check this!
Sebastian

flyingdutchie · Nov-23-2005, 05:52 AM

Quote:

Originally Posted by rainforest1155

Hm, that's strange. I did a test with Netscape 7.2 and Opera 8.5 Build 7700 and I didn't notice this behaviour. No flashing as this should be pretty good visible on my homepage, as the bio is very long in both languages. I did it a couple of times and cleared the cache every time, because I thought my eyes weren't awake yet, but I see nothing in both browsers.

I also checked your site...it's fine. I'm on Win2000 - maybe that's a factor.

I remember setting my Opera to that it should reveal itself as Opera and not as IE which was set after installing it.

Thanks for taking the time to check this!
Sebastian

I removed my external CSS and JavaScript files and put them into the co-branding fields in smugmug. Only the 'includeBrowserCSS()' genernates links to external CSS files. This fixed most, if not all, 'flashing' on IE. It fixed all 'flashing' on FireFox and minized it on most other browsers (but still visible).

I think the biggest problem is this:
When the browser encounters an open <BODY> tag, it draws a background. If no CSS yet loaded, the background is white. If a CSS is loaded, the style of the BODY is applied (including any background images). If the CSS is loaded before the BODY tag --> No 'flashing'. If the CSS is loaded after opening the BODY tag --> 'Flashing'.

Also, loading a javascript file after the open <BODY> tag takes a little extra time --> The 'flash' last longer before the BODY (and the rest) draws itself correctly.

By adding my main CSS and main JavaScript to the co-branding fields instead, the CSS and JavaScripts are loaded in the HEAD, before the BODY --> no more flashing.

rainforest1155 · Nov-23-2005, 08:42 AM

Quote:

Originally Posted by flyingdutchie

I removed my external CSS and JavaScript files and put them into the co-branding fields in smugmug. Only the 'includeBrowserCSS()' genernates links to external CSS files. This fixed most, if not all, 'flashing' on IE. It fixed all 'flashing' on FireFox and minized it on most other browsers (but still visible).
[...]
By adding my main CSS and main JavaScript to the co-branding fields instead, the CSS and JavaScripts are loaded in the HEAD, before the BODY --> no more flashing.

Then you shouldn't notice any (big) issues on my page? The only thing I use the 'includeBrowserCSS()' for is to show the caption and bio for the corresponding language. Sure there's some Javascript in it to read and write the cookie, but that shouldn't take too long.

Sebastian

rainforest1155 · Nov-28-2005, 11:48 AM

Updated the script according to the new customization options of smugmug from 11/27 (see big, bold text in my first post). No more need for CSS-hacks - it's now according to the standards.

Have fun,
Sebastian

flyingdutchie · Nov-28-2005, 12:12 PM

Quote:

Originally Posted by rainforest1155

Updated the script according to the new customization options of smugmug from 11/27 (see big, bold text in my first post). No more need for CSS-hacks - it's now according to the standards.

Have fun,
Sebastian

I must give Smugmug an A+ for listening to their customers!

Mike Lane · Nov-28-2005, 03:04 PM

Quote:

Originally Posted by flyingdutchie

I must give Smugmug an A+ for listening to their customers!

Me too!

rainforest1155 · Nov-28-2005, 03:33 PM

Quote:

Originally Posted by Mike Lane

Quote:

Originally Posted by flyingdutchie

I must give Smugmug an A+ for listening to their customers!

Me too!

I guess this leaves me just this option:
Triple Hip-Hip-Horaaay to our favorite support team!!

Sebastian

tibu · Jan-02-2006, 04:00 AM

Hi all

I'm following your code and trying to implement the same in my site now that I have a power account. I want to thank for your work, it is really interesting.

One thing. Is it possible to change the other text in the page as well? I mean I'd like in my bilingual (Spanish and English) site to be able to use (Gallery/Galería) when appropriate. Any ideas

Carlos

rainforest1155 · Jan-02-2006, 05:42 AM

Quote:

Originally Posted by tibu

One thing. Is it possible to change the other text in the page as well? I mean I'd like in my bilingual (Spanish and English) site to be able to use (Gallery/Galería) when appropriate. Any ideas

Carlos,

maybe this could be done using some more JavaScript, but I guess it's only possible after the page has loaded. That means the standard English words would be visible for a second and then replaced by Spanish.
Also it's kind of hard to exactly specify the words to replace, because there's no specific tag to mark them.
This is how the source code looks for the 'Gallery Pages' in smugmug view:
<div class="pageNav leftColumn nav">gallery pages:...

Maybe one could search for pageNav-class + title-class and if there's a string called 'gallery page' replace it with 'galería paginas'. I don't know if this would work for all the styles.
Then you would have to look at the source of all other English words and try to find tags that are connected to them.

Or you might simply do a full text search in the whole document for all words to replace without the need to check for tags. Would that be slower or perhaps even faster??

Just throwing in some ideas - I've got no clue on the programming itself. Any JavaScripter got some ideas on the realization?

Glad my tutorial was of some use for you! Maybe you can share your site with us - I would like to see how it turned out on your site. It's always nice to see how others implemented it.

Sebastian

tibu · Jan-03-2006, 01:55 AM

Hi

I'll try to create this kind of bilingual site. I'm not very convinced it is possible without some markets but let's see.
I'm a programmer btu I haven't done JavaScript for a while

Carlos

Mike Lane · Jan-03-2006, 05:55 AM

Quote:

Originally Posted by tibu

Hi

I'll try to create this kind of bilingual site. I'm not very convinced it is possible without some markets but let's see.
I'm a programmer btu I haven't done JavaScript for a while

Carlos

Without some markets? What does that mean?

tibu · Jan-03-2006, 11:57 AM

Hi

I was meaning markers (not markets), I'm crossing nomenclature from other project I'm working on :-)

Carlos

Mike Lane · Jan-03-2006, 12:06 PM

Quote:

Originally Posted by tibu

Hi

I was meaning markers (not markets), I'm crossing nomenclature from other project I'm working on :-)

Carlos

That's what the classes are for

tibu · Jan-04-2006, 02:00 AM

Hi

Actually there is a "simple" way to do it. You could manipulate the DOM tree, find the elements you want and replace the text by a transalted version. What I'm afraid is that finding the elements is difficult since they don't have ids. So you have to identify them by position and that will certainly make the script very brittle. For instance to change the "help" text on the top corner I used

Code:

var headerDiv = document.getElementById("toolbar");
if (headerDiv) {
headerDiv.childNodes[5].firstChild.nodeValue = "Ayuda";
}

But if the DOM tree were to change, for example when using a custom header, this will totally kill the code above.

It would be much better that each element had an id. For example that the "help" html tag would be

Code:

<a href="http://www.smugmug.com/help" class="nav" id="i18n.help">help</a>
instead of
<a href="http://www.smugmug.com/help" class="nav">help</a>

That should allow you to use the getElementById("i18n.help") method directly

I have still to check if this works properly everywhere and also link it to the original code that Sebastian created so that you could select what language to use

Carlos

Nov-21-2005, 02:20 PM	#1
rainforest1155 with a SmugMug Her0es touch Join Date: Jun 2004 Location: Leipzig, Germany Posts: 2,631	Tutorial - creating a bilingual site Had some fellow dgrinners over here helping me in creating my dual language site. Now I did create a little tutorial out of it, because I already got 2 mails asking for some help in getting this done (Michael and James ). It all got a bit technical, so if you've got any problems or questions, feel free to ask! If someone got solutions for the problems I listed at the end, I would be very glad! Here we go: Copy this into your Javascript section: Code: //-------start of StyleSheetSwitch Code // add your own reliable webspace where you'll have to put lang1_file and lang2_file // don't add a '/' at the end of the server address - this is done later!! var _g_myServer = "http://your-webspace.com/path-to-lang-css-files"; var lang1 = "english"; var lang1_file = "eng.css"; var lang2 = "german"; var lang2_file = "ger.css"; function readCookieStyle(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function createCookieStyle(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days2460601000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function setSheet(lang) { createCookieStyle("style", lang, 365); location.reload(); } function includeBrowserCSS() { document.writeln("<style type=\"text/css\">"); var lang; var lang_file; var cookie = readCookieStyle("style"); if (cookie == lang1) { lang = lang1; lang_file = lang1_file; } if (cookie == lang2) { lang = lang2; lang_file = lang2_file; } // when no cookie is found, use lang1 as standard language if (cookie != lang1 && cookie != lang2) { lang = lang1; lang_file = lang1_file; } document.writeln("@import url("+_g_myServer+"/"+lang_file+");"); document.writeln("</style>"); createCookieStyle("style", lang, 365); } //------ end of StyleSheetSwitch Code Replace the variables (_g_myServer, lang1, lang1_file, lang2, lang2_file) with your own information. As you see, you need some sort of reliable webspace to host the two simple css files turning one or another language on your smugmug-page on. The following part launches the whole script and now goes into the head-tag (if you have the following lines still in your header-section please remove them from their) New: added <noscript>-tag that sets a standard language for visitors without javascript-support. Just replace my sample link with the full address to the language-css-file of your choice (in my case I set the default to English with eng.css). Code: <script language="javascript"> includeBrowserCSS(); </script> <noscript><link rel="stylesheet" type="text/css" href="http://your-webspace.com/path-to-lang-css-files/eng.css"></noscript> Now comes the language switcher in the footer. On click this creates a cookie with the selected language: Code: <a href="#top" onclick="setSheet(lang1);return false;">English</a> <a href="#top" onclick="setSheet(lang2);return false;">Deutsch</a> Now come the little css-files which need to be hosted externally: eng.css: Code: .ger {display:none;} ger.css: Code: .eng {display:none;} The external hosted css-files should be pretty self-explanatory. In the eng.css the '.ger'-class is hidden and in the ger.css the '.eng'-class is hidden. After you've done all this you should be able to add bi-lingual captions, gallery descriptions and a bio. This is done according to a scheme where both languages are surrounded by a span-tag and only one of the tags is displayed according to the user's language choice. It goes like this: <html>Text that is displayed independent from any language choice<span class="ger"> Deutscher Text - German text</span><span class="eng"> English text - notice the space after the beginning span-tag: It's to separate the language specific text from the language independent text.</span></html> Problems: - doesn't work in previewed descriptions on homepage and category navigation, because html is filtered there - also doesn't work in traditional view, smugmaps and full screen slideshow, because html is filtered out of the caption. This displays both languages. - alt-tag (when image can't be displayed) always contains both languages (html is filtered) - both languages are shown when external server isn't availiable Hope this is useful for some of you. It might be even possible to simply add some more languages. In thinking about it I didn't see any problems, but there might occur some in the actual realization. If someone's interested, we could work this out together. Sebastian EDIT: Updated the script according to the new customization options of smugmug from 11/27 (see big, bold text in my post). No more need for CSS-hacks - it's now according to the standards. EDIT2: Include support for browser's having javascript disabled - instead of seeing both languages they get one default language set by you! __________________ look on the bright side http://www.SebastianHosche.com (smugmug name: rainforest1155) Last edited by rainforest1155; May-20-2006 at 03:08 AM. Reason: Added support for browser's without javascript!

Nov-21-2005, 02:28 PM	#2
Mike Lane I � Unicode Join Date: Feb 2005 Location: Dover, DE Posts: 7,059	Does this work anymore considering that you cannot hack the CSS box to insert stuff into the header? If so, how do you get around it? __________________ Y'all don't want to hear me, you just want to dance. http://photos.mikelanestudios.com/

Nov-28-2005, 11:48 AM	#10
rainforest1155 with a SmugMug Her0es touch Join Date: Jun 2004 Location: Leipzig, Germany Posts: 2,631	Smugmug update 11/27 Updated the script according to the new customization options of smugmug from 11/27 (see big, bold text in my first post). No more need for CSS-hacks - it's now according to the standards. Have fun, Sebastian __________________ look on the bright side http://www.SebastianHosche.com (smugmug name: rainforest1155)

Jan-02-2006, 04:00 AM	#14
tibu Big grins Join Date: Apr 2004 Location: Finland Posts: 71	Really nice Hi all I'm following your code and trying to implement the same in my site now that I have a power account. I want to thank for your work, it is really interesting. One thing. Is it possible to change the other text in the page as well? I mean I'd like in my bilingual (Spanish and English) site to be able to use (Gallery/Galería) when appropriate. Any ideas Carlos

Jan-03-2006, 01:55 AM	#16
tibu Big grins Join Date: Apr 2004 Location: Finland Posts: 71	I'm gonna try Hi I'll try to create this kind of bilingual site. I'm not very convinced it is possible without some markets but let's see. I'm a programmer btu I haven't done JavaScript for a while Carlos __________________ http://tibu.smugmug.com

Jan-03-2006, 11:57 AM	#18
tibu Big grins Join Date: Apr 2004 Location: Finland Posts: 71	My mistake Hi I was meaning markers (not markets), I'm crossing nomenclature from other project I'm working on :-) Carlos __________________ http://tibu.smugmug.com

Jan-04-2006, 02:00 AM	#20
tibu Big grins Join Date: Apr 2004 Location: Finland Posts: 71	Using the DOM Hi Actually there is a "simple" way to do it. You could manipulate the DOM tree, find the elements you want and replace the text by a transalted version. What I'm afraid is that finding the elements is difficult since they don't have ids. So you have to identify them by position and that will certainly make the script very brittle. For instance to change the "help" text on the top corner I used Code: var headerDiv = document.getElementById("toolbar"); if (headerDiv) { headerDiv.childNodes[5].firstChild.nodeValue = "Ayuda"; } But if the DOM tree were to change, for example when using a custom header, this will totally kill the code above. It would be much better that each element had an id. For example that the "help" html tag would be Code: <a href="http://www.smugmug.com/help" class="nav" id="i18n.help">help</a> instead of <a href="http://www.smugmug.com/help" class="nav">help</a> That should allow you to use the getElementById("i18n.help") method directly I have still to check if this works properly everywhere and also link it to the original code that Sebastian created so that you could select what language to use Carlos __________________ http://tibu.smugmug.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode