I am making an educational game for children where they need to bold **names** from a paragraph of story-type text.
So far I have figured out a way to bold the selected characters but it has some issues. I use TextMeshPro Input Field with Read Only and Rich Text enabled, so the characters can be selected by highlighting. I wrote a script that adds < b> and < /b> tags around the selected text when a key is pressed. To detect the position where to insert them I used TMP_TextUtilities.FindNearestCharacter which works quite well.
The problem however is that when I keep bolding the words from the text, the index number of characters change as the bolding tags are calculated as well. The FindNearestCharacter method doesn't seem to count the tags though, so after a while the bolding has offset. I tried to counter this by creating a calculation that would take the increase in characters into account but it works only for some time. At some point the offset appears.
Another problem occurs in the case if the selected characters are already bold. Instead of adding extra tags there I would need to remove the existing tags if I want to unbold the characters.
So I am asking is there any other way to bold the selected text than to add HTML tags? It is enough if the text appears to be bold even though in reality it is not.
My coding level is somewhere between beginner and intermediate, so I am quite clueless how to continue from this or is it even possible with the UI text.
As far as I know, there is no other way to bold part of a text of the same Text component.
However, you could try to use one Text component for each word, and wrap all those Text component inside a horizontal layer. That way, each word would have its own Text component, and therefore its own “OnClick” callback. You could then change the bold attribute of the Text component, and notify your game logic about this word being selected/unselected.
Don’t know what the perfs would be tho’, but I think it won’t be that bad.
If you have trouble setting up this logic, keep me updated
I scrapped the use of FindNearestCharacter and instead found out that Input Field TMP stores data of the highlight box. I used inputFieldVariable.selectionStringAnchorPosition and selectionStringFocusPosition. They track the position of the highlight box's left and right edge (instead of coordinates they use the int value of the character which is at the same position) and take the bold tags into account when calculating index numbers unlike FindNearestCharacter.
Then I just used text.Insert to add the tags, text.IndexOf and LastIndexOf to search if there are tags existing, and then I removed them with text.Remove. Also I wrote lots and lots of if statements for different cases of inserting or removing the tags. Now the bolding and unbolding work well.
