Showing text inside shape, on a specific location

Question

I’m trying to implement an app that will combine a text, and an audio of the text being read, with “read-along” functionality: the line of text being read is highlighted. Also, clicking on a specific line, jumps to that position in the audio. I have a program in Angular that can do the “read-along” (each sentence being an object, with info about its position in the audio, displayed as individual ’s one after the other).

Here’s some code.

<p>
  <span *ngFor="let sentence of sentences"
    [id]="sentence.line"
    [ngClass]="{'active': sentence.active}"
    [ngClass]="{'inactive': !sentence.active}"
    [ngStyle]="(currentTime >= sentence.start_time && currentTime < sentence.end_time)
                 ? playingStyle
                 : (hoveredID === sentence.line)
                     ? hoveredStyle
                     : normalStyle"
    (mouseover) = "showHovered(sentence.line)"
    (mouseout) = "showNormal()"
    (click)="sentence.active && play(sentence.start_time)"
    [innerHTML]="sentence.text"
    >
  </span>
</p>

The difficulty I’m having is that the text is to be displayed in a specific position and shape, on top of a background picture, so that it resembles the original book. The text is in Hebrew and needs to be displayed as RTL. (See for example CircularFLO, but I don't have a Mac, or InDesign, and I had trouble using it to display Hebrew RTL)

It seems that the CSS shape-inside has not been implemented, and it needs to be mimicked using shape-outside… I don’t find this practical for my needs.

I have looked at the following, among others:

• https://www.html5rocks.com/en/tutorials/shapes/getting-started/#toc-inside-shape
• https://css-tricks.com/using-css-to-set-text-inside-a-circle/
• https://codepen.io/noahblon/pen/pjvPPN

So: Is there any other option I could look into? I’m willing to try other technologies, and am not limited and stuck to creating a web application. But I do want it to be available to people without a Mac (including myself as the programmer).

Would SVG <tspan> be the way to go?

Thanks!