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.

[nachfuellbar]

Will the epub Reader be able to handle Manga better in the future?
Aka i have margins for normal books active which i don't want for Manga or else the pictures can get pretty small

Another question altogether - is it possible to make settings per screen ratio or something similiar?
When using a smartphone other settings are needed than when reading on pc

[scare376]

As discussed in discord there are a few enhancements that https://github.com/ttu-ttu/ebook-reader has that would enhance the experience in kavita further.

1.) More reading stats. Ttsu reader tracks number of characters read and can track time. (Can test this yourself by enabling statistics in the settings)
2.) Shows the read character count/total characters and the progress as a percentage in the corner.

3.) Includes a calendar that you can click on individual days to get the stats for that day.

4.) When you close the book it will leave an icon to show you where you stopped (bookmark icon in the image). You can also set a custom read point that will let you mark where you left off as well (red lines in the image).
5.) Custom font options (As of this moment this is currently being worked on in a PR)