Text orientation: upright (vertical)

I’m trying to get text to be written vertically. In CSS there is a property “text-orientation: upright;” that suffices, but how do I do this in P3 please? (https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation : second example, orientation: upright)
Cheers in advance for help.

Rotate?

Thanks. Rotate would rotate the characters though, not set the text vertically. I’m writing in Japanese and that goes top to bottom, but without rotating the characters.

(In the example I linked, it’s the second one I want, the one with orientation: upright.)

Can’t be done natively in Phaser. You’ll either need to patch it in yourself or use a DOM object over the top.

Wow. That’s disappointing. OK. Thanks.

Text Game Objects in Phaser use the canvas fillText api, which has zero support for this. As soon as this becomes something canvas can do, I’ll support it. I wouldn’t hold your breath, though.

A solution would be making a linebreak after each character, assuming that you know when a new character is made

That would work for a single line of text, and is easy to implement by the dev, but it doesn’t work when you want to align multiple vertical lines of text. It’s kind of surprising canvas doesn’t support this, but then it can’t even do RTL text properly either, so maybe it isn’t.

Yeah, but since he’s writing in japanese then it should be relatively easy to just make a new text obj when it’s a “new line/sentence”. It just needs to be placed a certain amount of space next to the previous obj

Thanks .
I will have to work with a single column text word-wrap.
But yeah, given that nearly 1/3 of the planet writes in a language that goes vertical rather than horizontal, kind of surprised that this isn’t native in all text-related APIs now.

i think it’d technically be possible (if it’s a bitmaptext) to set the maxwidth to be the width of one character (assuming they’re about the same width). Then it should automatically play them on a new line

1 Like