johnfactotum / foliate-js Goto Github PK
View Code? Open in Web Editor NEWRender e-books in the browser
Home Page: https://johnfactotum.github.io/foliate-js/reader.html
License: MIT License
Render e-books in the browser
Home Page: https://johnfactotum.github.io/foliate-js/reader.html
License: MIT License
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:
::selection
. So basically only color and background color. Supposedly text-decoration
should also work, but not in WebKit and Firefox yet, it seems.It's probably a good fit for search highlighting. Less so for annotations, at least not until text-decoration
is supported.
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:
Hi,
Can I render the whole epub pages at one page?
MathML (https://www.w3.org/Math/) is not being rendered correctly.
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.