TextMesh Pro textmeshpro right and left align on same line

We're working on a book app which has a lot of crazy formatting, but this is the first I'm not sure how to setup.

We have text on the left and numbers on the right. We need them to stay on the same line but line up on the left and right side. However, I need that to stay like this for all different screen sizes. These are just a few lines in the textbox with other text formatted other ways and I can't put them in their own box.

Code (CSharp):

1.  
2. This is text                                                        5000
3. This is text                      5000
4.  

I tried to set the numbers aligned to the right, but it aligned the enter line, even when I put it before the numbers. So, just trying to figure out how I would easily set this up.

Thanks for any help provided!

 

Here is a trick that makes this possible. This is in the category of creative use of rich text tags.



<align=left>This is the left aligned text<line-height=0>
<align=right>5,000<line-height=1em>
<align=left>This is the left aligned text<line-height=0>
<align=right>2,500<line-height=1em>

Basically, by setting the line height to zero, you are forcing the subsequent line to be on top of the previous. Since alignment is per line, you effectively have two line to control.

 

Edit: This was close and does make the text look correct, however, we have a highlighting feature that uses the top and bottom of a line to determine the size of the highlighting box and it breaks on this. Basically if there is a line above it, it uses the bottom of that line. Added image. The text that is highlighted overlaps a bit and then the numbers because they are now above the bottom of the line that is above them it doesn't setup the highlight box correctly.

This is just a weird format. It actually is from an xml file that a client gave us that was used in their web version of their book and from the looks of it, it's setup in an html table of some sort. It may be hard to reproduce this exact setup.

 

You could use the <mark=#FF00FF80> </mark> tag.



<mark=#ffff0080><align=left>Left aligned text<line-height=0>
<align=right>5,000<line-height=1em></mark>
<mark=#00ffff80><align=left>Left aligned text<line-height=0>
<align=right>2,500<line-height=1em>

The mark box is created by using the information contained in the textInfo. So if you have your own implementation to draw the box, you could do the same as the mark tag does.

You could also consider using two text objects with a Layout component.

 

I tried the mark tags. I actually wanted to use them as it would make my life a bit easier I think in the long run. It has it's own set of challenges, but if I can just insert tags into the text when a person sets a highlight, I could probably have an easier time setting it up. The challenges I faced with it though were just a few things.

The mark tags create an overlay on the text, thus tinting the text slightly and making it harder to read in some cases. This I solved by just having two text boxes with the text and having the behind textbox have a color that matched the background and then setting the mark tags on that text. Thus, putting the "highlights" behind the visible text. This worked fine from what I saw, even when I had to scroll the text together.

The second issue is that the mark tags don't always align that well and sometimes seem to create odd spacing. In the included image, the letter b is not lined up with the rest, so it actually is in just a slight bit. There is also a gap between the testify and believe line. I think this gap is because the testify line does not have a sub number on it and the other two lines do.

We are currently testing with the Arial font converted into the SDF that TMP uses, however, there is a possibility the client will want to provide their own fonts. So it's possible that the alignment issues will exist with the different fonts. The code I ended up writing is determining the furthest left position of the text for all lines and then using that as the point of the left side of the highlight box so that they would be aligned.

It will be difficult to use multiple boxes as a user has to be able to tap on a line of text (which can span multiple lines) and have the line underlined. Then they will pick a highlight color which will add that color to that line.

We do have access to the paid version as I have already added additional tags to code that will be parsed out but are used for other things we are doing. I don't know if this helps and would allow us to make adjustments to how the mark tags determine size.

 

Thanks for the suggestions. I ended up going a different route. I set the text within width tags to contain it on one side and have it wrap. Then set the number using a pos tag which keeps it on the right side. It's close enough to what we need.

 

<mark=#ffff0080><align=left>Left aligned text<line-height=0>
<align=right>5,000<line-height=1em></mark>
<mark=#00ffff80><align=left>Left aligned text<line-height=0>
<align=right>2,500<line-height=1em>
is not works

 

I need to review the behavior of the <line-height> with a value of 0. Until then, you can use something like <line-height=0.001>

 

A problem with the line-height hack seems to be that you'll have issues with auto-sizing the text object as there's now nothing preventing the left-aligned and right-aligned texts from overlapping (as they're formally on different lines).

I got around this by adding another ugly hack where I replace the "invisible" newlines with some spaces and then pass that text to GetPreferredValues(string), and use the returned size to set preferredWidth on a LayoutElement.

Would be nice to have multiple align tags work "for real" though.

 

I'd just like to second @mklasson's observation. It would be great to have a solution that worked well with autoscaling.

 

Is there a way to do this in the c# code itself instead of the editor?

 

Since the ability to do this is via rich text which can be set in strings, it can most certainly be done via code.