How to Create a Dual Language Website

Most websites these days are based on Content Management Systems and, of those, WordPress is by far the most widely used.

If you’re using WordPress, there are a number of plugins that handle dual language translations. I’ve described how I translate WordPress websites with the plugin that I use. Read the details here.

If you’re not using a Content Management System, then read on!

Living as an ex-pat in Hong Kong I’m often asked to create websites in dual languages (Chinese and English).

Creating dual language functionality if you’re building a static HTML website is very straightforward, and that is what is covered in this article.

Dual languages on static HTML websites

Basically, the process is to:

  1. Create a new directory, or folder, on your server to hold your second language pages
  2. Add the translated pages to this folder
  3. Update the menu links on your second language pages to link to translated pages in the new folder
  4. Create a language switcher that you add to each page of both languages

Here are the detailed steps:

Step 1: Create a new folder for your second language pages.

Create a new folder on your server that will hold the translated versions of each page on your site.

It’s a good idea to use the International 2 letter code for the second language as the name for this folder because that will help the search engines. For example, in the case of Chinese the folder name becomes ‘zh’

Step 2: Set the font for your second language pages

If your second language is one that uses the Roman alphabet you can skip this step because the font will be the same as used for your primary language.

But if it’s a language that uses different characters, like Chinese, you can set up a div in your stylesheet that defines the font you want to use.

There are a lot of different fonts for Chinese text but, as I cannot read Chinese, I always get my client to specify the font they want to see and I then specify this in the stylesheet.

Often my clients won’t know the font name, but in many cases they can point to a website that uses a font they like. In this case you can simply view the source code and copy the font name.

You would then add the declaration to your stylesheet (the font name is only an example):

#second-language { font-family: SimHei; }

Step 3: Create the second language pages

From here on I’ll use English as the main language and Chinese as the alternate language.

So now we need to create the Chinese language pages, and the first step is to get your client to provide you with the translations they want.

The best way for them to do this, that will ensure the translated paragraphs match the original paragraphs, is for them to write out the English version in a Word document and then insert each paragraph of the Chinese translation under its relevant English paragraph.

When the client has provided me with this, I then turn to the HTML file and copy the entire contents of the English language page, and paste it into a new HTML file. This file will become the Chinese language page.

The reason I do this is to make sure that all the HTML and any inline CSS or JS code is kept in place. When you’re creating a page in a language that you cannot read this is the safest way to ensure that all elements remain in their correct locations in both languages.

I then copy the first paragraph of the Chinese text, delete the related English paragraph and paste in the Chinese version. I do this, one paragraph at a time, for the entire page.

And then, of course, I repeat this process for each page on the site.

Struggling to grow your business? Then this is for you: get 4 top business growth tips, every Monday!

In order to remove the code that Word inserts you should paste the translated content into Notepad (or a standard text editor) first, then re-copy it to paste into the HTML page. If you need to save the Notepad file for any reason, be sure to save it with UTF-8 encoding if it’s not a Roman character language.

If you have specified a different font for your second language pages (step 2 above) you will need to wrap the page content in the div tags you defined in the stylesheet – using the example above it would look like this:

<div id="second-language">content here</div>

Step 4: Update your navigation menus

The URLs in the navigation menu on each of your Chinese pages must include the new directory you set up in the file path, otherwise your visitors will be taken back to your English pages when they navigate around your site – not a good user experience!

I also name the Chinese pages slightly differently so it’s easier to manage the files on the server (and on your computer!). Usually I just add a dash (-) and two characters to the existing file name – e.g. ‘-cn’ for Chinese – so About.html would become About-cn.html

So the full path URL to your About page in the navigation menu on your English pages would look like this:

In your Chinese pages the full path URL for the same menu item would look like this:

So make sure all the navigation menu links in your menu bar on all your Chinese language pages are adjusted to include the extra directory in the path and the revised filename.

This will ensure that, once a visitor selects a language, all future pages they visit on your site using the navigation menu are presented in their choice of language, unless they use the switcher to change back again.

Step 5: Set up a language switcher

I set up a language switcher in the top right corner of each page, which contains options for both languages.

Basically, the language switcher links each page to itself in your English pages, and also to its Chinese language equivalent.

On the Chinese pages, the language switcher also links each page to itself and to the English language equivalent.

Then, once they’ve arrived on the Chinese language version of the page, the navigation menu links that you’ve already set up, as I described earlier, will ensure that all pages they visit from then on are in Chinese, unless they switch back to English.

Taking the About page as an example again, the code for the switcher at the top of that page would, therefore, look like this:

<a href="">EN</a> | <a href="">中文</a>

So you need to link each page to itself on your English pages and to its Chinese version for the Chinese pages, and repeat that at the top of all pages (for both languages) in your site.

And just to clarify, if someone is viewing your Chinese page, the switcher is linking that page to itself and also to the English equivalent, but you use the same code for the switcher on both language versions of the same page.

That is: the About.html and the About-cn.html pages would both have the same code in the switcher.

And then, of course, you will need to create a separate switcher for each page on the site, linking each page to itself and its Chinese equivalent.

Again, if you’re using WordPress, the process and the plugin I use are described here.

OK, that’s it, any questions leave me a comment!


Martin Malden

Share the love: