Mastering Web Internationalization – DEV Community

In this case, the entire document is set to a right-to-left direction. A specific paragraph containing English text has its direction explicitly set to left-to-right. It is important to note that you should always declare the directionality using the dir attribute and not assume that a language declaration will also set the direction.

CSS Logical Properties

Historically, CSS properties were based on physical directions: top, bottom, left, and right. This approach creates significant challenges when building layouts that need to adapt to both LTR and RTL languages. For instance, margin-left in an LTR layout would need to become margin-right in an RTL context, often leading to separate, difficult-to-maintain stylesheets.

CSS Logical Properties and Values offer a more efficient and logical solution. They abstract directional concepts into block and inline axes, which are relative to the flow of text.

Block axis is the direction in which blocks of content are displayed (e.g., paragraphs). In languages like English, this is the vertical direction.

Inline axis is the direction of text within a line. For English, this is the horizontal direction.

This gives us flow-relative properties. For example:

Consider a simple card component with a small margin to its starting side.

The Physical Way:

.card {
  margin-left: 10px;
}

[dir="rtl"] .card {
  margin-left: 0;
  margin-right: 10px;
}

The Logical Way:

.card {
  margin-inline-start: 10px;
}

By using margin-inline-start, the margin is automatically applied to the left for LTR languages and to the right for RTL languages without any additional code. This approach is more maintainable and less error-prone.

JavaScript Intl API

While HTML and CSS provide the structure and styling for internationalization, JavaScript is crucial for handling dynamic data that requires locale-specific formatting. Internationalization is more than just translation; it encompasses formatting for dates, times, numbers, and currencies, which can vary significantly in different places.

The ECMAScript Internationalization API, accessed through the Intl object, provides a powerful, built-in solution for these challenges without the need for large, third-party libraries.

Problems Addressed by the Intl API

• Date and Time Formatting: Displaying dates and times in a user’s preferred format (e.g., MM/DD/YYYY in the US vs. DD/MM/YYYY in Germany).
• Number Formatting: Correctly formatting numbers with appropriate separators for thousands and decimals (e.g., 1,234.56 in the US vs. 1.234,56 in Germany).
• Currency Formatting: Displaying currency values with the correct symbol and placement.
• Pluralization Rules: Handling singular and plural forms of words, which can be complex in different languages.
• …

Examples

The Intl API works by creating formatter objects that are configured with a specific locale.

Formatting Dates:

const date = new Date();

const usDateFormatter = new Intl.DateTimeFormat('en-US');
console.log(usDateFormatter.format(date)); // e.g., "11/4/2025"

const germanDateFormatter = new Intl.DateTimeFormat('de-DE');
console.log(germanDateFormatter.format(date)); // e.g., "4.11.2025"

Formatting Numbers:

const number = 123456.789;

const usNumberFormatter = new Intl.NumberFormat('en-US');
console.log(usNumberFormatter.format(number)); // "123,456.789"

const germanNumberFormatter = new Intl.NumberFormat('de-DE');
console.log(germanNumberFormatter.format(number)); // "123.456,789"

Formatting Currency:

const amount = 1234.56;

const usCurrencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(usCurrencyFormatter.format(amount)); // "$1,234.56"

const germanCurrencyFormatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(germanCurrencyFormatter.format(amount)); // "1.234,56 €"

By leveraging the Intl object, you can deliver a more user-friendly experience that respects the cultural and linguistic nuances of your global audience.

Conclusion

Internationalization is a fundamental aspect of modern web development that should be integrated into your workflow from the very beginning. By systematically applying the correct attributes in HTML, utilizing logical properties in CSS, and leveraging the Intl API in JavaScript, you can build applications that are truly global. This structured approach not only enhances the user experience but also reflects a commitment to quality and inclusivity in the digital products we create.