Problem with percentage and resolution changes

[danielvlopes]

Hello, first thanks for Monocle. The project is really interesting.

Monocle bases his places on percentage and it's calculated based on the pages of the component, right?! But an epub does not have fixed pages. If I change the font size switch from landscape to portrait on a tablet using a fluid container for the book the number of changes. So, I add a bookmark on 0.6% of my book and open it on other device with different resolution or change fontsize this bookmark will appear in another place.

I'm trying to work with chars offset instead of component percentage but I would like to know why the decision to use this approach.

Big Thanks.

[joseph]

This is more of a theoretical problem than a practical problem. Percentages turn out to be very accurate unless the changes you are making affect parts of the component disproportionately (for eg, substantially changing font-size in a component with a series of large images followed by the text).

Char offsets won't help you much there, but if you are working with content or functionality that is problematic with percentages, you could use some of the newer locus options for moving to a specific element. See stencil.js for a technique for finding what elements are on the page (in short, getClientRects), and lines 38-48 of book.js for how to get back to them.

[danielvlopes]

Thanks for answer Joseph. I'm planning to have a really responsive UI like Amazon Web Reader instead of a fixed ratio, so the size of the content could change drastically from widescreen to something like portrait. In something like Booki.sh it's not a problem because the ratio is always the same and when bookmarks changes it's that much.

I also need to create a feature where people can comment and highlight, which is what the stencil does (I think), but we're planning to no change the content of the ebook in order to be able to share the epub components with other users.

Don't you think char offsets instead of pixel offset could be the right approach for highlighting? (maybe for the bookmarks I really need to fix a ratio like Booki.sh).

[joseph]

Bookish doesn't have a fixed ratio on many devices (eg, iPad in landscape). Percentage-based positions still work fine.

For annotations, you will generally want a pointer to the start element and the end element (use a CSS selector or XPath), then char offsets or a unique string from there.

The stencil lets you click on interactive elements (ie links and videos, etc) "through" the panel. See the stencil test for details.