Typography: Add option for vertical text (writing-mode/text-orientation)

[jasmussen]

Through a combination of text-orientation: mixed; and writing-mode: vertical-rl;, you can achieve vertical text. This is useful for some writing forms. Shown here, a 12th century Japanese scroll:

Beyond enabling vertically written languages, the orientation can also have decorative properties:

We should consider adding support via the Typography panel. An initial version could be a single directional toggle, similar to that of Layout blocks:

This should be fairly simple to implement, as it's a matter of adding writing-mode to paragraphs:

writing-mode: vertical-rl;

Note that the rl part would have to be derived from the general writing direction (LTR needs vertical-rl, RTL needs vertical-lr).

See also: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Depending on the utility, the feature could theoretically be expanded in the future with glyph orientation (text-orientation). But I want to emphasize the following mockup would be a future followup, and the design control and iconography could use feedback:

The above would require the addition of text-orientation: upright; (where text-orientation: mixed; is otherwise a good adaptive default).

See also: https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

[jasmussen]

CC: @WordPress/gutenberg-design for awareness.

[beafialho]

Thank you for bringing this up @jasmussen! I love this and was wondering if we could extend this to Post Navigation links so we'd be able to achieve something like this:

[jasmussen]

I love this and was wondering if we could extend this to Post Navigation links so we'd be able to achieve something like this:

Nice!

Given navigation links have the Typography panel, I would expect this control also to be available there:

[carolinan]

@jasmussen Could I get a sanity check on this:

Note that the rl part would have to be derived from the general writing direction (LTR needs vertical-rl, RTL needs vertical-lr).

On LTR, the text is now displayed right to left:

[jasmussen]

Yep, it's a bit of an exotic case when you'll ever see this, and I think it's related to when the paragraph container has a fixed width, which might happen in flex containers. I updated this codepen to make it clearer:

In that codepen I also added the text-flipping CSS that might pair well with the alignment dropdown as we mused on here.

[ramonjd]

There's an older issue that raises similar questions:

• Writing modes: explore alternative character and block direction support #38038

The intention in that issue was to start with a locale-first approach.

Back then I experimented both with adding writing mode to individual blocks, e.g., Paragraphs, and to containing blocks, e.g., Groups

The reason behind looking at containing blocks was because text-orientation changes the block flow direction and requires the use of margin-block-start and other logical properties to control typographical layout.

See https://drafts.csswg.org/css-writing-modes/#block-flow, and the related discussion points here:

• Experimenting with adding writing mode to layout #37932 (comment)

Even the examples on MDN apply these rules to the containing block: https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

Refer also to this comment and the cited Japanese example.

The drive to add writing mode + text orientation was the reason I added CSS logical properties to the layout implementation:

• Layout: use CSS logical properties for margin top and bottom #38816

I know there's been some exploratory work going on over in #53175 but I suspect it might be worth starting from a i18n perspective first, that is, to support displaying vertical text flow to support languages that use it.

After that I think the ground work would be there to offer augmented "design first" options that can rotate text of any language according to design rather than locale. This is what #20926 proposed.

[carolinan]

Please note that the writing mode block support is already in Gutenberg, "starting from" is not an option anymore.

Please help me understand if what you are suggesting technically, means that the current support is removed, or that it is simply applied to container blocks and text blocks differently.

It would be possible to have a new support under "layout", but part of the CSS would be very similar, we should try to re-use it instead of duplicating.

[carolinan]

We also have to consider very carefully where in the UI it should go, there is also a language menu option in the RichText toolbar that has a text-orientation option that lets us choose between ltr and rtl.

[ramonjd]

Please note that the writing mode block support is already in Gutenberg, "starting from" is not an option anymore.

I get that, and I don't see any issue with the current implementation of writing mode. Sorry for the confusion!

It looks like the current implementation of writing-mode is pretty agnostic, that is, we could apply it to a group block if we wanted to have writing-modes on containers (unless I'm mistaken).

This issue specifically mentions text-orientation. My comments were directed at the relationship between writing-mode (in Gutenberg) and text-orientation and the effect, when both are applied, they have on writing flow. I'm thinking of multiple paragraphs that flow vertically in a logical order.

Please help me understand if what you are suggesting technically, means that the current support is removed, or that it is simply applied to container blocks and text blocks differently.

No, not suggesting we remove anything 😄 And definitely don't want to block progress on this issue. I'm very happy you've picked it up again, thanks.

The way I understand it, we have writing mode, and we want to now add some sort of text orientation control, is that right?

My only argument is this: we should taken into account how such features act on document and block flow not just design. For example, with the new tools, could a user build something like this?

If so, then great.

It would be possible to have a new support under "layout", but part of the CSS would be very similar, we should try to re-use it instead of duplicating.

I think targeting typography, like you've done, is perfectly logical.

[burnuser]

Feature not available in Gutenberg 16.7.0 RC 1