CSS for the language crowd: simple language switching

Posted on: Sat, 2020-02-01 - 15:45 By: dl7und

Did you know you could create a bilingual static site that only shows one language at a time and switches on flyover, and all that with just HTML and CSS?

CSS is nice, no doubt. Most people think however it is only useful for web designers and graphics people. I like CSS (even though I'm not very familiar with it), and I consider myself neither web designer nor a graphics expert. I am interested in languages, so when I encounter some technology or gadget, I will also check if this can be useful in connection with languages. CSS can.

You may have seen a few tutorials telling you how to switch images on hover/flyover. This is usually done for buttons, like these here at the top. This is also useful for language people, though it is not the topic of this article.

But why always images? Who says you may only "replace" an image? Why not text? And here things are getting interesting. Usually, if you want to offer a bilingual static page, you have a few options: You can create two pages (happens pretty often), you can write both texts into one document, so that languages are interleaving each paragraph, you can put a translation into tooltips or... Or you could employ some CSS to switch the language.

The "magic" goes like this: We have a nameless span that will not be displayed on hover. We have another span with a name that will not be displayed initially, but will show up on hover. The CSS for this is here:

#box :hover span {display: none;}
 #box span.onhover {display: none;}
 #box :hover span.onhover {display: inline;}

Three lines, that is all it takes. Now I can define a div with the id "box", and everything inside it (regular text, headings, links) can apply the "language magic". The HTML should look like this:

<div id="box">

<h3><span>Language 1 Heading</span>

<span class="onhover">Language 2 Heading</span></h3>

<p><span>Language 1 Text</span>

<span class="onhover">Language 2 Text</span></p>


That's it. This procedure has of course some shortcomings. If a paragraph's length differs much in the two languages, then all following text may jump up and down on each hover. So, if you want to use this on something more official, you might want to get all texts somehow equally long. Language people should be used to this anyway, right? ;-)

Have fun...