X
Contact Us
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Developing a beautifully localized GUI is a key part of providing a great user experience. However, creating the perfect GUI for English without considering the needs of other languages is a common mistake. After adding translations, the layout can change significantly when buttons, labels, and other UI elements need to increase in size to accommodate other languages. This post assumes the usage of the Qt GUI framework, but many of the concepts apply equally to any GUI framework.
If you keep a few things in mind to support different languages, you will save yourself a lot of time and extra effort. Whenever possible, use Qt layouts which is a layout-based approach to widget management. This tool will automatically arrange child widgets within a widget to help you create a consistent look and feel.
Using an automatic layout system is not always an option. In those cases, there are a number of different challenges you may face and you will need to take different approaches to solve each one. For example, sometimes the translators cannot even see or run the GUI so they might not be able to help with things like breaking up long lines of text into multiple lines. When layouts are not an option, keep some of these things in mind…
Use automatic word wrapping when possible but sometimes a semi-auto word wrapping strategy is better. If you have the space, your text will fit and you won’t have to change anything.
Sometimes, you may actually want fine-grained control over where a line break should be. For example, you may want to line break after a comma. If want to control the line break point, you have two alternatives to word wrap:
Don’t make the perfect design for English because it will likely be too small for translations.
Create smarter icon-text layouts where the GUI will calculate the width of the text, the width of the icon, a fixed margin between both of them, and then center everything in the button.
This is not as simple as doing “Some text %1” and replacing the %1 for the brand/special name. Sometimes there is no easy solution to these problems and the translators may need to brute-force translate many different variations of text that contains brand/special names. Tools, such as Qt’s Linguist tool, can help the back-and-forth communication between the software developers and the translators by allowing strings to be changed from “finished” to “unfinished” and by allowing the developers to provide detailed comments to the translators.
The French language uses a space before any “:”. Make sure that a non-breaking space is used when necessary so any word wrap algorithms do not break the line there. The code for a non-breaking space is “ ”.
Some features need to be embedded inside other objects to ensure alignment is done properly. In the case below, make the word, icon, and animation all part of the button so they are all positioned correctly.
Different languages can mean longer text, order changes, etc. Accounting for word order and leaving about 50% more space than you need for English (EnglishXXXX) can save your sanity.
No matter what you do, once a GUI is going to be translated, you are going to have to fix a lot of things. If you need help developing your beautifully localized GUI, we are here for you.
We will leave you with a few more helpful hints…