Need help in Pixi to draw text vertically.

[Navinv789]

Hello,

 

I need help in drawing text vertically using using pixi. 

Ex: have to print text "NAME" in container as below;

N

A

M

E

 

Ex 2: Text=" NAME PIXI"

N P

A I

M X

E I

[ivan.popelyshev]

Hi!

CSS has that property (text-orientation:upright), but its not possible to use in canvas2d text, so , pixi naturally doesnt support it. 

Two ways to do that

1. Make a text per each character. Manually position it. Say goodbye to performance if there are more than 200 characters.
2. Copy pixi text source and make your class that  works vertically.

Edited July 14, 2020 by ivan.popelyshev

[b10b]

A hacky approach could be to use a bitmap font, with each character pre-rotated -90 degrees.  Construct the text as normal (using BitmapText) then rotate that +90 degrees. ?

[opd]

To make your text appear as in the sample image, you can rotate the textfield.

myTextField.rotation=-Math.PI/2;

Alternatively, to make your text appear as in Ex1, you can start a new line after each character with \n 

myTextField.text='N\nA\nM\nE'

Edited July 15, 2020 by opd

[Navinv789]

On 7/15/2020 at 10:15 AM, opd said:

To make your text appear as in the sample image, you can rotate the textfield.

myTextField.rotation=-Math.PI/2;

Alternatively, to make your text appear as in Ex1, you can start a new line after each character with \n 

myTextField.text='N\nA\nM\nE'

I am using PIXI.TextMetrics.measureText to check whethe the text will be accomodated in the given area or not. Based on the result I am changing the font size and performing word wrap operations.

But with this solution both will fail. And Example 2 will not be working