Naked translations

So, I’ve just finished building a website for a friend. A few finishing touches need to be added, but it’s essentially there and it’s live at Céline is a good friend of mine (mentioned in other posts and in the pictures) but by day she’s a translator. The interesting thing about her site is that it’s available in English and French. I built her a site a year or two ago that did this in flat html with static pages about experience, rates, and contact details. As with all static sites, it soon got out of date. Now, she’s had a great idea about writing a translation blog, covering the issues that she encounters in her everyday work. This means she enters every entry twice, but I also had my first experience of building a site that publishes in different languages. Here’s roughly how I did it.

I started with Movable Type. I use it on this site and while I would prefer a true open source application, none of the ones I tested could provide the versatility of Movable Type. I set up MT with two blogs: one English and one French, and had them publish to different directories (/en/ and /fr/). I wanted the same look and feel throughout, though, so I used one set of templates and some php trickery to set the language displayed in the templates. Every page checks its path and decides the language based on that (defaulting to English for the homepage). Then we call either the English or the French text, which lives in arrays. There are a few hacks as well: for example French dates are not displayed in the same way as English dates, so there’s a check in the php to change the layout for dates.

Then there were the static pages on the site, about Céline’s experience etc. Céline wanted to be able to update these herself, so I created a category in the blogs just for them and got the output to vary depending on the category (we don’t want the blog info on the static pages). I also had to use a couple of MT plugins to get the blog to ignore the special category on blog pages.

As half of the posts are in French, we needed a way to get around the problem of foreign characters in HTML without Céline having to learn HTML. I build a form to translate Word into HTML, so Céline can cut and paste her entries into the form and then into MT. She still has to apply formatting, but it’s better than nothing.

We also wanted to provide good linking between the versions of the site, so someone on the French ‘rates’ page could go direct to the English ‘rates’ page. This is achieved by passing the url into the global header. Sadly, it doesn’t work for individual blog entries, but it’s close.

Additionally, this was my first site built without the aid of tables for layout. I’ve been inspired by Zeldman‘s ‘Designing with web standards‘ (a very good book but slightly repetitive and too keen to preach to the converted) and finally got the thing to work cross-browser. I’m still fighting slightly with font sizes (I used ‘small’, ‘medium’, ‘large’ to allow for font size changes in the browser), and need to add a few more French versions of words and phrases, but we’re essentially there.

So far, Céline is happy with the site. Why not check it out and tell me what you think.