Centering text in Text2D

[royibernthal]

How do I make the Text2D text centered? As in centering the actual text according to the Text2D origin, not centering the Text2D within its parent.

Do I pass the desired origin in options in the Text2D constructor? I tried doing that and I didn't see any change, maybe I did it wrong?

[royibernthal]

Is my question clear or should I rephrase / explain with images?

[adam]

18 minutes ago, royibernthal said:

Is my question clear or should I rephrase / explain with images?

A playground example would help.

[royibernthal]

@adam There's nothing for me to write in a playground, I don't even know the direction. Here's a picture where I try to explain how a centered text should behave, let me know if it helps.

[Nabroski]

If you not happy how text is centered(im happy with it) why you dont use all the other methods to get text align ?

[adam]

I'm not seeing anything in the docs for what I think you are asking for. 

 

I'm assuming

what you want is something

like this.

All this text would be

in one Text2D object. 

Right?

 

You can create a feature request here:

https://trello.com/b/eKMKhCFc/canvas2d

 

If you can't wait, you could write a function that parses your text and adds line breaks and extra spaces before adding it to the Text2D object.

centerText(text:string: width:number){

....

}

I might be able to help you with that, but I'd like to make sure someone else doesn't have a better solution.

[chicagobob123]

Adam here is a playground with some text handling features I wrote. 

Feel free to give them a try. 

http://www.babylonjs-playground.com/#1MCWZJ#24

[royibernthal]

11 hours ago, Nabroski said:

If you not happy how text is centered(im happy with it) why you dont use all the other methods to get text align ?

By default the text is not centered. What text align methods are you talking about? It'd help if you could create a PG of a centered text if the solution for it exists.

 

@adam Yeah that's what I mean. I was thinking about changing the origin of the textfield to x: 0.5, that much seems to be covered in the docs. I can't seem to pull it off though, I suspect I'm not setting the origin right, or otherwise it doesn't behave the way I think it does. If you think it might be a direction, care to give it a try?

Regarding creating my own solution, yeah that's a possibility. Is there an event dispatched whenever the text is changed? If so, an optimized solution would be pretty easy to do.

 

@chicagobob123 Seems like a bit of an overkill don't you think?

[chicagobob123]

Take as much our little as you need. It's not sewn together. 

[royibernthal]

I was looking for an already built in solution, but since there is none, I believe this to be the simplest solution: textField.x = -textField.width / 2

I created a class extending Group2D containing Text2D and added align options, with centering being a simple textField.x = -textField.width / 2 that is executed in a text setter.

[chicagobob123]

If you can share it via a playground example that helps everyone

[royibernthal]

It's written in typescript, is there a way to create a PG for that?

[adam]

I was thinking something like this:

http://babylonjs-playground.com/#2AVSFH#59

I really need to use the width of each char though instead of counting the them.

[adam]

This looks a little better:

http://babylonjs-playground.com/#2AVSFH#60

http://babylonjs-playground.com/#2AVSFH#61

[royibernthal]

I forgot to emphasize that I'm talking about a single line text, I was really looking for a very plain solution.

However, your solution looks good, I'm sure it'll help others

[Nabroski]

Hey man, if you know your input string just press [spacebar] few times and do \n somewhere, works since the 60ties.

[adam]

24 minutes ago, royibernthal said:

I forgot to emphasize that I'm talking about a single line text,

Yeah, that would have been nice to know.

[royibernthal]

Yeah sorry about that  It's why we had a hard time trying to understand each other.

[adam]

Why doesn't the Hello World example work for you?

http://babylonjs-playground.com/#2AVSFH#35

[royibernthal]

I dislike static solutions (i.e. typing spaces), they'll usually require rewrite often, e.g. whenever you change design / font size / etc... even if you do know the text ahead of time.

Regarding your solution, while it's nice it's not very accurate (and also would probably require constant rewrite and attention as well in the long run).

If I'd have tried my hand at creating a centered multiline textfield, I'd probably create a Group2D containing an array of Text2D children according to the number of lines, spread them around according to each line's height and center them according to each line's width. It'd generate a very accurate result, though I'm not sure how efficient it'd be performance-wise.

[adam]

2 minutes ago, royibernthal said:

Regarding your solution, while it's nice it's not very accurate (and also would probably require constant rewrite and attention as well in the long run).

Yeah, that's why I said:

54 minutes ago, adam said:

I really need to use the width of each char though instead of counting the them.

 

[royibernthal]

Did you consider creating a for loop that goes over all possible characters (e.g. a-z, 0-9) and test each char size by setting the char to a textfield's text and saving the textfield's size with only that char in it?

That'd give you each char's size (width x height), but even if you have that info, do you have a way to apply it in your solution or are you limited to pushing a rough number of spaces according to the actual space required?

 

Regarding hello world example - literally, it's a centered text, but it's not what I need - I tried to explain what I need in detail in my previous posts, problem solved though so I guess it doesn't matter anymore.

[adam]

Here it is using the actual widths of the words:

http://babylonjs-playground.com/#2AVSFH#65

[royibernthal]

Looks good, well done.