Why it can be hard to style a multilingual site

One of the great advantages of Wordpress is that you can quickly add plugins that give you configurable functionality without writing a tonne of code that you will then have to support all by yourself. However most plugins have not been designed with multilingual support and adding extra language fields to a plugin would probably take you so far from the core product that you are effectively on your own again for support.

That’s why I’ve been working on some minimal-code approaches to making all aspects of my sites multilingual. Most of it is done with CSS; a small amount of PHP is also used.

Great plugins to get you started

My research in late 2009 showed the WPML plugin as being really easy for content contributors/editors to use yet powerful enough to satisfy the creator/administrator of the site.

One of the really important things WPML does is to create pages which have the language declaration correct in the HTML header. It also defines a language constant which you can use in PHP, to help those browsers (IE7 and Safari) which don’t recognise all the web standards needed for simple multilingual sites.

I also like the straight-forward usability of the Events plugin by Arnan de Gans. It doesn’t support multiple languages directly, but so long as you aren’t creating hundreds of calendar entries it can be configured easily to go multilingual.

The lang selector – almost perfect

There is almost a perfect way of using CSS to solve all (well many) of your multilingual development challenges. It is the lang selector. Here’s an example of how you can use it in a stylesheet to change a background according to language:

#branding:lang(es) { background url('branding_bg_es.jpg'); }
#branding:lang(en) { background url('branding_bg_en.jpg'); }

This tells the browser to select either an English (en) or Spanish (es) background image for the ‘branding’ div, according to the language of the current page.

Another great way of using the lang selector is to show or hide small chunks of text according to the current page language. With the lang selector, you can wrap your texts with spans to hide them, like this:

<li class="event-title"><span class="text-lang-en">Lunch break</span><span class="text-lang-de">Mittagspause</span></li>

… and use some nifty css to only display the text relevant to the current page, like this:

.text-lang-en:lang(de) { display: none; }
.text-lang-de:lang(en) { display: none; }

This css is telling the browser to hide any element on German pages that has the class text-lang-en and to hide any element on English pages that has the class text-lang-de.

You can extend this principle to anywhere you can specify a style. I’ve found it great in widget titles, text and links in footers and more:

<h3 class="lang-en">A selection of forthcoming Events</h3><h3 class="lang-cy">Pethau sy’n mynd ymlaen</h3>

But where this kind of CSS-based language showing/hiding is most valuable is in places where a plugin or other module is outputting text in a single language but in a way that you can configure…

Configuring events for multilingual display

The Wordpress Events plugin allows you to configure ‘templates’ which define exactly how event listings look. Here’s a typical event listing template in just one language:

<li><strong>%title%</strong><br />%startdate%, %starttime%</li>

Now, if only we could get a language tag in there somehow…

There are two ways to go about it:

The crudest would be to put your own markup in each event listing. So for example in the title field you might enter <span class=”lang-en”>Lunch Break</span><span class=”lang-de”>Mittagspause</span>. This works but is not exactly user-friendly.

Better (in my opinion) is to duplicate each event (yes, there’s a button in the events editor to do exactly that) for each language and use the event category to indicate the language.

Say you have two categories of event: ‘Training’ and ‘Presentation’. What you do is modify the categories so you now have:

• ‘Training lang-en’
• ‘Training lang-de’
• ‘Presentation lang-en’
• ‘Presentation lang-de’

So for each new event that site editors/authors create, they need to specify the language through the appropriate category. Once they have done that, they can click the ‘duplicate’ button, enter the text in the other language and change the category to reflect that language.

The template is now changed to look like this:

<li class="%category%"><strong>%title%</strong><br />%startdate%, %starttime%</li>

The HTML that is generated will look something like this:

<li class="Training lang-en"><strong>Lunch Break</strong><br />20/12/2010, 12:30</li>

Note that the space in the middle of the category name gives you a distinct language identifier separate from the original category descriptor.

With the CSS we saw above, events in the ‘wrong’ language will now be hidden automatically. Just remember that the system is outputting a separate language version of each event, so if you configure the events plugin to limit the number of events displayed, then you will need to set double the number that you want in each language.

Problems with lang and browser compatibility

OK, I mentioned browser issues right at the start, so now it’s time to resolve them.

This time it’s not just Internet Explorer at fault. Although IE7 (plus IE6 and earlier) fail to act on the lang selector, Safari is equally incomplete. So this method, as I’ve just described it, won’t work at all on most Macs and on many PCs.

Fortunately there is a workaround.

Right at the start of this article, I said that the WPML plugin has a constant that you can use in PHP to return the language of the current page. Using this we can tweak the template of our theme (or the child theme if we are using someone else’s template) so that the body declaration includes a style which indicates the language of the page.

I use Thematic as the basis for my themes, but the same principles apply anywhere – you just need to work out where to make your changes in your template. In thematic, the key file is header.php.

Where you see the body declaration you simply append some simple PHP which returns the language constant from WPML, ICL_LANGUAGE_CODE. You can see the modified line below, with the addition market in blue:

<body class="<?php thematic_body_class() ?> lang-<?php echo ICL_LANGUAGE_CODE?>">

The result is that you have a page which includes code with a language indicator at the end:

<body class="wordpress page pageid-38 lang-cy">

So now all we need to do is update our CSS to drop the form :lang(cy)  and instead introduce our own language selector:

.lang-cy .english, .lang-en .welsh
{
	display: none!important;
}

And there you have it. An effective way of making mono-lingual plugins and widgets work nicely with multiple languages, without just one line of PHP and not a database modification in site!

Hope it works as well for you as it is for me,

Philip

These respected international traders in food-grade peanuts wanted a web site that reinforces their strong relationships with South and Central American suppliers, while addressing commercial buyers who are predominantly in the UK.

Take a look: Web site – home page | Web site – an inner page

This established charity wanted to broaden their appeal to a younger generation of volunteers. They asked us to design a site that would reach out to adults and young people in both the English and Welsh languages.

Take a look: Web site – home page | Web site – an inner page

When your business is chartering private jets, your marketing has to reflect the level of service, attention to detail and operational excellence that sets you apart from the competition. That’s why we’re delighted that Centreline come back to us time and again.

Take a look: Web site | Brochure/mailer

In previous versions of Word, you could easily add attractive backgrounds to document templates without risk of the user deleting them along with their text. Working in the header or footer, you could place images of  practically any size anywhere on the page. However in Word 2007, this approach results in huge lag when you type, giving you unacceptably slow performance.

Although the problem is discussed a great deal in various technical forums, with no real answers, there is a very simple and almost universally acceptable solution:

Instead of inserting an image in the header, create a full-width image and insert it as a ‘Watermark’.

Here’s how you do it:

1. Edit your background image in an editor such as Photoshop or GIMP (an excellent open source alternative). Expand the image (don’t stretch it; just add empty space around it by adjusting the Canvas Size). You may need to play around a little the first time to find the right image size, as your your DPI settings will affect the size of the image when it is brought into Word. In an ideal world you would be able to just set the size in millimetres (A4 is 210mm wide).

2. In Word 2007, go to the Page Layout tab on the ribbon.

3. Click Watermark then Custom Watermark.

4. Select a Picture watermark and choose your image file.

5. Set scale to 100% and uncheck ‘washout’

You should find that Word performs properly when your image is inserted in this way.