How to save the exact position of the chord above the word in Textview?

Question

Java

Context:
mobile application with songs and chords for singing along with the guitar.
Task:
It is necessary that the chords are indicated above the words in the text of the song. Chords should be in bold. In this case, the chords should be located above those parts of the text where the transition to this particular chord is necessary - this task is implemented by placing spaces between the chords above the text of the song itself.
As initial data, we are given lyrics (txt), where the chords are shifted to the right places with the help of spaces.
Example:

How would you solve this problem?
UPD1: I tried to take all the text from the file into a line, add line break tags, replace spaces with and use Html.fromHtml(data) to translate everything into HTML, but for some reason the chords still shift a little (I highlighted where it moved out).

data = data.replaceAll("(\\r|\\n)", "<br>");
data = data.replace(" ", "&nbsp;&nbsp;");
tv.setText(Html.fromHtml(data));

Answer 1

I would write a custom view.
In this case, I will know exactly all the positions.

Answer 2

Here's a not-so-fresh idea.
Chords change on a syllable. Highlight or underline the desired syllable - it will be clear that there should already be a new chord.
Good luck!