Web technologies evolved a lot over the past decades, and with all the possibilities, the complexity of web applications has arisen. Writing multi-platform applications for web, desktop, mobile, and even for smartwatches using web technologies is the way to go. It enables us to ship our software to everyone at any time. With that in mind, we must care about our software’s internationalization (i18n) and localization (l10n) architectures starting with the first line of code.
Please welcome to a series of articles to create a solid foundation that fits and scales your Angular project and team.
The Difference Between Internationalization and Localization
Internationalization, or i18n, is designing and developing a software application to adopt different languages, cultures, and regions without significant engineering changes. It involves considering and implementing features that allow for seamless localization.
Localization, or l10n, is the subsequent process of customizing the internationalized software for a specific target market or locale. This process includes translating the user interface, content, and other relevant components into the local language and adapting cultural and regional preferences.
The main distinction is that internationalization sets the foundation for localization by creating a flexible and adaptable framework, while localization focuses on tailoring the software to a particular audience. By separating these two processes, internationalization enables efficient and cost-effective localization efforts, as changes can be made to accommodate various locales without repeatedly modifying the core software architecture.
Internationalization Is More Than Text Replacements: Covered Topics
Localization not only covers language translations but it also includes regions and cultures. The following list gives a good idea of what your internationalization can and should cover to keep your application scaleable and future-proof to grow in further markets.
- Pluralization
- Numeral systems
- Text sorting rules
- Date and time formats
- Currencies, taxes, and fees.
- Required legal information, data privacy, and disclaimer regarding the country or region.
- Gender selections.
- Writing directions LTR (left to right), RTL (right to left), and vertical texts.
- Detection of locales and handling of languages, regions, and cultures.
- Keyboard shortcuts for different keyboard layouts (e. g. QUERTY or QWERTZ).
- Time zones and the date and time differences between users, servers, and vice-versa.
Misunderstandings and Problems
Over the years, we experienced a common problem of understanding internationalization in most customers’ Angular internationalization projects: the importance of a solid architecture that makes localization a breeze.
If your project is in an early stage of conception or prototyping, you are good to go to keep the topic on the radar. Implementing internationalization on a living product is possible but very time-consuming and complex since the changes affect almost every part of the code base and the user interface. That meant feature development freezes at some points during the refactoring to make your application localization ready.
Refrain from reinventing the wheel and using well-maintained libraries and industry standards. Angular has superb i18n features, and the community offers reasonable solutions that might fit your project needs. Both options work with an ICU message format standard, which is the way to go. Adding here and there some lines of code to deal with pluralization or date and time handling will lead to a dead end.
A solid internationalization architecture is essential to develop further markets, scale your projects efficiently and save time and money in the long term.
We Find The Right Solution For Your Angular Internationalization
In this series, we discover the most solid and popular solutions, such as Angular’s built-in i18n features and transloco, to integrate internationalization patterns in your Angular application.
The upcoming article is on the way. In the meantime, follow us on Twitter and LinkedIn for further updates or book an Angular Health Check or consulting services if you need internationalization support immediately.