epub.js icon indicating copy to clipboard operation
epub.js copied to clipboard

How to highlight words from SMIL file

Open Subliminalman opened this issue 2 years ago • 1 comments

I'm trying to highlight words from an SMIL file embedded in the epub.

The SMIL file has lines of words to be read aloud and to be highlighted that look like this.

<par id="par3"> <text src="../6.xhtml#_idTextSpan049" /> <audio clipBegin="13.040" clipEnd="14.200" src="../audio/audio.mp3"/> </par>

I'm able to load up the mp3 just fine but I'm trying to highlight the word right now.

From what I gather I have to get the CFI range for that item in the text. I was trying to get the element from the _idTextSpan049 in the xhtml file that it's associated with and calling cfiFromElement but I'm really stuck right now and don't know what to do. I don't know what to call object to call cfiFromElement on.

This feels extremely hard to do a highlight on a word.

Subliminalman avatar Aug 12 '22 02:08 Subliminalman

book.rendition.hooks.content.register(async (contents, view) => { currentDoc = contents.document;; } ///

/// you should have ../6.xhtml#_idTextSpan049 this data data =' ../6.xhtml#_idTextSpan049' const id = data.split('#')[1]; const elem = currentDoc.getElementById(id); elem.style.color = 'red';

Maksee1337 avatar Sep 30 '22 10:09 Maksee1337