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