johnfactotum / foliate-js Goto Github PK

Hi @johnfactotum

First of all, thank you for this library, it's really awesome :)

I'm trying to store the current page of a document to the browser's local storage, so the user can resume reading where he or she left off. My idea was to update the values in the local storage every time the onRelocate event is triggered, as seen in the reader.js example reader, and then retrieve this value when loading again the document.

Going through the documentation, there is .goTo({ index, anchor }) method in the renderer, but I don't know the format of the attributes it requires, even after looking to the resolveHref() mentioned.

How can I achieve this?

Hi John,
I need an epub reader that I could add some extensions to it for studying languages, I do not mean for language learning, but mostly an interactive environment for linguistic proposes? The idea is a word or series of words or sentences when selected a popup like tooltip shows up and the researcher select a function from offered tooltip menu which triggers some linguistic application and returns results. Mostly like the features your Foliate has, that one has the capability of searching a dictionary, etc.
So the code in Foliate branch could have been ideal for this purpose, as long as I could have compiled it and experiment with it. But unfortunately all my attempts failed, the other issue is the number of technologies that you have used in building it which makes it even harder for a nonprofessional like me. Anyway, I decided to use Foliate-js, as it was just one technology, but to my surprise, after a few attempts and finally reading your readme carefully I discovered that scripting is not allowed.

Now the 64K question is there anyway to achieve my goal with Foliates-js, buy perhaps modifying it, if yes how would you go about it.
I am not a computer expert, but I do understand the basics, please explain it to me as if you are explaining it to a mentally retarded person, that why I will certainly comprehend it better!
Thanks for your time and help.
Bid

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

It can replace foliate-js's overlayer. But there are a couple of drawbacks:

• The properties that can be used are the same as those of ::selection. So basically only color and background color. Supposedly text-decoration should also work, but not in WebKit and Firefox yet, it seems.
• Overlapping highlights can't be overlaid. Only one style will win, depending on the priority.
• Not supported in Firefox yet, though implementation seems to be in progress in Nightly.

It's probably a good fit for search highlighting. Less so for annotations, at least not until text-decoration is supported.

My browser is set to dark mode, and when I try to load Rust From Zero To Prod epub I got this:

I can't share the book for legal reasons, but if you need a copy I can talk to the author and point here.

I really like what you're doing on foliate, I just need to know if you plan to export your library to NPM. If not, would you be interested in a Pull Request? Or is that really not your goal here?

And if you don't want to do it, would you mind if I made an NPM library based on your work on another repo (referencing you as the original author, of course)?

When zip.js trys to uncompress these broken images, it will throw header error. But foliate.js doesn't properly catch these error which aborts the whole rendering process.

How to reproduce:

1. Import this book in https://johnfactotum.github.io/foliate-js/reader.html
2. Click Chapter 1 Probability

Hi,

Can I render the whole epub pages at one page?

Chapter order in Calibre:

Chapter order in foliate.js:

Issue

MathML (https://www.w3.org/Math/) is not being rendered correctly.

Example

example code:

<div data-type="equation" id="simple_equation">
<h5><span class="label">Equation 5-7. </span>A simple equation example</h5>
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mtext>y</mtext>
<mo>=</mo>
<msub><mi>θ</mi> <mn>0</mn> </msub>
<mo>+</mo>
<msub><mi>θ</mi> <mn>1</mn> </msub>
<mo>×</mo>
<mtext>variable</mtext>
</mrow>
</math>
</div>

should render as (demoed in Calibre):

but is:

Thank you for your awesome work, I can now read e-books in the browser without installing various software on my devices.
But I still want to further request the api feature for read online ebooks, so that I can use one link to read the online e-books directly without download manually.
I think the link could be like this
https://johnfactotum.github.io/foliate-js/reader.html?file=`url-of-ebook`

It is very presumptuous to make such a request, but I think it is an important feature for an ebook reader in browser, and I‘m looking fordward to its coming.

is there any plans for typescript porting of foliate js?

This renderer could very well replace epub.js, but for us to really integrate it into our workflow a typescript port is needed

thanks for the great project

Hello,

Firstly, thank you for creating this!

I may have missed something, but how would I go about setting books to render inside a div? – I'm able to recreate the sample site, but wasn't actually sure how to set where books render to.

For example, the #render div would have a styled height and width within the window.

<div id='render'><div>

Sorry if this is already mentioned somewhere, I appreciate your time.

Solution should be to use position: fixed instead of absolute, reference: https://erikmartinjordan.com/position-absolute-ios however flex is also breaking this behavior which I don't know what to do about yet.

Also recommend using 100dvh / 100dvw instead of 100%

Is it possible to secure and stream epub (folder/.epub/.zip file) from server and can we directly pass path of the remote epub folder to book object? Any sample available?

Hey there. Thanks for developing this library.

I am very interested in replicating some Annotation features from Foliate into the foliate-js demo, so I can read books on my Android device.

The first step is obviously to be able to retrieve the selection from the document and get the CFI range. I have added the following to the Reader.onLoad():

doc.addEventListener('selectionchange', this.#onselect.bind(this))
//Where onselect is:
#onselect(range) {
        let selection = window.getSelection()
        console.log("Selection", selection)
        console.log("Range", range)
}

But neither the selection nor range seem to give me specific enough targets to work with.
Hope you can help me.

But a small tweek to this function can resolve this issue.

• How to install it in a browser?
• Do you plan, or already know, how to add page animation (flip or curl or slide or else)?
  Because yeah, epubjs seems dead and 0.3 broke all cool tricks.

If achieved this feature, will make more easy to read and use.

Thanks.

I use a non-integer scale factor on my laptop, which I'm guessing might be the cause of this bug. (I'm not entirely sure I understand all the factors that go into how Firefox determines the scale factor to use, but it seems to have arrived at a devicePixelRatio of 1.7647058823529411 with my current settings.)

When viewing a reflowable ebook on the first page of a chapter, the right column is cut off:

The layout on the next page is then shifted, showing the rest of the right column from the previous page, and cutting off even more of the new right column:

Subsequent page turns continue shifting by increasing amounts.

Wondering if it's possible to have vue integration so audiobookshelf can look into implementing this library for ebook support.

https://github.com/advplyr/audiobookshelf

I would like to suggest adding support for DAISY formatted eBooks to Foliate. DAISY is a format designed for people with print disabilities, including those with blindness, impaired vision, and dyslexia. Supporting this format would enhance Foliate's accessibility.

You can find some sample DAISY eBooks on Bookshare.