Flipbook

Setup

To set up, here is the code

import {startup, Flipbook} from 'js/mediaviewer.js';
startup(); //Loads up the library
/**
     * Interactive, accessible flipbook/reader with realistic page‑turn animation,
     * zoom, high‑contrast theme, text highlighting (with optional sticky notes),
     * and built‑in text‑to‑speech (TTS) controls with local persistence.
     *
     * Requires `startup()` to be called once before instantiation so the library
     * can inject CSS and set the "media-viewer-enabled" gate attribute.
     *
     * @constructor
     * @param {string|HTMLElement} container
     * Root element (or CSS selector) that will host the flipbook.
     *
     * @param {{
     *   pages?: string[],
     *   width?: number|string,
     *   height?: number|string,
     *   rtl?: boolean,
     *   highlightColors?: string[],
     *   voice?: string,
     *   rate?: number,
     *   pitch?: number,
     *   persistKey?: string
     * }} [config] Flipbook configurations
     *
     * @param {{
     *   'bg'?: string,
     *   'page-bg'?: string,
     *   'shadow'?: string,
     *   'accent'?: string,
     *   'ink'?: string,
     *   'toolbar-bg'?: string,
     *   'toolbar-color'?: string,
     *   'contrast-bg'?: string,
     *   'contrast-ink'?: string,
     *   'width'?: string|number,
     *   'height'?: string|number
     * }} [styles]
     * Visual tokens mapped to CSS custom properties on the container as
     * `--flipbook-<token>` (e.g., `{ 'accent': '#4badde' }` → `--flipbook-accent: #4badde`).
     * Advanced animation-tuning variables used by the page‑turn (e.g.,
     * `--flip-curl-color`, `--flip-shadow-color`, `--flip-shadow-color-min`,
     * `--flip-bulge-scale`, `--flip-bulge-skew`) are *not* wired to `styles`;
     * set them via CSS or `element.style.setProperty('--flip-…', value)` if needed.
     *
     * @example
     * startup();
     * const fb = new Flipbook('.demo', {
     *   pages: ['<h2>Cover</h2>', '<h2>Page 2</h2>', '<h2>Page 3</h2>', '<h2>Page 4</h2>'],
     *   width: 900,
     *   height: 600,
     *   persistKey: 'demo-flipbook'
     * }, {
     *   'bg': '#f6f8fa',
     *   'page-bg': '#fff',
     *   'accent': '#4badde',
     *   'toolbar-bg': '#fff',
     *   'toolbar-color': '#0b0f14',
     *   'contrast-bg': '#0b0f14',
     *   'contrast-ink': '#fff'
     * }).getInstance();
     */
new Flipbook('.demo', {
// configurations
},
{
// CSS Before and After variables
});

Configurations

Label	Type	Values	Default	Description	Required
pages	string[]	any	[]	Pages of the page book	✔️
width	string|number	any	800	Sets the width of the book	✖️
height	string|number	any	520	Sets the height of the book	✖️
rtl	Boolean	true, false	false	Sets the text direction right to left	✖️
highlightColors	string[]	[]	['yellow','#ffad0d','#7bd389','#63cdda','#a29bfe','#ff6b6b','#ffd93d']	Allows to certain highlight colors	✖️
voice	string	Browser allowed voices	''	Sets the voice to TTS	✖️
rate	number	0-2	1	Sets the rate of the TTS	✖️
pitch	number	0-2	1	Sets the pitch of the TTS	✖️
persistKey	string	any	container.id|'flipbook'	persistKey for the options	✖️

Styles

Variable	Name	Values	Default	Description
--flipbook-bg	bg	color	#f6f8fa	Flipbook background
--flipbook-page-bg	page-bg	color	#ffffff	Page background
--flipbook-shadow	shadow	color	rgba(0,0,0,.18)	shadow color
--flipbook-accent	accent	color	#4badde	Accent color
--flipbook-ink	ink	color	#0b0f14	Ink color
--flipbook-toolbar-bg	toolbar-bg	color	#fff	Toolbar background
--flipbook-toolbar-color	toolbar-color	color	#0b0f14	Toolbar color
--flipbook-contrast-bg	contrast-bg	color	#0b0f14	Contrast background
--flipbook-contrast-ink	contrast-ink	color	#ffffff	Contrast ink
--flip-shadow-color	shadow-color	color	rgba(0, 0, 0, .26)	Drop shadow color
--flip-shadow-color-min	shadow-color-min	color	rgba(0, 0, 0, .12)	Drop shadow color at start/end
--flip-bulge-scale	bulge-scale	number	1.015	Bulge scale
--flip-bulge-skew	bulge-skew	number	0.35deg	Bulge curviness

HTML

To operate in HTML, use the following code

<!--Replace ... with any of the valid configurations-->
<div class="wrap">
    <section
      id="..."
      class="..."
      media-flipbook
      data-width="..."
      data-height="..."
      data-highlight-colors="..."
      data-persist-key="..."
      data-styles="...">
      <!-- Text page -->
      <page>
       ...
      </page>
    </section>
</div>
<script src="autoloader.js" type="module"></script>