BT

InfoQ Homepage News CSS Writing Modes Now an Official Web Standard

CSS Writing Modes Now an Official Web Standard

This item in japanese

Bookmarks

The World Wide Web Consortium (W3C) recently announced that CSS Writing Modes Level 3 is now an official web standard. The new CSS standard enables developers to configure texts to be laid out horizontally or vertically, as well as to set the direction in which lines are stacked. Thanks to CSS Writing Modes, content in a large number of languages can be natively displayed.

Dr. Jun Murai, W3C Steering Committee Member and professor of Keio University in Japan, emphasized the importance of the new standard, and the amount of international work that went into the standard:

[The] publication of CSS Writing Modes Level 3 as a W3C Recommendation marks an essential milestone in the journey started in 2004 when the CSS Working Group started work on text layout. (…) Thanks to incredible Internationalization work and the help of many Asian countries working together, we have reached the momentous point where CSS enables international writing modes on the Web."

The CSS writing modes standard defines CSS support for various international writing modes, including horizontal left-to-right text (such as in English or Hindi), but also horizontal right-to-left text (such as Hebrew or Arabic), and vertically set text (such as for Japanese or Mongolian). Additionally, the standard supports combinations of the above, such as English or Hebrew in vertically set Asian text.

Rachel Andrew, editor in chief of Smashing Magazine, underscored the importance for developers and designers to understand how writing modes interact with other layout standards such as FlexBox or Grid:

The support of multiple writing modes is key to the way that our new layout methods of Flexbox and Grid Layout have been designed. Understanding this can unlock a better understanding of how these layout methods work.

The CSS writing modes standard specifies that a writing mode is determined by the writing-mode, direction, and text-orientation properties. The writing-mode property specifies the block flow direction. The direction property specifies the inline base direction of a box.

Jen Simmons, designer and developer advocate at Mozilla, summarized in a pedagogical drawing how the three CSS-writing-mode properties are combined to specify a layout:

An illustration of an arrow pointing down to indicate block direction, The letter 'A' with text alongside it to indicate character direction, and arrows pointing to the right for inline direction
Source: https://24ways.org/2016/css-writing-modes

Chen Hui Jing provided a demonstration which lets developers toggle between a horizontal-tb and a vertical-rl writing mode, and observe the change in layout and scrolling direction:

Chen Hui Jing demo toggling between horizontal and vertical CSS writing mode

CSS writing modes can also be used for creative design purposes, by turning content sideways, or changing the direction of the content flow, even when using languages which are written left-to-right.

The state of CSS 2019 survey seems to indicate that, contrary to Flexbox, CSS writing modes are used primarily by experienced developers and designers (over 10 years of experience).

While CSS writing modes are not supported by IE11 and Opera Mini, it is nonetheless already supported by most browsers.

W3C actively welcomes feedback and support from international communities to satisfactorily meet language support needs. W3C published a language matrix that captures an overview of the current level of support and where work is needed.

The World Wide Web Consortium provides the standards that sustain the infrastructure for modern businesses leveraging the Web, in areas as diverse as entertainment, communications, digital publishing, and financial services. W3C work is provided for free under the W3C Patent Policy.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.