Library for rendering e-books in the browser.
Features:
- Supports EPUB, MOBI, KF8 (AZW3), FB2, CBZ, PDF (experimental; requires PDF.js), or add support for other formats yourself by implementing the book interface
- Pure JavaScript
- Small and modular
- No dependencies
- Does not depend on or include any library for unzipping; bring your own Zip library
- Does not require loading whole file into memory
- Does not care about older browsers
The repo includes a demo viewer that can be used to open local files. To use it, serve the files with a server, and navigate to reader.html. Or visit the online demo hosted on GitHub. Note that it is very incomplete at the moment, and lacks many basic features such as keyboard shortcuts.
Also note that deobfuscating fonts with the IDPF algorithm requires a SHA-1 function. By default it uses Web Crypto, which is only available in secure contexts. Without HTTPS, you will need to modify reader.js and pass your own SHA-1 implementation.
It's far from complete or stable yet, though it should have near feature parity with Epub.js. There's no support for continuous scrolling, however.
Among other things, the fixed-layout renderer is notably unfinished at the moment.
This project uses native ES modules. There's no build step, and you can import them directly.
There are mainly three kinds of modules:
- Modules that parse and load books, implementing the "book" interface
comic-book.js, for comic book archives (CBZ)epub.jsandepubcfi.js, for EPUBfb2.js, for FictionBook 2mobi.js, for both Mobipocket files and KF8 (commonly known as AZW3) files
- Modules that handle pagination, implementing the "renderer" interface
fixed-layout.js, for fixed layout bookspaginator.js, for reflowable books
- Auxiliary modules used to add additional functionalities
overlayer.js, for rendering annotationsprogress.js, for getting reading progresssearch.js, for searching
The modules are designed to be modular. In general, they don't directly depend on each other. Instead they depend on certain interfaces, detailed below. The exception is view.js. It is the higher level renderer that strings most of the things together, and you can think of it as the main entry point of the library. See "Basic Usage" below.
The repo also includes a still higher level reader, though strictly speaking, reader.html (along with reader.js and its associated files in ui/ and vendor/) is not considered part of the library itself. It's akin to Epub.js Reader. You are expected to modify it or replace it with your own code.
import './view.js'
const view = document.createElement('foliate-view')
document.body.append(view)
view.addEventListener('relocate', e => {
console.log('location changed')
console.log(e.detail)
})
const book = /* an object implementing the "book" interface */
await view.open(book)
await view.goTo(/* path, section index, or CFI */)Scripting is not supported, as it is currently impossible to do so securely due to the content being served from the same origin (using blob: URLs).
Furthermore, while the renderers do use the sandox attribute on iframes, it is useless, as it requires allow-scripts due to a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=218086.
It is therefore imperative that you use Content Security Policy (CSP) to block all scripts except 'self'.
Warning
Do NOT use this library without CSP unless you completely trust the content you're rendering or can block scripts by other means.
Processors for each book format return an object that implements the following interface:
.sections: an array of sections in the book. Each item has the following properties:.load(): returns a string containing the URL that will be rendered. May be async..unload(): returns nothing. If present, can be used to free the section..createDocument(): returns aDocumentobject of the section. Used for searching. May be async..size: a number, the byte size of the section. Used for showing reading progress..linear: a string. If it is"no", the section is not part of the linear reading sequence (see thelinearattribute in EPUB)..cfi: base CFI string of the section. The part that goes before the!in CFIs..id: an identifier for the section, used for getting TOC item (see below). Can be anything, as long as they can be used as keys in aMap.
.dir: a string representing the page progression direction of the book ("rtl"or"ltr")..toc: an array representing the table of contents of the book. Each item has.label: a string label for the item.href: a string representing the destination of the item. Does not have to be a valid URL..subitems: a array that contains TOC items
.pageList: same as the TOC, but for the page list..metadata: an object representing the metadata of the book. Currently, it follows more or less the metadata schema of Readium's webpub manifest..rendition: an object that contains properties that correspond to the rendition properties in EPUB. If.layoutis"pre-paginated", the book is rendered with the fixed layout renderer..resolveHref(href): given an href string, returns an object representing the destination referenced by the href, which has the following properties:.index: the index of the referenced section in the.sectionarray.anchor(doc): given aDocumentobject, returns the document fragment referred to by the href (can either be anElementor aRange), ornull
.resolveCFI(cfi): same as above, but with a CFI string instead of href.isExternal(href): returns a boolean. Iftrue, the link should be opened externally.
The following methods are consumed by progress.js, for getting the correct TOC and page list item when navigating:
.splitTOCHref(href): given an href string (from the TOC), returns an array, the first element of which is theidof the section (see above), and the second element is the fragment identifier (can be any type; see below). May be async..getTOCFragment(doc, id): given aDocumentobject and a fragment identifier (the one provided by.splitTOCHref(); see above), returns aNoderepresenting the target linked by the TOC item
Almost all of the properties and methods are optional. At minimum it needs .sections and the .load() method for the sections, as otherwise there won't be anything to render.
Reading Zip-based formats will require adapting an external library. Both epub.js and comic-book.js expect a loader object that implements the following interface:
.entries: (only used bycomic-book.js) an array, each element of which has afilenameproperty, which is a string containing the filename (the full path)..loadText(filename): given the path, returns the contents of the file as string. May be async..loadBlob(filename): given the path, returns the file as aBlobobject. May be async..getSize(filename): returns the file size in bytes. Used to set the.sizeproperty for.sections(see above).
In the demo, this is implemented using zip.js, which is highly recommended because it seems to be the only library that supports random access for File objects (as well as HTTP range requests).
One advantage of having such an interface is that one can easily use it for reading unarchived files as well. For example, the demo has a loader that allows you to open unpacked EPUBs as directories.
It can read both MOBI and KF8 (.azw3, and combo .mobi files) from a File (or Blob) object. For MOBI files, it decompresses all text at once and splits the raw markup into sections at every <mbp:pagebreak>, instead of outputing one long page for the whole book, which drastically improves rendering performance. For KF8 files, it tries to decompress as little text as possible when loading a section, but it can still be quite slow due to the slowness of the current HUFF/CDIC decompressor implementation. In all cases, images and other resources are not loaded until they are needed.
Note that KF8 files can contain fonts that are zlib-compressed. They need to be decompressed with an external library. The demo uses fflate to decompress them.
There is a proof-of-concept, highly experimental adapter for PDF.js, with which you can show PDFs using the same fixed-layout renderer for EPUBs.
CBZs are similarly handled like fixed-layout EPUBs.
< 8000 div class="markdown-heading" dir="auto">