TechPrufer
Get started
Cloudflare
Cloudflare logoCloudflare · Feature trail

Internationalization of Cloudflare Products

4 posts · Apr 2012 – Dec 2024

What this trail covers

Cloudflare has been actively working to internationalize its products and services, starting with the Cloudflare dashboard. This effort involves externalizing all user-facing strings, managing dynamic data within translations, handling pluralization, and incorporating rich text elements like links. The company has developed a repeatable process for internationalization and localization, aiming to make its platform accessible to a global and diverse customer base in their native languages. This post details the specific implementation for Cloudflare Radar, including strategies for hard-coding avoidance, pseudo-translation, text expansion management, and string concatenation best practices.

All Cloudflare trails
  1. Internationalization and localization: bringing Cloudflare Radar to a global audienceThis post details the technical process of internationalizing and localizing Cloudflare Radar. It covers the externalization of hard-coded strings into separate files using `react-i18next`, the use of pseudo-translation to identify remaining hard-coded strings, and strategies for managing text expansion in UI design. It also emphasizes the importance of avoiding string concatenation for better translation flexibility.
  2. Dark Mode for the Cloudflare DashboardThis post introduces the availability of dark mode for the Cloudflare Dashboard. It highlights how the existing Cloudflare Design System, with its structured color scales and component library, enabled the rapid implementation of dark mode by simply reversing luminosity scales. The post also details the iterative process of refining the dark mode experience, including adjusting background colors for better contrast and user comfort, and ensuring all UI elements and their states were properly audited for accessibility and visual consistency.
  3. Internationalizing the Cloudflare DashboardThis post details the technical implementation of internationalizing the Cloudflare dashboard. It explains the process of externalizing strings into translation catalogs, using a `<Trans>` component for dynamic data injection and pluralization (via `smart_count`), and handling embedded markup using `Components` and `componentProps`. It also discusses the importance of keeping sentences intact for accurate translation and the use of pseudo-localization for development and design testing.
  4. Non-Latin/UTF8 International Domains (IDNs) Now Fully SupportedIntroduced direct support for International Domain Names (IDNs) in the Cloudflare interface, allowing users to register and manage domains using non-Latin characters. Previously, only Punycode representations were supported. Also upgraded the entire UI to support the full UTF8 character set, removing past restrictions on Latin characters in forms.