Writing modes: explore alternative character and block direction support

[ramonjd]

This issue is mainly to capture and centralize discussions from the following issues and PRs in relation to vertical writing modes:

• Add a way to rotate text #20926
• Experimenting with adding writing mode to layout #37932

It's a work in progress and might not be accurate. I'll correct mistakes and assumption as the discussion evolves. Thank you!

What problem does this address?

Most text (characters and sentences and so on) on the web flows horizontally, from left to right. Blocks of text flow vertically, from top-to-bottom. This is true for Latin-based alphabets and some non Latin-based alphabets (Cyrillic, Thai and Greek for example).

As far as CSS is concerned, this is default.

direction: ltr;
writing-mode: horizontal-tb;

Arabic characters flow from right to left, but still follow a vertical block flow.

direction: rtl;
writing-mode: horizontal-tb;

Some written languages display characters vertically, with blocks (paragraphs, headings and so on) flowing horizontally from right to left (Japanese, Korean, Chinese et. al.,) or left to right (Mongolian).

writing-mode: vertical-rl; // or vertical-lr 

Commonly you'll see Han scripts following the left-to-right, top-to-bottom paradigm:

Sometimes there's a mix:

There are two perspectives:

1. Visual design, where there is no i18n imperative

2. Language-specific writing modes

This issue aims to answer the question: Should we provide a way to configure text direction and orientation in the block editor (and if so, how?)

What is your proposed solution?

To see if there's a way to offer support for writing modes in the editor, whether at a (text) block or container level.

Both come with a bit of baggage in relation to layout and flow.

From a purely visual perspective it's possible to apply writing-mode: vertical-rl; to individual text blocks such as paragraphs or list items. This will ensure the character flow is vertical.

Consecutive paragraph blocks however won't honour the correct block flow, that is, from right to left.

This code pen has a few examples: https://codepen.io/BoganJustice/pen/rNGbNPM

To ensure a collection of text items have the same block flow, it might be necessary to add writing-mode: vertical-rl; to their container. The container might be a Group Block for instance.

Here is a template I've been working on in the Site Editor to illustrate the various effects:

A side effect is that changing the writing mode to vertical and the block flow to horizontal will effect some layout-related styles, regardless of whether it's container- or block-based.

An example is margin-top, which will apply to the top of an element regardless of its orientation. CSS logical properties will help us here in some way, but it might involve redefining/overwriting the underlying layout styles to cater for changes in writing mode. Using margin-block-end in place of margin-bottom for paragraphs within a container for example.

TODO

• experiment with some patterns in the block editor, comparing block- and container- level support for writing mode
• see if layout might benefit from CSS logical properties to allow frictionless switching of writing modes

References

https://24ways.org/2016/css-writing-modes/
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties