Skip to content

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

@jasmussen

Description

@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:

Image

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

Image

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

Image

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:

Vertical text, slightly longer term version with more options

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

Metadata

Metadata

Assignees

Labels

Needs DevReady for, and needs developer efforts[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Feature] TypographyFont and typography-related issues and PRs[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

Type

No type

Projects

Status

Needs dev

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions