how to display extra little characters above characters in a Text?

I'm revisiting an old need: displaying furigana (little phonetic characters that show how to pronounce Chinese characters in Japanese text). The result should look like this:


Those small characters above the main line of text are what I'm talking about.

I have good code for doing this in the old OnGUI system, but for the new UI system, it's proven considerably harder.

I started down the path of creating child Text objects for each such character. But this is ugly and probably inefficient.

Now I'm wondering if there is a better way. What I'd really like to do is just change the mesh that gets generated when the text is laid out. Is there any way to subclass or otherwise hook into the Text class, to do this sort of custom glyph layout?

Or if somebody has a better idea how to tackle something like this, please chime in!

 

hmmm...good question, and I might have to tackle it soon, so I might as well throw in a theory =p


I'm thinking have two different text objects, In the example you seem to have it about 2 small to one big, provided the characters on both are monospaced like fonts that are consistent <_< Use script to keep up with where characters are to control spacing,

my one concern with that is in the case where its a single character I notice its centered...I guess you could have a third text object run laid over offset to use in those cases.... <_<

Maybe not most efficient, but all I can think of currently. <_<

 

Yeah... this is pretty easy with the old GUI system, but under the new one, it's rather difficult, at least without creating a ton of GameObjects.

 

Well, keep in mind thats only three game objects for that method, and looking at the scenes, shouldn't cause to much of a problem.

But it really seems like it would be the easiest, most effective way.

You could look at a custom font system, but its not a character by character conversion, you could in theory make a larger library based on words, but I think for the effort it would take to make that happen, the first is still your best bet <_<

 

Well, I'm skeptical of that method. I don't think you could get the furigana to line up properly without having a separate Text for each character you're labeling.

 

One way to find out =p

Though like I said, that method does depend on a monospace font type....if you have that, then the rest should be completely controllable and dependable.

 

I managed to make this work with TextMesh Pro. It requires only a single text object, which can be a separate 3D object or part of a UI canvas.



It's done with creative use of rich style tags. The phonetics are placed behind the character they should appear above. You could use some writing convention or have a lookup table for characters, depending on your content pipeline:

To get it to work with TextMesh Pro, I defined two custom styles, one for two-character phonetics, and one for single-character phonetics to get the correct alignment. The final text input then becomes:

I fixed the line height at 1.5em so all lines have the same vertical distance. If I hadn't, lines without phonetics in them would be closer together. As this approach requires monospace, I forced the text to behave as such. You wouldn't need to explicitly do that with a monospace font.

The custom styles perform an offset and resize at the start and reset at the end. The single-character style needs to add an extra offset at the end.

I had to reapply the mspace tag, which again wouldn't be necessary for monospace fonts. For such fonts the styles would be simpler. And the specific spacing would depend on the font as well. This is assuming a 3em monospace character width.

 

This plugin is a perfect solution for me: https://github.com/jp-netsis/RubyTextMeshPro

 

Thank you, that looks really great!

 

have there been any updates to this solution?

 

Yep, for example: https://github.com/jp-netsis/RubyTextMeshPro/commit/828f9114d92ee926d8d7f978e1b944ebfabb09f7