Stable EPUB annotations across devices: fixed layout or reflowable?

[NurViewer]

Hello everyone!

I'm a member of a software development team working on a cross-platform document and e-book reader.

We've been thinking about a particular challenge with EPUB reading, and I'd really appreciate hearing the opinions of experienced EPUB users here.

Our concern is keeping annotations accurately attached to their original content across different devices, especially when those annotations involve not just highlighted text, but also images, tables, diagrams, handwritten marks, and longer notes.

As we all know, EPUB is traditionally designed around reflowable content. This is wonderful for adjusting font sizes and reading comfortably on different screens.

However, reflowing can also make position-based graphical annotations more difficult to manage consistently across devices.

To address this, we've implemented a more stable, page-like rendering approach, while allowing users to read through the EPUB by scrolling continuously, somewhat like reading a PDF.

Our goal is to preserve the relationship between text, images, and their annotations as reliably as possible when moving between Windows PCs, tablets, and phones.

I'd love to hear your thoughts on a few questions:

1. Do you prefer continuous vertical scrolling or traditional page-by-page reading for EPUB books?

2. Would you find a stable-layout reading mode useful for technical books, textbooks, academic materials, or EPUBs with complex formatting?

3. If preserving the exact placement of diagrams and graphical annotations meant giving up some flexibility in font resizing or text reflow, would that be an acceptable trade-off?

4. Have you used any EPUB readers that handle cross-device graphical annotations particularly well, especially when switching between different screen sizes?

5. Would you prefer having both a traditional reflowable reading mode and a stable-layout annotation mode available?

We're particularly interested in learning about real-world reading habits and problems that users encounter.

We're still evaluating the best long-term approach, and constructive criticism would be very welcome.

Thank you for sharing your experience!

[Turtle91]

Originally Posted by NurViewer

Hello everyone!

Hi!

Originally Posted by NurViewer

...

However, reflowing can also make position-based graphical annotations more difficult to manage consistently across devices.

To address this, we've implemented a more stable, page-like rendering approach, while allowing users to read through the EPUB by scrolling continuously, somewhat like reading a PDF.

An idea is to have element ID's. Notes/annotations are referenced against a particular ID that remains consistent no matter the display size/orientation/font etc.
eg.
<p id="0123456789" class="awesome">my own unique para!</p>
<p id="0123456790" class="awesomer">I'm better than that guy!</p>

You should be able to add the ID (sequential number ??) dynamically, as annotations are created, so the publisher isn't required to provide them on all documents. Not sure how that would be impacted by copyright law...

Originally Posted by NurViewer

I'd love to hear your thoughts on a few questions:

1. Do you prefer continuous vertical scrolling or traditional page-by-page reading for EPUB books?

Both - depending on my mood/situation.

If I'm sitting down for an extended reading session I like vertical scrolling usually with an auto-scroll enabled at my reading speed (adjustable on the fly for my tiredness level).

If I'm expecting to be interrupted regularly I choose the paged method so it'll only advance when I'm ready.

Originally Posted by NurViewer

2. Would you find a stable-layout reading mode useful for technical books, textbooks, academic materials, or EPUBs with complex formatting?

I am forced to read technical manuals in a PDF format. It is a nightmare! Especially noticeable when there are multiple columns on a page and I need to pinch/slide/zoom to go from the bottom of one column to the top of the next on the same page.

I would much prefer an intelligent reader that can reflow to the current reader's dimensions/orientation...while still displaying the content intelligently. Doesn't the flexbox/gridbox display css allow for much of what you are looking for - along with JS to resize/zoom the region as a whole?

Originally Posted by NurViewer

3. If preserving the exact placement of diagrams and graphical annotations meant giving up some flexibility in font resizing or text reflow, would that be an acceptable trade-off?

Only within the confines of that particular diagram/graphic.

<p>Normal paragraph.</p>
<p>Normal paragraph.</p>

<div id="0123456791" class="graphic">
   all your graphic/diagram stuff with static display
</div>

<p>Normal paragraph.</p>
<p>Normal paragraph.</p>

This was historically done by using an image of the graphic/diagram.
It'd be much better if this was done dynamicaly (ex mathML).

Originally Posted by NurViewer

4. Have you used any EPUB readers that handle cross-device graphical annotations particularly well, especially when switching between different screen sizes?

My current reader of choice, Readest, does cross-device annotations very well. I don't quite grok what would be different for a "graphical annotation" vs. a normal one?? If you mean something like drawing a line or a circle inside a graphic - couldn't you convert that to an SVG style definition with a reference to the unique ID I mentioned above?

Originally Posted by NurViewer

5. Would you prefer having both a traditional reflowable reading mode and a stable-layout annotation mode available?

As long as it is user selectable, that might not be bad. But I think you should be able to stabilize a region (div) without forcing that stabilization on the rest of the document.

Cheers!