NYPL Web Reader

This project is a web reader built by NYPL for reading eBooks. It was designed using the Readium Architecture, and specifically built for Webpubs. Webpub is a spec defined by the Readium Foundation to provide a common abstraction between many types of web publications. This project currently focuses on HTML-based Webpubs and Webpubs that define PDF collections. An HTML-based Webpub can be generated from many types of eBooks, but most commonly ePubs.

Demo - Example App

This project features an example application under /example, which is deployed here: https://nypl-web-reader.vercel.app.

Built With

- esbuild - JavaScript bundler for the web-reader package
- react-pdf - For creating PDF files on the browser and server
- chakra-ui - For styling the default UI components
- TypeScript - JavaScript with syntax for types
- React - For creating user interface components
- Jest & React Testing Library - For writing unit tests
- The Example App is packaged with Parcel & deployed with Vercel. Integration tests are run with Cypress.

Features

- [x] HTML-based webpub support (for EPUB, MOBI, etc formats)
- [x] PDF-based webpub support
- [x] Customizable UI
- [x] User settings
- [x] Font family (HTML only)
- [x] Font size (HTML only)
- [x] Color scheme (night, day, sepia)
- [x] Fullscreen
- [x] Paginated / Scrolling mode toggle
- [x] Zoom (PDF only)
- [x] WAI-ARIA compliant accessibility
- [x] Integration tested
- [ ] Offline support (prefetch and cache desired content via Service Worker, along with host app shell)
- [ ] Saving bookmarks / highlights

Examples

Basic usage within a React app, using the default UI:

``typescript
import WebReader from '@nypl/web-reader';

const ReaderPage = ({ manifestUrl }) => {
return (
webpubManifest={manifestUrl}
headerLeft={Back to app}
/>
);
};
`

- More React examples - Includes examples that render EPUB2 & EPUB3 based webpubs, remote hosted webpubs, and PDFs
- usePDFReader hook example - Useful for instances when you know you're only going to be using the web-reader to open PDFs
- useHTMLReader hook example - Useful for cases when you know you're only going to be using the web-reader to read EPUBs
- Real-world example: Open eBooks Web - NYPL application for children to read books on the web. This demonstrates how encrypted AxisNow content is passed to the web-reader.
- Real-world example: Digital Research Books (DRB) - NYPL application that collects digital versions of research books into one convenient place to search.

Required Fonts

In order for the Settings panel to be displayed as intended, the fonts Roboto, Georgia, and OpenDyslexic must be available to your application. Georgia is web safe, meaning it is installed by default on most devices, but the others are not. One way to include them is to copy them from the fonts folder in @nypl/web-reader/example/static into your /public directory. Alternatively, for Roboto, you can embed the Google Font into the of your html (directions here).

Required CSS Injectables for the HTML Reader (EPUBs)

Note: This section does not apply to PDFs

The HTML Reader can inject