Tutorial - creating a bilingual site

rainforest1155 · Nov-21-2005, 03: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<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!

Mike Lane · Nov-21-2005, 03: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, 03: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, 07: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, 07: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, 07: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, 01: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, 06: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, 09: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, 12:48 PM

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

Nov-21-2005, 03:20 PM	#1
rainforest1155 with a SmugMug Her0es touch Join Date: Jun 2004 Location: Leipzig, Germany Posts: 2,483	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 04:08 AM. Reason: Added support for browser's without javascript!

Nov-21-2005, 03:28 PM	#2
Mike Lane I � Unicode Join Date: Feb 2005 Location: Faringdon, UK Posts: 7,058	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, 12:48 PM	#10
rainforest1155 with a SmugMug Her0es touch Join Date: Jun 2004 Location: Leipzig, Germany Posts: 2,483	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)

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