🌏 Internationalization with CSS and HTML

If you start thinking about a global audience sooner, you can avoid having to refactor later.

Introduction

Internationalization, also called “i18n”, is the process of ensuring that your software or application can be easily used and understood by users around the world. Today we won't deal with the translation part but focus on page layout.

Most languages are read from left to right (LTR), however, languages such as Arabic or Persian use scripts that are read from right to left (RTL). To handle i18n, we should first set the dir attribute and lang attribute for html correctly.

CSS Logical Properties and Values

Physical properties use left, right, top, and bottom to determine which side of an element is affected. For example, margin-left: 1rem places 1 rem of margin of the left side of an element, regardless of the element’s text direction. While logical properties and values use the abstract terms block and inline to describe the direction in which they flow. The physical meaning of these terms depends on the writing mode.

Some physical properties now have logical equivalents. Properties that accept physical values (top, bottom, left, right) now also accept flow-relative logical values (block-start, block-end, inline-start, inline-end).

Block Dimension

The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.

Inline Dimension

The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.

For example: margin-top ➡ margin-block-start margin-right ➡ margin-inline-end

CSS Writing Mode

Unlike languages that use the Latin script which are primarily laid out horizontally, Asian languages such as Chinese and Japanese can be laid out vertically. The CSS writing modes module defines various international writing modes, such as left-to-right (e.g., used by Latin and Indic scripts), right-to-left (e.g., used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts), and vertical (e.g., used by some Asian scripts).

The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).

Syntax

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

Values

It accepts horizontal-tb, vertical-rl, vertical-lr, sideways-rl, and sideways-lr where tb is top to bottom, rl is right to left, lr is left to right, and horizontal-tb is the browser default.

Summary

By accounting for internationalization, you can ensure your product is inclusive to users around the world. Early in the development process of a new product, this may not seem necessary, particularly if your target market is not international. However, by keeping it in mind early and baking it into your CSS, you can avoid needing to refactor a large portion of your code base.