Add a way to rotate text

[iamtakashi]

It might not be an everyday thing, and there might be some interesting challenges, but it'd be great if we have a way to rotate a text to allow creating little interesting patterns.

Example:

cc @jasmussen for the past explorations around rotating text.

[jasmussen]

Hell yes.

Serendipitously, the G2 efforts have "detached" the toolbar from the block itself, which means we could theoretically rotate the block contents with transform: rotate(-90deg); — you'd type vertically, which might be a bit of a fun experience. Or you might type first, then rotate. An interesting challenge to think about!

For the beautiful block pattern shown here, it seems like it might be possible to accomplish this with a 2 column block, with 2 paragraphs in the left column, and an image in the right. POSSIBLY.

I did have a past exploration for rotating text:

But I'm not too hot on that one anymore. I'm not sure it should be an on-block tool like that — my current instinct would be to first test a button in the toolbar or block sidebar that simply rotates a block 90 degrees. I expect the UI/layout challenges even with those preset angles to be worth tackling first. Then if that goes well, we could unlock all the degrees.

[mtias]

A simple step, rather than free form rotating, could be to consider a setting on column containers (maybe also groups) to lay out the content vertically and it would apply to all the child blocks within. Editing could also be tricky to make truly usable.

[karmatosed]

As I was thinking of a reply the idea of the toolbar changing when you are interacting with text feels right for these type of advanced options. I am not sure if you'd have to highlight text to get this to happen but it feels right when selected. I do also like idea it could be on the block. It might be part of the block adjustments like width and alignment.

[aristath]

Just my 2 cents here, but niche cases like rotating text is not something one does often, and therefore should not be included in core. It's an edge-case, not the norm.

[ramonjd]

It might be part of the block adjustments like width and alignment.

Do folks think this feature is still valid? If so, I'm thinking it could possibly be another optional control under Typography supports panel (?)

[jasmussen]

Do folks think this feature is still valid?

Free-form rotating of text might be exotic, and could be interesting mostly if it feels super right in a PR.

However vertical text feels (as a suggested simpler step) feels both valid, but also important to many east asian languages that in traditional contexts are written vertically. In that light, I think it could be nicely supported as a non-default typography option that used the web-standards created to support such languages:

writing-mode: vertical-rl;
text-orientation: mixed;

[karmatosed]

+1 for vertical text it feels valid and in-fact I have found myself 'faking' it very poorly to get around with bad hacks.

[ramonjd]

Maybe it makes sense to try a writing-mode typography control out on a "containing" block first?

Here's some Japanese in a group block:

And the CSS.

    writing-mode: vertical-rl; // variable via controls vertical-rl/vertical-lr/horizontal-tb (default)
    text-orientation: upright; // variable via controls mixed (default)/upright
    margin-top: 0 !important; // overwrites --wp--style--block-gap
    margin-left: auto !important;
    margin-right: auto !important;

Reference: https://www.w3.org/International/articles/vertical-text/

What do folks think about controls in the Block Inspector? Would something like (and presumably better than) this make sense?

I see Figma uses a combination of arrows and text-alignment icons:

[jasmussen]

Thanks for exploring that Ramon 🚀

Keeping in mind we can always expand and refine in subsequent versions, what might be the least we could get away with? Could it be a simple toggle?

I don't really like how that mockup looks, so consider it quick and dirty just to illustrate the idea.

Another option is to use the same control we use for navigation or buttons block directions:

The writing-mode can be inferred as vertical-rl or vertical-lr based on the base text alignment:

The trickier part is what to do with text-orientation, which by default would rotate letters in the direction of reading, like this:

But for some languages, the letters need to be rotated 90 degrees counter-clockwise:

Just to consider how useful the option is, could we start with just the default behavior?

[ramonjd]

Keeping in mind we can always expand and refine in subsequent versions, what might be the least we could get away with? Could it be a simple toggle?

Just to consider how useful the option is, could we start with just the default behavior?

Yes, yes and yes 😄 Thanks for the quick response and great ideas @jasmussen

The idea of starting off with a toggle/arrows (and taking it from there) appeals to me extraordinarily. 🙇

Also cc @naokomc - what's your take on the desire for vertical writing modes in Japanese?

[naokomc]

If all of the text is in Japanese characters then text-orientation: upright; will work fine. What's tricky is when longer blocks of Latin text are mixed in – in that case, mixed tends to be better.

In a perfect world, having control over changing orientation for part of the text would be nice (e.g. numbers or single letter Latin text usually should be treated differently to look the best).

Example: https://codepen.io/manabox/pen/vJjxpX (from @manabox - she also has workaround examples for link underline position, which should be on the right-hand side for Japanese https://codepen.io/manabox/pen/MvXbWx)

Related: https://www.shopify.com/partners/blog/html-localization

[ramonjd]

This is great, thanks for the advice @naokomc !

[miminari]

Hi, I also tried to create a sample of vertical Japanese writing with CodePen.

https://codepen.io/miminari-the-scripter/pen/RwLqmvY

Wouldn't it be great if WordPress could do vertical writing! I'll want to use vertical-medium horizontal (text-combine-upright) for numbers. I think I'd like to use "text-orientation: mixed;" as a basic rule so that symbols and the like can be displayed nicely, but it would be better if it could be selected. I guess I'm being greedy, but it would be great if ruby could be supported as well.

[ramonjd]

I'm experimenting with adding vertical text layout support over at https://github.com/WordPress/gutenberg/pull/37932

I started off categorizing vertical text direction as a "layout" issue as opposed to a "typography", primarily because it requires a few layout changes, but also because fiddling with writing modes changes the block flow direction.

The possible consequence is that we'll need to tweak existing properties that apply to horizontal elements. For example we apply margin-top to direct children container to apply space between children. If those children have vertical layouts, we'd have to migrate the value to margin-left or margin-right.

Anyway, while I'm not sure if my approach has legs, I hope to learn a few things and keep the fire burning.

Arigato gozaimasu!

[gibrown]

A use case I'd really like to see supported is being able to rotate the headings of tables.

Here I am trying to have basically a matrix of checkboxes across two dimensions. Because it is fairly dense, having the column text be rotated makes the most sense.

[ramonjd]

A use case I'd really like to see supported is being able to rotate the headings of tables.

I've had a PR rolling for a while that will add writing-mode block supports.

Out of the box it'll apply to the entire container:

Which isn't exactly fetching.

If we're to target individual cells, then something at the toolbar level might be more suitable.

Just thinking out loud, it might be possible after this PR lands (skipping individual block supports) to rewire the table block and apply the style to specific cells.

There are issues suggesting a major overhaul/enhancement of the table block.

[jasmussen]

If we're to target individual cells, then something at the toolbar level might be more suitable.

If the table block were to support inner-blocks, then it would presumably get the per-paragraph rotation from your PR for free? If yes, that seems like a good argument for some of those larger Table block enhancements to land first.

[mtias]

I don't think the table block would ever support arbitrary inner blocks, fwiw.

[jasmussen]

Oh of course, a paragraph inside a cell would mean still more inner blocks. But it would be nice if the same orientation property could be opted in by the cell itself then.

[jasmussen]

Free-form rotating text can potentially be useful. It can even work together with vertical text through the writing-mode/text-orientation combo discussed. But we might also learn, if the latter lands, that the former isn't actually necessary. In that light, and for a focus on a first minimal version, I'm closing this one in favor of #50319. We can always reopen.

[mtias]

I'm going to close this as done given the OP request is for vertical text rather than free form rotation which seems a separate matter.

[mtias]

I think we need to allow horizontal flipping here to cover the design use cases.