Epub Reader v3

[majora2007]

After playing with BookFusion's epub reader, I've been inspired to bring some of the functionality into Kavita's reader and streamline some of our UX to match some patterns found in BookFusion.

New Features:

1. Search within Book for free text
2. Highlighting (and storing) free text
3. Bookmarks (Pages you want to quickly get back to with user text)
4. Allow customization of link, background, and text (pure override)
5. On bottom show Page scroller
6. On bottom, show Progress amount
7. Allow moving to the next chapter/page by scrolling (optional)

Changes:

1. Using 2 buttons only for changing margin, font size, etc.
2. Default user to column layout instead of "Default" and rename "Default" to Virtual Scrolling

This ticket needs designs

[hollisticated-horse]

I'd be down for a penpot draft. I've made a team if you're interested @majora2007 or anyone else. I havn't checked out BookFusion though, I'll go and give it a spin.

I intended to publish feedback on the last major update. I'll do it here. (I'll get screenshots to show what I mean)

Currently, as of 0.6.1:

• font size does not work consistently.
• I'd like to be able to import custom fonts (like Confortaa) -> I don't know how doable that would be, or if anyone else wants that feature..
• maybe have one navigation bar, with settings for users to set it to top or bottom.
• for the sake on consistency (minor UI element), maybe be use similar icons for the navigation bar as the manga/comics reader ?
• maybe have a tab system in the side bar, for settings, highlights and bookmarks (based of Foliate, linux ebook reader)
• which does mean that it needs to be determined where to put the text search bar ?
• a progress bar + information bar (maybe inspired by Koreader or Foliate) with multiple settings to modulate what info is shown

[puppysnuff]

I don't know if you solicit feedback, but bookmarks are the most important feature to me given the list above.

[hollisticated-horse]

Project Board.pdf Here Is a Design Board I made a while back for the Progress Bar. Just to put it out there ( sorry for the blurry image, I don't know how to make it work better).

I'm going to get back to the design of the epub reader if it's still needed.

[hollisticated-horse]

@puppysnuff I believe the bookmarking is fuctionnal as of November 2023. Probably was working earlier, didn't check.

[GottZ]

another suggestion: text-to-speech

if you use edge for example, you can highlight a word and select "read" from the context menu. apparently the stylesheet is missing appropriate colors for that tho. it would be nice, if it was added as "read from scroll-top" like functionality. pretty much all browsers can use the operating systems tts engines for that. further info: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis

that's what it is doing on edge:

additionally kavita has big issues keeping the current reading line on top when resizing the window or loading state on a device with different aspect ratio and dpi. I'll dig into that issue myself most likely and see if I can provide a fix.

[GottZ]

in case anyone cares:

p .msreadout-word-highlight:not(.msreadout-inactive-highlight) {
    background: transparent !important;
    text-shadow: 0em 0em 1em, 0em 0em 0.2em;
    color: color-mix(in srgb, currentcolor 70%, lawngreen) !important;
}

p .msreadout-line-highlight:not(.msreadout-inactive-highlight) {
    background: transparent !important;
    color: color-mix(in srgb, currentcolor 70%, lawngreen) !important;
}

I did not touch the -ms-high-contrast media query tho.

I had to add p in front tho. their !important statements make it quite hard to customize.

microsofts code present in edge: webpack://./css/read_out_loud_web.css

/* Copyright (C) Microsoft Corporation. All rights reserved. */

.msreadout-word-highlight:not(.msreadout-inactive-highlight) {
    background: #ffff00 !important;
    color: black !important;
}

.msreadout-line-highlight:not(.msreadout-inactive-highlight) {
    background: #b2d6f3 !important;
    color: black !important;
}

@media screen and (-ms-high-contrast: active) {
    .msreadout-word-highlight:not(.msreadout-inactive-highlight) {
        -ms-high-contrast-adjust: none;
        background-color: Highlight !important;
        color: HighlightText !important;
    }

    .msreadout-line-highlight:not(.msreadout-inactive-highlight) {
        -ms-high-contrast-adjust: none;
        background: yellow !important;
        color: black !important;
    }
}

so now you know how this can be customized.