satorumurmur / bibi

Bibi | EPUB Reader on your website.

Bibi

EPUB Reader on your website.

Summary

You can publish EPUB books on the web, with full-featured viewer running on web browser. And you can embed it in other webpages (like YouTube videos).

Spec.

• EPUB 3+ and 2 compliant. Supports both reflowable and fixed-layout books of various language.
• Made with JavaScript. Works compatibly with all major web browsers on various OS/devices.
• Free. Open source software released under the MIT License.

Table of Contents

1. How to Setup & Read/Publish EPUB Books (for Users/Publishers)
2. How to Arrange Development Environment (for Developers)
3. License
4. Special Thanks
5. Supported by

---

How to Setup & Read/Publish EPUB Books

Bibi supports 3 ways to read/publish EPUB books:

• Read in browsers on your offline machine.
• Publish on the web to have your books read by someone.
• Use as an online EPUB viewer for your or visitors' local EPUBs.

In all cases,

1. Download Bibi from GitHub release page or Bibi website.
2. And unzip it at first.

Are you an user of BiB/i older than v1.0.0?

The folder structure and default public URL has changed in Bibi v1.0.0. But don't worry. You still can use not only the new style URL but also the same old style URL as before.

If you already published books on the web with BiB/i which version is older than v1.0.0, and want to update Bibi to v1.0.0 or newer, but do not want to change the public URLs of the books,

• Please download Bibi-vX.Y.Z_with_BackCompatKit.zip, and follow the document in it.

Read in browsers on your local machine

1. Open bibi/index.html in your browser, and
2. Drag an EPUB book and drop it into the window.
3. That's all!

Publish on the web

Demo.

You can publish both unzipped folder and zipped EPUB archive.

Using unzipped folder is recommended for the book which is heavy or contains many files. Using zipped EPUB file is recommended for the book which is light and contains less files.

In both ways, at first, upload bibi and 'bibi-bookshelf' folders to the same directory on your web server. bibi contains all programs of Bibi, and 'bibi-bookshelf' is for the storage of the books you upload. You can use different directory for the bookshelf instead of 'bibi-bookshelf' by editing "bookshelf" option in 'bibi/presets/default.js'.

Publish unzipped folders

1. Upload bibi and 'bibi-bookshelf' folders to the same directory on your web server.
2. Unzip an EPUB book,
   1. Change the file extension from .epub to .zip (BOOKNAME.epub -> BOOKNAME.zip), and
   2. Unzip the file with some tool.
3. Upload the unzipped folder BOOKNAME into bibi-bookshelf directory, and
4. Access to https://your.web.site/somewhere/bibi/?book=BOOKNAME by your browser. (note that it has no extension)
5. Or embed code below into your blog entry or other webpages, and visit the entry.

<a href="https://your.web.site/somewhere/bibi/?book=BOOKNAME" data-bibi="embed" data-bibi-style="[[ CSS for embeded Bibi frame, as you like ]]">[[ Title of the Book ]]</a><script src="https://your.web.site/somewhere/bibi/and/jo.js"></script>

Publish zipped EPUB files

1. Upload bibi and 'bibi-bookshelf' folders to the same directory on your web server.
2. Upload your EPUB book (ex. BOOKNAME.epub) to bibi-bookshelf directory, and
3. Access to https://your.web.site/somewhere/bibi/?book=BOOKNAME.epub by your browser.
4. Or embed code below into your blog entry or other webpages, and visit the entry.

<a href="https://your.web.site/somewhere/bibi/?book=BOOKNAME.epub" data-bibi="embed" data-bibi-style="[[ CSS for embeded Bibi frame, as you like ]]">[[ Title of the Book ]]</a><script src="https://your.web.site/somewhere/bibi/and/jo.js"></script>

Use as an online EPUB viewer

1. Upload bibi folder on your web server.
2. Navigate visitors to https://your.web.site/somewhere/bibi/.
3. Visitors can read one's local EPUBs by draging and dropping EPUBs into the window.

If you want to terminate this feature, set "no" to "accept-files" in bibi/presets/default.js.

How to Arrange Development Environment

Requirements

• Node.js + npm
  • Installing Node.js via package manager.
  • Or Downloads
• Windows development requires additional tools(Python + Visual C++ Build Environment). For more information consult the documentation

Arrangements

1. Clone this repository.
2. $ cd <the local repository>
3. $ npm install

How to Develop

1. $ npm start
   1. webpack generates development version of Bibi to __dist folder, and start to watch changes of the files in __src folder.
   2. BrowserSync webserver launches and navigate your browser to http://localhost:61671/bibi/?book=.
2. Edit source files.
   1. If you modify source files in __src folder, development version of the file(s) are updated in __dist folder automaticaly.
   2. BrowserSync reloads your browser(s) or inject changes of CSS.

Files in __dist folder generated with npm start are development version. Please don't forget to run npm run build and build production version before you upload.

Distribution	Source
__dist/bibi/*.html	__src/bibi/*.html
__dist/bibi/and/jo.js	__src/bibi/and/jo.js + __src/bibi/and/jo.scss
__dist/bibi/extensions/**	__src/bibi/extensions/**
__dist/bibi/presets/*.js	__src/bibi/presets/*.js
__dist/bibi/resources/scripts/bibi.js	__src/bibi/resources/scripts/*.js + __src/bibi/resources/scripts/bibi.book.scss
__dist/bibi/resources/styles/bibi.css	__src/bibi/resources/styles/*.scss
__dist/bibi/wardrobe/**/*.css	Read documents in __src/bibi/wardrobe/README-DRESS_ja (Sorry..., currently README is Japanese only)

Files in the Distribution column of the table are overwritten with the files updated by npm start or npm run build. If you want to modify them, please edit files in the Source column instead of editing these files in __dist directly.

How to Build

• $ npm run build
  • webpack generates production version of Bibi to __dist folder.
  • You can upload them to your online webserver.

How to Make a Ditribution Package

• $ npm run make:package
  1. webpack generates temporary files of production version of Bibi.
  2. gulp generates zipped archive to __archives folder. After that, the temporary files are removed.

License

Bibi (ja / en)

• © Satoru Matsushima (@satorumurmur)
• Open source under the MIT License

Bibi is including and powered by these open source softwares:

• Core:
  • sML.js : © Satoru Matsushima / Licensed under the MIT License
• UI:
  • Material Icons : © Material Design Authors & Google Inc. / Licensed under the Apache License version 2.0
• Extensions:
  • Bibi Zip Loader : © Lunascape / Licensed under the MIT License
  • DOMPurify : © Mario Heiderich / Dual licensed under the Apache License Version 2.0 or the Mozilla Public License Version 2.0
  • JSZip : © Stuart Knightley / Dual licensed under the MIT License or the GPLv3
  • JSZipUtils : © Stuart Knightley / Dual licensed under the MIT License or the GPLv3
  • JS-YAML : © Vitaly Puzrin / Licensed under the MIT License
• Polyfills:
  • classlist-polyfill : by Yola Inc. / Released into the public domain under the Unlicense
  • text-encoding-utf-8 : by Erik Arvidsson / Released into the public domain under the Unlicense
  • IntersectionObserver polyfill : © W3C / Licensed under the W3C Software and Document License
  • custom-event-polyfill : © Evan Krambuhl / Licensed under the MIT License
  • document.currentScript Polyfill : © Adam Miller / Licensed under the MIT License
  • ES6 Object.assign() : © Rubén Norte / Licensed under the MIT License
  • Native Promise Only (NPO) : © Kyle Simpson / Licensed under the MIT License
  • Polyfill Array.prototype.includes : © Kevin Latusinski / Licensed under the MIT License
  • String.prototype.padStart : © Khaled Al-Ansari / Licensed under the MIT License
  • url-polyfill : © Valentin Richard / Licensed under the MIT License

Special Thanks

Thanks to the contributors and the users around the world!

Supported by

Media Do Co.,Ltd

• Bibi v1.2.0 was developed with the huge support and many feedbacks from Media Do Co.,Ltd.

Lunascape

• Bibi v1.0.0 was developed with greateful support and sponsoring from Lunascape.
• Lunascape also developed Bibi Zip Loader especially for Bibi, which realized fast progressive loading of zipped EPUBs.

bibi's Issues

Does BiBi reader support bookmarks?

Does BiBi support the concept of bookmarks (i.e. track a reader's reading position in a document)? I have a use case where readers might read half-way through a document, for example, and then need to return to where they left off at a later date.

javascript error in EPUB on Edge or Firefox browser

When using javascript in the EPUB document for XHR, MS Edge browser and Firefox cannot get XHR target.

example

http://example.com/bibi/

+bookshelf
 +book1
   +OEBPS
    -p1.xhtml
    -p1.js
    -data.json
+i
 -index.html

// p1.js
document.addEventListener("DOMContentLoaded", function() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "data.json");
  xhr.send();
  alert(location.href);
});

result

Chrome / Safari / IE11

Can get "data.json",
alert shows : http://example.com/bibi/bookshelf/book1/OEBPS/p1.xhtml

Edge / Firefox

Cannot get "data.json" and XHR request send to wrong URI (http://example.com/bibi/i/data.json).
alert shows : http://example.com/bibi/i/?book=book1
It seems that document in the BiBi's iframe recognize wrong location.

I know that I should not use javascript and XHR in the EPUB. But I want to use it.

Cannot read book from extracted files

@satorumurmur
Hi,

I found the case you cannot read book from extracted files. Steps to reproduce the issue is:

1. Prepare EPUB file, now accessible_epub_3.epub from https://drive.google.com/folderview?id=0B9g8D2Y-6aPLflZXSGVlYlBUUUdZZ1VURlZSVndraDNGMkhReXVoem1MdXIwYUNaeVhWU0E&usp=drive_web&tid=0B9g8D2Y-6aPLflIyZE50Um50cG5BNkZSQ2NqcVhtUlZJSGRoVWhla3ktZ2JQdDJjdFNyZlk
2. Download BiB/i: wget http://bibi.epub.link/my/name/is/bibi-0.998.3.zip
3. Unzip BiB/i: unzip bibi-0.998.3.zip
4. Unzip the EPUB book: unzip accessible_epub_3.epub -d bibi-0.998.3/bib/bookshelf/accessible_epub_3.epub
5. Run web server: ruby -run -e httpd -- . -p 8000
6. visit http://localhost:8000/bibi-0.998.3/bib/i/index.html?book=accessible_epub_3.epub

then, spinner spins forever. http://localhost:8000/bibi-0.998.3/bib/i/index.html?book=accessible_epub_3.epub/ (trailing slash)also doesn't work.

Is that a bug? or expected behavior?

Thanks.

How to use the Framework on Android device。

How to use the Framework on Android device。Please😁

beforeChapterDisplay event

would it be possible to implement a beforeChapterDisplay event, that would fire each time a new chapter is displayed? a similar function exists in epub.js (which is much slower than bibi.js performance-wise = very sluggish on mobile devices).

Is there a way to view two pages on Pre-Paginated format?

Hi there!

I need to force 2 page view for pre-paginated (or fixed-layout) ePubs.

I search for an option on the presets file, but it seems there's no way to force it...

Any suggestion?

By the way, thanks for the project!

How does extenstion works? Is that possible to have any user extensions?

I am trying to apply some features about pop-up footnote, fixing for css3 unit vh/vw and page style, should I make any extensions?

Thanks in advance.

Remember progress

What determines if progress is remembered for a given book? I have different ePubs and some of them remember the reading progress, while others don't.

How to implement a full text search?

How can I set up a full text search? Is there maybe a working extensions which can easily integrated?

bibi获取本地文件问题

not work when "book-display-mode" = "spread" or "item"

OS XのFirefoxとGoogle Chrome上で、手元のEPUB3ファイルを展開して試した所、default.jsの"book-display-mode"がallの時は動くのですが、spreadもしくはitemにするとLoading..の途中で動かなくなります。

JSのコンソールに出るエラーのログは以下のとおりです。

Firefoxの場合:

[03:46:28.957] ReferenceError: reference to undefined property TargetItem.Spread @ http://localhost/bibi/bib/i/res/script/bibi.js:1087
[03:46:28.957] TypeError: TargetItem.Spread is undefined @ http://localhost/bibi/bib/i/res/script/bibi.js:1087

Google Chromeの場合：

Uncaught TypeError: Cannot read property 'style' of undefined bibi.js:1087

How to embed this way?

Sorry for my ignorance, but I did not understand how I incorporate so that "Click to open" does not appear.
I wish it were like this: http://prntscr.com/ket6mt

is there any way to open the epub files from remote location like s3 server

Hi,
I need to show epub file in the web site,but we don't have chance to locate the files in bookshelf folder locally.is there any way to open the epub files from s3 remote location.

Any help much appreciate.

Thanks

Can't get some features that appears in demo page

Hi, I don't manage to get some features that appears on the first embed on demo page
Like the Right to left reading, the "items loaded" message when I first click on the embed.

Here is my test page : http://91.121.173.74/reader/
I try to come with a manga reader, and try to add prev/next basic link (I don't change your library, not yet), and an ebook selector from a basic ajax file tree.

Thakns in advance for the help.

without dragging and dropping files

How to get local ePub files without dragging and dropping files to upload

I would like an API to trigger bibi to run again

I want to add an ePub to a page as part of a modal dialog. Is there a way to trigger bibi to look for book elements on a page again, once the .js is already loaded?

EPUB CFI doesn't work when text node is specified

Moving to page specified by EPUB CFI is unique and great feature but there seems an issue. When you specify text node using EPUB CFI like #epubcfi(/6/14!/4/46/1), BiB/i start with the first page instead of the page itemref of 14 refers.

Not to move to the text node but the begining of XHTML page including the node is okay. But not to move anywhere and showing error "Uncaught TypeError: Cannot read property 'childNodes' of null" in console is problem.

My environment:

• Ubuntu 15.10
• Chromium 45.0
• Revision 6b5d0d1

Cookie doesn't work for multiple ebooks on the same server

I have been investigating this issue and I believe that Bibi 0.999.4 stores one cookie (for saving position) for each book readed. But it looks that it doesn't work, when there are multiple epub ebooks on the same server. I am using http://... for bookshelf, not the relative path.

Feature requested

Hi
I'd like to have an option to stick 2 current pages when viewing in paged or horizontal (with 2 current page).
Like there no more margin between the 2 pages.

It would be really great to have that (I think this need some custom rule in the EPUB creation though).

Thanks a lot.

How do you read an ebook directly from a web server?

How do you read a zipped .epub file that's in a web server?

Problem opening file from shortcut to local installation

Hi Folks,

Followed the instructions from section 2 of the "manual" and have a local copy of bib/i working quite happily. I can drop a file on the target or click and browse and the epub opens as expected.
However I'm having trouble with the following...

As with the web publication of the next item, if you use the bookshelf folder, you can also specify a book with the URL in the address bar so you can treat it like a bookshelf when combined with the browser bookmark.

I've put a copy of the epub in "bookshelf" but no matter what I try when creating a desktop shortcut the system reports that the file cannot be found.

Any chance of an example - I think I'm being thrown by "with the URL in the address bar so you can treat it like a bookshelf when combined with the browser bookmark."

Many thanks,

Andy B.

You're The Best. But I wonder...

bibi.js error

Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined
at Bibi.ready (bibi.js:45)

I have an epub file and try to load in web server. I get this error. Can you please help me out?
Thanks in advance.

Paged layout doesn't work on mobile devices

While horizontal layout does work on mobiles devices, paged layout doesn't. When I tap the next page arrow, it stay on the same page. I have not tested vertical layout.

Fullscreen toggle doesn't update

If you manually exit or enter fullscreen, the toggle in the settings menu does not update to show the current state

XML support

Does this plugin support ePubs with XML content? I have an ePub which has XML files in it. It shows the TOC correctly but pages are not loaded. This ePub opens fine with normal ePub reader but not with this one.

Tool Bibi can view epub offset page?

My epub have total: 20 page .I want to prevent view epub offset: page 1->5. Tool Bib have support? Thanks!

[FEATURE REQUEST]Open file selection dialog

Hi,

To open an EPUB book, is it possible to make BiB/i able to open file selection dialog as well as drag-and-drop interface?

Because I usually don't keep file manager(Explorer, Finder...) open,
it's very nice if I may open file selection dialog via BiB/i window.

Could you consider?

Thanks.

Tagging

I think it's nice if git tagged when BiB/i is released.
If it will be done, we can specify BiB/i version by tag of git and GitHub URI. It's useful for development purpose.

How about you?

It is possible that the epub does not fully charge?

because to fully charge the animations on each page are lost ....

thanks in advance

Flip view Implementation

Hi Guys,

I was trying to implement flip-view for the epub files using BIBI, for achieving that I have added turn js to this application and tried to run by adding the turn function to element "bibi-main-book" by calling it as $('#bibi-main-book').turn() but after calling this the head and body tags content of iframe is becoming empty.

So Is there any way to achieve flip functionality like in here in to this application? Please provide your suggestions and ideas.

Thanks in advance.

Is there any way to start ebook from specific page

I want users to start reading from the page where they left off before. Is there any way for this issue?

Local Files will won't load when added to query sting

When trying to load epub books onto using i/index.html/.epub it says

The Origin of the Path of the Book Is Not Allowed.

i tried doing zipped and unzipped, .epup but they all say the same.

problem with android

when loading the ebook page on android, the top bar becomes impossibile to use, greying out
is there a solution for that?

Suggestions : Manage prev/next ebook

Your reader is really awesome, But it would be great if you can add a "ebook management".
Like a script that look in the folder and display a dropdown and/or button to go to next/prev ebook.

That will require some php though.
I'd like to help, and will try to help, but I have not very much free time to start this on my own ^^"

anyhow, your reader is really simple and easy to use, thanks for that.

fire event on selection of text

is it possible to fire an event when some text is selected / double clicked in the epub? i've tried the standard onselect / selectionchange javascript events, but they seem to be blocked. could you please share a snippet of code on how this could be done? this would help people translate words in the epub books.

Bug with encoding special characters

I have problems with some french special characters in the html content like 'é' rendered with a '頻' or 'à' rendered with a ''࠻...
Html is encoded in utf-8.
This problem does not occur all the time but only with some words or maybe some strings of characters. I don't understand why…
Have you any idea ?
Thanx.

Problem with the display mode between pages

When I press a button or link to another page , this increases in size and looks out of scale.

http://mauro66pop.esy.es/bib/i/?book=CONCERTA

Thanks in advance

annotations & highlight

Thanks for great project.
How to use annotate & highlight ?

Path resolving error

BiB/i doesn't seem able to parse svg-entry-sample.epub file linked from http://blog.cas-ub.com/?p=1094 correctly.
It requests /bib/i/styles/style.css but it doesn't exist. It should be a request to OEBPS/styles/style.css.

Issue displaying epub covers on "unopened" books

Hi, the subject says it all really...

I'm having trouble getting "covers" of unopened books to display as demonstrated at http://bibi.epub.link/#demo. I've tried both epub2 and epub3 files but rather than viewing the cover I see this:

I'm sure it's me doing something wrong but I can't see what - any ideas?

Thanks!

the demo can't read *.epub file by URL mode

I have uploaded the aaa.epub to bookshelf
input the following linkadress:
http://www.XXX.com/bibi/bib/i/?book=9787536455382.epub
but it doesn't works(win7\win2003\win2008)

When I test the demo site on winxp,it works well

I don't know why,please help me

Probem with unzipped epub

This works:
http://mywebsite/bibi/bib/i/?book=a.epub

This doesn't.
unzip a.epub -d a
http://mywebsite/bibi/bib/i?book=a

Links on navigation pane work improperly on mobile devices

I've found that choosing items from the navigation pane work very infrequently on iOS and Android. After much investigation, it seems to be because the 'click' event is not being fired most of the time. I was able to fix it locally with the following code fragment below:

L.postprocessItem.coordinateLinkages.setJump = function(A) {
eventName = O.Mobile ? "touchstart" : "click"

A.addEventListener(eventName, function(Eve) { 

menu clickable

epub menu is not clickable in xwalk webview.

xwalk library version = 'org.xwalk:xwalk_core_library:23.53.589.4';

please help me for this. .

Lazy Load/Preload

Is there a way to start reading the book before all the images and content has loaded? If a book has a lot of images, it can sometimes take a while to load, and I was thinking that maybe instead of seeing "Loading x/x items loaded" the pages could already start to display.

Embedding epub hosted on Github to blog post.

Hi,

I have some epub files hosted on Github. Is there any way I can use the epub files hosted on Github to embed those in my blog site?

For clarification, the bibi is hosted my personal site.

Thanks

Audio playback on embedded video EPUB3

I notice when you drag the ebook locally to the bib "upload" interface that it will play audio but when you embedded it into the library at the back of the site it will mute or not allow the audio to play.

is there a suggested fix or work around?

Download Button

Im trying adding a "Download" button, in the drop down menu, but looks like a cant (I`m not so expert in JS).
Is there a chance to implement it?

I also tried doing it in a separate page, putting "index.html" inside a iframe, but this won-t work either, since the index won`t load the epub.

any suggestion?

Error when opening EPUB files from IPFS

I am building a collection on books stored in IPFS. Files are identified by a hash rather than a name.

There are several ways to set up access, but the simplest is through the gateway on ipfs.io. Hashes can be resolved to files through a url of the form: http://ipfs.io/ipfs/HASH where HASH is a value like QmfZEJiQBhWmHLhP5ZDnV2CijF7R88Qp8iqn5g5qy7SCSD.

I created a set of supplemental presets, and added http://ipfs.io to trustworthy-origins and * to extract-if-necessary.

When I try to load a page with a URL like http://localhost:61671/bibi/?book=http://ipfs.io/ipfs/QmfZEJiQBhWmHLhP5ZDnV2CijF7R88Qp8iqn5g5qy7SCSD it tries to open a manifest on the server a couple times, which fails, then at the top of the page I get an error "Failed to open the book. Failed to open as both EPUB file and EPUB folder."

My assumption is it is being caused by the lack of a filename despite the wildcard for extracting.