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

Cross page highlights

Open vorte opened this issue 2 years ago • 4 comments

Is it possible to take highlights across pages?

For example, I am on a mobile device and I start highlighting text. If I reach the end of the page with my text selection, I'd like the rendition to move to the next page and continue the selection. In this way, a highlight can be spread across 2 or more pages.

vorte avatar Aug 08 '23 17:08 vorte

You need to compare the selection range to the current location and turn to the next page if needed. I have a simple example here: https://github.com/johnfactotum/epubjs-tips#select-across-pages-when-using-paginated-layout. Note that this might not work if you're using CSS auto-hyphenation and the page ends on a hyphen because Epub.js calculates the current visible range based on words, not characters.

johnfactotum avatar Aug 09 '23 18:08 johnfactotum

Thank you, @johnfactotum, this looks exactly like what I need.

However, on mobile devices I keep hitting this issue - #1343 The columns shift to the side, so the view displays half of the current and previous pages. Any ideas for a workaround? I can't figure out why this is happening.

vorte avatar Aug 11 '23 12:08 vorte

Thank you, @johnfactotum, this looks exactly like what I need.

However, on mobile devices I keep hitting this issue - #1343 The columns shift to the side, so the view displays half of the current and previous pages. Any ideas for a workaround? I can't figure out why this is happening.

I did not find a solution. If you do, please let me know.

SamuelPremji avatar Aug 14 '23 21:08 SamuelPremji

You need to compare the selection range to the current location and turn to the next page if needed. I have a simple example here: https://github.com/johnfactotum/epubjs-tips#select-across-pages-when-using-paginated-layout. Note that this might not work if you're using CSS auto-hyphenation and the page ends on a hyphen because Epub.js calculates the current visible range based on words, not characters.

Any idea on how to fix this issue - #1343

SamuelPremji avatar Aug 14 '23 21:08 SamuelPremji