Отображение текста внутри фигуры в определенном месте
Я пытаюсь реализовать приложение, которое объединит текст и звук читаемого текста с функцией «чтения вместе»: строка читаемого текста выделяется. Кроме того, щелчок по определенной строке позволяет перейти к этой позиции в звуке. У меня есть программа на Angular, которая может выполнять «чтение вместе» (каждое предложение является объектом, с информацией о его позиции в звуке, отображаемой как отдельные, одно за другим).
Вот код.
<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>
Сложность, с которой я столкнулся, заключается в том, что текст должен отображаться в определенной позиции и форме поверх фонового изображения, чтобы он напоминал оригинальную книгу. Текст на иврите должен отображаться как RTL. (См., Например, CircularFLO , но у меня нет Mac или InDesign, и у меня возникли проблемы с его использованием для отображения RTL на иврите)
Кажется, что CSS shape-inside не реализован, и его нужно имитировать с помощью shape-outside… Я не считаю это практичным для своих нужд.
Я рассмотрел, среди прочего, следующее:
- 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
Итак: есть ли другой вариант, который я мог бы изучить? Я готов попробовать другие технологии, и я не ограничен и не ограничен созданием веб-приложения. Но я хочу, чтобы он был доступен людям без Mac (включая меня как программиста).
Спасибо!