A Nice Language Switching Widget
I’ve been looking out for ways to format multilingual content in blog entries—we intend to eventually start having translated content in the present blog as a test case.
Simple interfaces are the best, and I ran across a simple intuitive, implementation of “language toggling,” if you will:
You can see from our astonishing animated GIF technology that the content changes right there in place: click on the language you want to see, there it is, right there.
It hardly even merits the title of “widget.” But the best interfaces are like that—they’re so simple you might not even notice them, or even if you do, you don’t stop to think that there could be another way.
I like this because the text remains in place, and you don’t have to wait for the whole page to reload, since it’s just toggling the visibility of two divs with some Javascript.
- Somehow highlight the name of the “current” language—put the language names in tabs or something?
- It should be possible not just to toggle between languages in a single post, but also to save preferences for the blog as a whole.
Some techier notes…
That said, the Javascript itself is inline: it’s coded right into the onclick attribute of the links. I poked about in the navigation of Wouter’s site, and this language toggling functionality doesn’t seem to be applied to other posts on seweso (they seem to be either in Dutch or English, but never both as in this post). So this was probably a quick solution—and it works very well as such.
For a blog that has regular multilingual content, then (and possibly some views in Blogamundo’s aggregator), this kind of functionality would be available on every post.
Which would probably involve one final change:
- Factor out the Javascript into external files that can be used for more than one post.
This leaves the question of how to mark up all this stuff. I believe it’s possible to select divs with Javascript by referring to the lang attribute, so maybe it’d be something like… er, this is a whole ‘nother ball of wax.
I’ll get back to you, we’ll do lunch.
I have one bilingual website (hideout.com.br) and there we use the classname of the divs as the hooks and store the preference on a cookie. Very simple to switch css rules, but IE unfortunately is not a good DOM friend, so we had to do a loop within all divs on the webpage to work crossbrowser…
Ah, very interesting Fabricio… I see that your markup looks like this:
Português
|
English
This is really close to what I had in mind; the only change I would make would be to try to factor the javascript calls out of the
hrefs and put them into a separate .js file — that way, if the user had javascript turned off, the links would still work.Thanks for the comment! Jonas mentioned you might leave one.
PS. I like your taste in music. ☺
Hi Patrick, you should try the Behaviour, its very neat for organization, leave the normal href and attach the js to onclick must work for both javascript enabled and disabled.
The language switch of our website was made by Gustavo (Smeg) one of the editors, it is almost one year old, maybe we will adapt it to normal hrefs some time…
I’ve commented with Jonas that my comment was flaged as spam :) It has been good to follow the blog posts here.
Hmm, yeah I have looked at Behavior, it’s pretty neat. I wonder if the guy who wrote it will update it to use the “new” addEvent function that they came up with at PPK’s contest? It seems that the winner has caused some controversy of its own.
As for the spam problem, I think we’ve resolved it! *crosses fingers*
[...] Use good markup. See what Kevin wrote sometime back. Make it nice for both polyglot and monoglot visitors. Inspiration? [...]