So, in this article, I will explain how to get started on translating HTML code using Lokalise: a simple yet very powerful service. You will learn how to get started with Lokalise, how to create a new project, upload your HTML files, perform translations, and download translated HTML files. By the end of this tutorial you will be able to translate HTML like a pro!
Sample HTML Page to Translate
So, suppose we have the following HTML page
me.en.html with English content:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <title>About Me</title> </head> <body> <h1>Hi, my name is John Doe!</h1> <img src="my_photo.png" alt="That's me, John!"> <p> I am a Ruby/Python/Node developer with 8 years' experience.<br> I've graduated <abbr title="Massachusetts Institute of Technology">MIT</abbr> in 2007 and since that have worked with the following companies: </p> <ul> <li>Macrosoft</li> <li>Pineapple</li> <li>Facelook</li> </ul> </body> </html>
This is a simple markup for a typical “About Me” page found on many personal sites. We need to translate the following:
titleof the page.
- Header, paragraph, and all list items.
altattribute for the
titleattribute for the
However, while this does not seem like a complex task, consider the following:
- First, it is important to make sure all tags and their attributes have translations. The longer your HTML document is, the harder it becomes to check all the nodes.
- Also, you’ll probably have multiple HTML pages and every document requires internationalization.
- Finally, you might not be familiar with all the languages into which the document has to be translated. This means you’ll likely need help from a professional translator and it’s unlikely that s/he will be an HTML expert.
Therefore, using the right translation management system is your best bet. Meet Lokalise: a very popular and the most advanced TMS and localization software out there, with the below core features:
- Ability to translate various types of content with a powerful graphical editor.
- Simple file and translation project management.
- Collaborative translation.
- Quality assurance.
- Localization process automation.
“But it’s too expensive for me!” you might think. Actually, it’s not: pricing starts from $90 per month for small teams. However, as a matter of fact, there is also a free plan which will come in handy for customers who need to translate content for their personal sites and applications. No hidden commissions, no shady schemes. Finally, open source projects can also request free access, while non-profit organizations are eligible for special discounts. Sounds good, right?
Using Lokalise to Translate HTML
Getting Set Up
So, first things first: we need to set up our HTML translator application. If you don’t have a Lokalise account yet, get your free 14 day trial here. Once the trial ends, you will be switched to a free plan automatically. Of course, it is possible to upgrade your subscription any time.
After signing up, you will see your projects dashboard. Simply speaking, a project is a collection of translations or files to be translated (related to a single app or service), contributors who have access to these translations, and some other settings and features (like integrations with third-party services).
- Create a new project by clicking the corresponding button in the top menu.
- Give your project a name, for example “Personal Site”.
- Optionally, provide a project description.
- Choose a base language — that’s the original language of your content.
- Make sure to choose Documents as the Project type — this will allow us to translate HTML files.
Next, you will be redirected to the project page.
Uploading an HTML File to Translate
As the next step, we need to upload (import) our HTML file. Click on the Upload link shown in the screenshot above. You will see the uploading interface as follows:
First, click the Select a file link and choose the HTML document from your PC. You don’t need to tweak any uploading options to get started with HTML translation. However, if you are interested in learning about the purpose of the uploading options, refer to our “Uploading files” documentation. Also make sure the language was detected properly as shown here:
If the language is incorrect, use the dropdown and choose a different option. Also, you may rename the file by clicking on its name:
Also you will notice that the
%LANG_ISO% part is added automatically. Basically, it says that the locale code will be placed in this position. When downloading translation files for different languages, the
%LANG_ISO will be replaced with the proper language code, for example:
me.fr.html. Having a language code in the file name is beneficial because you can easily understand what language version the document contains.
When you are ready, click the Import the files button. The uploading process will happen in the background. Use the Activity page to see the progress of the job:
The upload will be completed within a few moments:
Now, click on the Personal Site link in the top menu. You should see the contents of your HTML document separated by tags:
Adding Languages for Translation
So, we have loaded the HTML file and can proceed to the actual translation. However, what languages do we want to translate? To choose a language, click on the English dropdown to the right, and click Add language…
Next, choose one or more languages from the dropdown. I’ll pick Russian and Polish for the below:
Click Add once you are ready.
Now simply choose one of the languages from the dropdown to the right. This is the language that we will be translating into (target language). The left dropdown shows the language that you are translating from (source language):
Finally, once you’ve chosen a target language, the values to the right will contain Empty values:
So, these are the values for the target language (set to Russian in the example above). They are empty because we have not yet translated anything. The values to the left belong to the source language (English). Remember that initially the HTML page was in English, so that’s also the base language of our project.
Performing HTML Translations
So, at this point you can go ahead and translate your content. To do that, simply click on one of the Empty values:
Enter the translation in the text box or choose one of the suggestions below. These suggestions are machine translations from Google, DeepL, and Bing. Once you are ready, click on the OK button with the checkmark icon. Your translation is now saved:
To edit the translation, simply click on its value.
Now, what about the image tag? Currently its value looks like this:
This is a block shown in a user-friendly way. However, if you would rather see the actual markup, disable the Display placeholders as blocks option:
Now let’s provide a translation for the
You will notice that the editor reminds you that the current value has a missing element (the
img tag). Click on the missing element to add it to the text box. Also, disable displaying placeholders as blocks while editing, for instance:
Next, translate the
After that, proceed to translating the paragraph:
It shows two placeholders:
- First, our
brtag, that we should leave intact.
- Second, the
abbrtag. We need to translate its
So, click the Insert source button and perform the translation in the same way as before:
Next, simply translate all other elements:
Downloading Translated HTML Files
So, once you’ve translated your HTML files, it’s high time you downloaded them! Start by clicking Download, as shown here:
Next, choose HTML from the Format dropdown, and select the languages that you would like to download:
Also, you will be able to see the translation progress for each language. It is possible to tweak the language codes by clicking on them:
Remember that these language codes will form part of the filename (if the name has the
%LANG_ISO% part). So, for the Russian language you would see
After that, click the Preview button to see how your translation files will look:
Here’s the result:
For each language, you will see the filenames and the translated content.
Now return to the Download page and click Build and download. You will get an archive named after your project. The archive will contain translation files for each chosen language, which are separated into folders:
As a result, you have just translated your HTML page. Congratulations!
Now, what if you have not yet translated some of the values? During the download, it is possible to choose what to do a with such values:
- Export as empty strings — tags that have no translations will be empty.
- Don’t export — the corresponding translations won’t be exported. For HTML documents it works in a slightly different way: if the language has no translations at all, it won’t be exported. If the language has a handful of untranslated values, they will be replaced with the original text (which is English in our case).
- Replace with base language — replaces all untranslated strings with the values from the base language.
You can control this on the Download page using the Empty translations dropdown, like so:
Now, what if you would like to find all the values missing translations and deal with them? To achieve this, use the Filter dropdown on the project page and choose Untranslated:
This way you will see only the untranslated values for the chosen language!
Browser extensions to preview HTML documents
- Install it in your browser
- Proceed to Lokalise
- Open the Download page
- Adjust options as needed
- Click Preview
- Scroll to the bottom of the page and preview the document!
So, in this tutorial we have seen how to translate HTML using the Lokalise graphical user interface. Remember that you are able to upload multiple translation files into a single project and can add as many languages as needed. While we have covered quite a lot of material, Lokalise provides many other features. Here are a few suggestions that may interest you:
- Adding and managing contributors
- Ordering professional translations
- Integrating with third-party services like Asana, GitHub, Amazon S3, and many others
- Working with translation tasks
Feel free to contact us if you have any further questions or if you would like to learn more about the platform. Thank you for stopping by today, and until next time!