From Binary Static Layouts to Semantic Web-Based Architectures

1. Introduction: The Dichotomy of Digital Documents

The evolution of digital reading formats represents a fundamental divergence in philosophy regarding the nature of a "document." On one branch of this evolutionary tree lies the philosophy of the "page"—a static, immutable canvas where content is defined by absolute spatial positioning. This philosophy is embodied by the Portable Document Format (PDF), which treats a document as a sequence of fixed 2D planes, preserving the visual fidelity of print at the cost of semantic flexibility. On the other branch lies the philosophy of the "flow"—a dynamic, semantic stream of content that adapts to its container. This philosophy is epitomized by the Electronic Publication (EPUB) standard, which treats a document as a structured hierarchy of meaning, utilizing the technologies of the Open Web Platform (HTML, CSS, XML) to decouple content from presentation.

In the contemporary landscape of digital publishing, this dichotomy presents complex challenges for software architects, content creators, and reading system developers. The proliferation of mobile devices with varying aspect ratios and pixel densities has exposed the fragility of the fixed-page model, while the increasing legal and moral imperative for accessibility has highlighted the limitations of binary formats. Simultaneously, the rise of proprietary ecosystems—most notably Amazon’s Kindle platform—has introduced a third variable: the "walled garden" format that wraps open standards in proprietary encryption and databases, creating interoperability friction.

This report provides an exhaustive technical analysis of these competing standards, dissecting their internal architectures, rendering behaviors, and suitability for modern publishing needs. Furthermore, moving from analysis to synthesis, this document outlines a comprehensive architectural blueprint for a next-generation, web-based EPUB reading system. By leveraging modern browser APIs such as Shadow DOM, Service Workers, and CSS Custom Properties, this proposed system aims to resolve the tension between authorial intent and user customization, delivering a reading experience that is at once highly performant, accessible, and aesthetically versatile.

2. Technical Anatomy of Reading Formats

To understand the functional differences between EPUB, PDF, and proprietary formats, one must first understand their underlying file structures and rendering models. These are not merely differences in file extensions; they represent distinct computational approaches to displaying information.

2.1 The EPUB Architecture: A Website in a Container

EPUB (Electronic Publication) is an open standard maintained by the World Wide Web Consortium (W3C), having been absorbed from the International Digital Publishing Forum (IDPF). Fundamentally, an EPUB file is a packaged website. It is a ZIP archive containing a specific directory structure of HTML5 content documents, CSS stylesheets, images, fonts, and XML metadata files.1

2.1.1 The Open Container Format (OCF)

The outer shell of an EPUB is defined by the Open Container Format (OCF). This specification mandates the presence of a META-INF directory containing a container.xml file. This file serves as the bootstrapper for the reading system (RS). It identifies the location of the root file, typically the Open Packaging Format (OPF) file, thereby allowing the reading system to locate the publication's metadata and resource manifest.3 This abstraction allows a single EPUB container to potentially house multiple renditions of a text—for instance, a standard version and a specialized version for specific accessibility needs—though in practice, most EPUBs contain a single rendition.

2.1.2 The Open Packaging Format (OPF)

The OPF file (often with the extension .opf) is the central nervous system of the EPUB. It contains three critical components that distinguish an EPUB from a generic zip file of HTML:

1. Metadata: Unlike the binary metadata headers in PDF, EPUB uses XML-based metadata (Dublin Core) to describe the publication (Title, Creator, Language, Identifier). In EPUB 3, this section has been expanded to include granular accessibility metadata (e.g., schema:accessMode, schema:accessibilityFeature), allowing reading systems to inform users about the suitability of the content for their specific disabilities before they even open the book.4

2. Manifest: The manifest is a comprehensive inventory of every file inside the package. If a file (an image, a script, a stylesheet) is physically present in the ZIP archive but not listed in the OPF manifest, the reading system is required to ignore it. This explicit listing enhances security and ensures integrity.

3. Spine: The spine defines the linear reading order of the content documents. The web is non-linear; a user navigates via hyperlinks in an arbitrary order. A book, however, has a defined sequence—Chapter 1 follows the Prologue, Chapter 2 follows Chapter 1. The spine provides this sequence, enabling the "Next Page" logic essential for the reading experience.5

2.1.3 Content Documents and the Move to HTML5

In EPUB 2, content was based on XHTML 1.1. EPUB 3 modernized this to XHTML5 (an XML serialization of HTML5). This shift was transformative. It allowed EPUBs to natively support semantic elements like <nav>, <section>, <article>, and <aside>, as well as rich media elements like <audio> and <video>.6 More importantly, it enabled the use of MathML for scientific notation and SVG for scalable graphics, meaning that technical manuals and textbooks could finally move away from rasterized images of equations (which are inaccessible to screen readers) to semantic markup that can be spoken aloud by assistive technology.3

2.2 The Portable Document Format (PDF): The Object Graph

In stark contrast, PDF is a binary format based on the PostScript page description language. A PDF file is a collection of objects (booleans, numbers, strings, arrays, dictionaries, streams) that describe the visual appearance of a fixed sequence of pages.7

2.2.1 The Coordinate System vs. The DOM

The fundamental difference lies in how content is placed. In EPUB (HTML), content is placed via the Document Object Model (DOM) flow. An element's position is determined by its relationship to its parent and siblings, and by the constraints of the viewport. In PDF, content is placed using a Cartesian coordinate system. A line of text in a PDF is not necessarily a "paragraph" in a semantic sense; it is a string of glyphs drawn at specific X,Y coordinates.

This architectural difference explains why "reflow" is trivial for EPUB and mathematically arduous for PDF. To reflow a PDF, a reading system must use heuristics to guess that a line of text ending at X=500 and a new line starting at X=50 corresponds to a single logical sentence. This process, known as "text extraction" or "reflow mode" in PDF readers, is prone to errors, often resulting in broken paragraphs, lost hyphens, and garbled reading orders.6

2.2.2 The "Tagged PDF" (PDF/UA) Compromise

To address the lack of semantics, the PDF/UA (Universal Accessibility) standard introduced the concept of "Tagged PDF." This involves adding a parallel structure—a "tag tree"—to the file that maps the visual objects to semantic roles (e.g., "This text block at X,Y is a Level 1 Heading"). While this improves accessibility, allowing screen readers to determine a logical reading order, it is distinct from the visual rendering layer. A PDF can visually look perfect but have a completely broken tag tree, rendering it inaccessible. In contrast, in EPUB, the visual structure is derived from the semantic structure (the DOM), enforcing a tighter coupling between appearance and meaning.9

2.3 The Proprietary Ecosystem: MOBI, AZW3, and KFX

Amazon's dominance in the ebook market necessitates a detailed examination of its proprietary formats, which historically diverged from the open standard.

2.3.1 Legacy MOBI (The PalmDOC Era)

The MOBI format is a relic of the PDA era, based on the Mobipocket standard. Internally, it is a binary database (Palm Database Format or PDB) that stores text in a simplified HTML format with extremely limited CSS support. It lacks support for scalable fonts, complex tables, and virtually all modern layout features.2 While obsolete for content creation, it persists in legacy libraries and some sideloading workflows.

2.3.2 AZW3 (Kindle Format 8 - KF8)

AZW3 represented Amazon's pivot toward modern web standards. Internally, an AZW3 file acts as a wrapper for an EPUB-like structure. It supports HTML5 and CSS3, allowing for reflowable text, embedded fonts, and complex layouts similar to EPUB 3.10 However, it remains a proprietary container with Amazon's DRM (Digital Rights Management) scheme, effectively locking the content to Kindle hardware and apps.12

2.3.3 KFX (Kindle Format 10) and Enhanced Typesetting

KFX is the current gold standard for Amazon. It is not merely a file format but the output of a sophisticated rendering engine. When a publisher submits an EPUB to Amazon, it is converted into KFX. This process involves server-side calculation of line breaks, hyphenation, kerning, and ligatures.12 Unlike EPUB, where the device calculates line breaks at runtime (often resulting in "rivers" of white space in justified text), KFX delivers pre-calculated, high-quality typography. It effectively bridges the gap, offering the reflowability of EPUB with the typographic fidelity of PDF. However, the format is highly opaque, consisting of multiple fragmented database files, making it difficult to inspect or convert without loss of data.

3. Comparative Analysis: Capabilities and Trade-offs

The choice of format dictates the ceiling of the user experience. The following analysis breaks down the trade-offs across critical dimensions of digital reading.

3.1 Reflow, Layout, and Device Compatibility

Feature	EPUB 3.x	PDF 2.0	Kindle (KFX/AZW3)
Reflow Capability	Native & Fluid. Text wraps dynamically to any viewport width. Font sizes and margins are user-adjustable without breaking layout integrity. 1	Non-Existent. Fixed layout requires "pinch-and-zoom" on small screens. "Reflow mode" exists in some readers (e.g., Adobe Liquid Mode) but is heuristic-based and unreliable. 7	High. KFX supports advanced reflow with hyphenation and kerning optimization that rivals print quality. 12
Fixed Layout Support	Supported (FXL). EPUB 3 allows specific pages (or whole books) to be fixed-layout, useful for children's books and comics. 11	Native. This is the format's primary purpose. Perfect preservation of complex layouts (magazines, technical diagrams).	Supported. Similar to EPUB FXL, used for comics and graphic novels.
Cross-Device Compatibility	Universal (Non-Kindle). Native support on Apple Books, Google Play Books, Kobo, and essentially all non-Amazon readers. 2	Universal. Every major OS has a native PDF renderer. However, readability on mobile is poor due to lack of reflow. 6	Ecosystem Locked. Readability is excellent, but restricted to Kindle hardware and apps (iOS/Android/PC). 14

Insight: While PDF offers universal rendering (it looks the same everywhere), EPUB offers universal readability (it is legible everywhere). The "universality" of PDF is a liability on mobile devices, where the 6-inch screen is the dominant consumption form factor. The friction of panning horizontally to read a single sentence on a PDF significantly degrades reading comprehension and retention.7

3.2 Accessibility and Semantic Richness

Accessibility is where the divergence is most profound.

• EPUB: Because it is built on HTML5, it inherits the entire accessibility stack of the Open Web. Elements can be tagged with ARIA (Accessible Rich Internet Applications) roles. For example, a sidebar can be marked role="complementary", allowing a screen reader user to skip it easily. The epub:type attribute adds semantic meaning specific to publishing (e.g., epub:type="prologue", epub:type="glossary"), which assists navigation.4 Furthermore, EPUB 3 supports Media Overlays (SMIL), which allow for the synchronization of text and audio—highlighting the text as it is spoken—a critical feature for users with dyslexia or cognitive impairments.5

• PDF: Accessibility in PDF is additive, not native. A PDF without tags is a "digital image" of text to a screen reader. Remediating a PDF to be accessible (adding the tag tree, setting the reading order, adding alt text) is a labor-intensive, manual process. Even a fully accessible PDF/UA file often provides a clunky experience compared to EPUB, as the user cannot easily customize the visual presentation (e.g., changing colors to high contrast, changing fonts to OpenDyslexic) without breaking the fixed layout.4

3.3 Interactivity and Multimedia

• Scripting: EPUB 3 supports JavaScript. This allows for creating interactive textbooks with quizzes, dynamic graphs, and pop-up definitions. However, support varies by reading system due to security concerns (many readers disable JS by default).16

• Multimedia: EPUB natively supports <audio> and <video> tags. PDF supports media embedding, but it relies on external players or plugins (like Flash in the past, now heavily restricted), making it unreliable across platforms.

• Searchability: EPUB search is fast and accurate because the content is clean Unicode text. PDF search is often plagued by encoding issues (e.g., ligatures like "fi" being searchable only as a single glyph, or custom font encodings preventing text extraction).6

4. Architectural Blueprint for a Next-Generation EPUB Reader

Given the analysis above, building a modern reader requires handling the complexity of the EPUB format while mitigating the security and performance risks of displaying user-supplied HTML/JS content. The following section proposes a detailed architecture for a Web-Based (PWA) EPUB Reader.

4.1 Core Architecture: The Streamer-Navigator Pattern

We will adopt a "Streamer-Navigator" architecture, distinguishing between the backend (parsing/serving) and the frontend (rendering/interaction).17

4.1.1 The "Client-Side Streamer"

Traditional readers often unzip the EPUB on a server. For a modern, privacy-focused web app, we will implement a client-side streamer using Service Workers.

• Input Handling: The user drags an .epub file into the browser.

• Parsing: We use a JavaScript library (like JSZip) to unzip the file in memory.

• Virtual Server: A Service Worker intercepts HTTP requests from the renderer. When the renderer requests chapter1.html, the Service Worker catches the request, extracts the relevant file from the unzipped Blob in memory (or IndexedDB), and serves it back with the correct MIME type.18 This mocks a backend server, allowing the browser's engine to treat the EPUB resources as if they were hosted files, resolving relative paths (e.g., <img src="../images/cover.jpg">) correctly.

4.1.2 The Renderer: Iframe vs. Shadow DOM

Security is paramount. EPUBs can contain malicious JavaScript.

• Decision: Sandboxed Iframe. While Shadow DOM offers style encapsulation, it does not offer a strong security boundary for scripts. An <iframe> with the sandbox attribute is required.

• sandbox="allow-scripts allow-same-origin": We grant allow-scripts only if the user explicitly trusts the book, but generally, we disable it for safety.16

• Communication Bridge: The host application (React) communicates with the Iframe via window.postMessage. The host sends commands ("Go to Chapter 2", "Set Theme Dark") and receives events ("User clicked link", "Text selected").16

4.2 Theming and Styling Framework

The requirement is "highly customizable yet pre-stylized." This demands a sophisticated CSS strategy that goes beyond simple class toggling.

4.2.1 CSS Variables (Custom Properties) as the API

We will define a strict API of CSS variables that the Iframe's internal stylesheet will consume. This decouples the UI settings from the CSS implementation.

The Variable API:

Variable Name	Description	Default Value
--USER-font-family	Main body text font	serif
--USER-font-size	Base font size	100%
--USER-line-height	Inter-line spacing	1.5
--USER-bg-color	Page background	#ffffff
--USER-fg-color	Text color	#000000
--USER-margin	Horizontal page margins	20px

4.2.2 The Injection Mechanism: Constructable Stylesheets

Instead of appending <style> tags to the head (which triggers reflows), we will use the adoptedStyleSheets API. This allows us to create a single CSSStyleSheet object in memory and apply it to the Iframe's document instantly.19

Implementation Concept:

The Iframe loads a "User Agent" stylesheet by default:

CSS

/* base.css injected into every chapter /
body {
background-color: var(--USER-bg-color, #fff)!important;
color: var(--USER-fg-color, #000)!important;
font-family: var(--USER-font-family, serif);
font-size: var(--USER-font-size, 16px);
line-height: var(--USER-line-height, 1.5);
/ Enforce max-width for readability on large screens */
max-width: var(--USER-max-width, 70ch);
margin: 0 auto;
}

• The Specificity War: Authors often write specific CSS (e.g., p { font-family: "Garamond"; }). To ensure user preferences (like Dyslexia fonts) take precedence, our injected stylesheet will utilize the !important flag or higher specificity selectors (e.g., :root body p) when the user activates "Enforce Override" mode.21

4.2.3 Pre-Stylization Templates

We will offer three distinct "Reading Modes" which set these variables in bulk:

1. Classic: Serif font (Merriweather), warm background (#fbf0d9), justified text.

2. Modern: Sans-serif (Inter/Roboto), stark white background, relaxed line height.

3. High-Accessibility: Hyper-legible font (Atkinson Hyperlegible), high contrast (Yellow on Black), ragged-right alignment (prevents "rivers" of white space which confuse tracking), loose letter spacing.4

4.3 Pagination and Layout Algorithms

Reflowing text into "pages" on the web is difficult because HTML is designed to scroll vertically. We need a horizontal paging experience.

4.3.1 CSS Multi-Column Layout (Columnar Pagination)

The most robust method for web-based pagination is using CSS Multi-Column Layout.

• Mechanism: The content container is set to height: 100vh and column-width: 100vw.

• Result: The browser flows the content into columns that match the viewport width. "Turning the page" becomes a simple CSS transform: translateX(-100vw).

• Advantage: This leverages the browser's native layout engine for text balancing and is highly performant compared to JavaScript-calculated page breaks.16

4.4 Navigation and State Management

4.4.1 CFI (Canonical Fragment Identifier)

We cannot rely on "Page Number" because page 5 on a phone is page 2 on a tablet. We must use EPUB CFI.

• Definition: A CFI is a pointer like /6/4[chap1ref]!/4/2/1:0. It points to a specific DOM node and a character offset.

• Implementation: When the user stops reading, we calculate the CFI of the visible element. When they return, even if they changed the font size, the reader jumps to that exact sentence, recalculating the "page number" dynamically.22

4.5 Performance Optimizations

4.5.1 Virtualization

Loading a 500-page chapter into the DOM will crash a mobile browser.

• Solution: We implement "Chapter Virtualization." We parse the spine, but only load the current chapter's HTML into the Iframe. We pre-fetch the next chapter in the background (Service Worker cache).

• DOM Node Limit: If a single chapter is massive (e.g., "The Bible" as one file), we must use DOM virtualization—rendering only the visible paragraphs and replacing off-screen ones with empty placeholder divs of the same height.23

4.5.2 Caching Strategy

• Stale-While-Revalidate: For the "Library" list (book metadata, covers), we allow the user to see the cached list immediately while checking the server for updates.

• Cache-First: For the book content itself (inside the .epub), we use a strict Cache-First strategy. Once a chapter is unzipped and cached, we never hit the network again for it.25

5. Accessibility Implementation Strategy

Building an accessible reader requires more than just high-contrast themes. It requires deep integration with Assistive Technologies (AT).

5.1 Focus Management and Skip Links

When a user clicks "Next Page," the visual content changes, but the focus might remain on the "Next" button.

• Problem: A screen reader user might press "Next" and hear nothing, unaware the page turned.

• Solution: On page turn, we programmatically move the keyboard focus to the top of the content area (or a hidden "start of page" heading). This forces the screen reader to announce the new content.27

5.2 ARIA Live Regions for Announcements

We will use a visually hidden div with aria-live="polite".

• Usage: When the page turns, we inject text: "Page 4 of 25." The screen reader will speak this announcement politely (without interrupting the current speech), giving the user context about their navigation.29

5.3 Semantic Mapping

The EPUB epub:type attributes must be mapped to ARIA roles.

• <nav epub:type="toc"> -> role="doc-toc"

• <section epub:type="chapter"> -> role="doc-chapter"

• <a epub:type="noteref"> -> role="doc-noteref"
  This allows users to navigate by landmarks (e.g., "Jump to Table of Contents") using their screen reader's rotor.15

6. Implementation Plan: Roadmap & MVP

6.1 Phase 1: The Core Engine (MVP)

Goal: Parse an EPUB and render it reflowably.

1. Ingestion: Implement JSZip to unpack the uploaded .epub file.

2. Parser: Write an XML parser to read container.xml and the .opf file to build the Spine array.

3. Renderer: Create the Iframe component. Implement the Service Worker to intercept Iframe requests and serve unzipped assets.

4. Pagination: Implement the CSS Columnar layout for the Iframe body.

5. Controls: Basic Next/Prev buttons that manipulate the translateX of the Iframe content.

6.2 Phase 2: Theming and Persistence

Goal: User customization.

1. Settings UI: React Context to store fontSize, theme.

2. Injection: Use requestAnimationFrame to detect Iframe load and inject adoptedStyleSheets with the CSS variables derived from the Settings Context.

3. Storage: Use localForage (IndexedDB wrapper) to store the unzipped book blobs (for offline access) and the user's last CFI position.

6.3 Phase 3: Accessibility and Advanced Features

Goal: Compliance and Polish.

1. TOC: Render the Navigation Document (XHTML table of contents) into a sidebar nav.

2. Search: Implement a worker-thread search index (using lunr.js or flexsearch) that indexes the unzipped text files without blocking the UI.

3. A11y: Implement the Focus Trap for settings modals and the Focus Management logic for page turns.

6.4 Risk Considerations

• Malicious Content: Allowing arbitrary HTML is risky. Mitigation: Strict CSP (Content Security Policy) headers in the Service Worker responses and sandbox attributes on the Iframe.

• Storage Quotas: Browsers limit storage (often ~50-100MB on iOS Safari). Mitigation: Implement an LRU (Least Recently Used) eviction policy to delete old books from the cache when space is tight.

• Performance: Large rendering trees cause jank. Mitigation: Strict usage of will-change: transform CSS properties to promote the book content to a GPU layer.31

7. Sample Code Implementation

7.1 Service Worker Caching Strategy (TypeScript)

This Service Worker handles the "Virtual Server" logic, intercepting requests for book resources and serving them from the unzipped data in IndexedDB.

TypeScript

// service-worker.ts
/// <reference lib="webworker" />

import { clientsClaim } from 'workbox-core';
import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import localforage from 'localforage';

clientsClaim();

// 1. Intercept requests to the virtual book path
// URL pattern: https://reader-app.com/book/{bookID}/{resourcePath}
const BOOK_ROUTE_REGEX = new RegExp('/book/([^/]+)/(.*)');

self.addEventListener('fetch', (event: FetchEvent) => {
const url = new URL(event.request.url);
const match = BOOK_ROUTE_REGEX.exec(url.pathname);

if (match) {
const bookId = match;
const resourcePath = match;

event.respondWith(
(async () => {
// Try to find the file in our specific IndexedDB store for this book
const fileBlob = await localforage.getItem<Blob>(`book_${bookId}_${resourcePath}`);

if (fileBlob) {
// Determine MIME type based on extension
const mimeType = getMimeType(resourcePath);
return new Response(fileBlob, {
headers: {
'Content-Type': mimeType,
'Cache-Control': 'public, max-age=31536000' // High cache for immutable book content
}
});
} else {
return new Response('File not found', { status: 404 });
}
})()
);
}
});

function getMimeType(path: string): string {
if (path.endsWith('.html') |

| path.endsWith('.xhtml')) return 'application/xhtml+xml';
if (path.endsWith('.css')) return 'text/css';
if (path.endsWith('.jpg')) return 'image/jpeg';
//... extensive MIME mapping
return 'application/octet-stream';
}

7.2 The React Renderer with Shadow DOM/Iframe Injection

This component handles the rendering and style injection.

TypeScript

// Reader.tsx
import React, { useEffect, useRef, useState } from 'react';
import { useSettings } from './SettingsContext';

interface ReaderProps {
bookId: string;
chapterPath: string; // e.g., "OEBPS/chapter1.xhtml"
}

export const Reader: React.FC<ReaderProps> = ({ bookId, chapterPath }) => {
const iframeRef = useRef<HTMLIFrameElement>(null);
const { theme, fontSize, fontFamily } = useSettings();

// Construct the virtual URL that the Service Worker will intercept
const contentUrl = /book/${bookId}/${chapterPath};

// Reactive Style Injection
useEffect(() => {
const iframe = iframeRef.current;
if (!iframe) return;

const injectStyles = () => {
const doc = iframe.contentDocument;
if (!doc) return;

// Create the CSS Variables string
const cssVariables = :root { --USER-bg-color: ${theme === 'dark'? '#1a1a1a' : '#ffffff'}; --USER-fg-color: ${theme === 'dark'? '#e0e0e0' : '#000000'}; --USER-font-size: ${fontSize}px; --USER-font-family: ${fontFamily}; } ;

// The Base User Agent Stylesheet
const baseStyles = body { background-color: var(--USER-bg-color)!important; color: var(--USER-fg-color)!important; font-size: var(--USER-font-size)!important; font-family: var(--USER-font-family)!important; /* Columnar Layout for Pagination */ height: 100vh; width: 100vw; column-width: 100vw; column-gap: 0; margin: 0; padding: 20px; box-sizing: border-box; } img { max-width: 100%; height: auto; } ;

// Use Constructable Stylesheets for performance
const sheet = new CSSStyleSheet();
sheet.replaceSync(cssVariables + baseStyles);

// Apply to the Iframe document
doc.adoptedStyleSheets = [sheet];
};

iframe.addEventListener('load', injectStyles);
// If already loaded (e.g. from cache), inject immediately
if (iframe.contentDocument?.readyState === 'complete') {
injectStyles();
}

return () => iframe.removeEventListener('load', injectStyles);
},); // Re-run when settings change

return (
<div className="reader-container">
<iframe
ref={iframeRef}
src={contentUrl}
title="Book Content"
sandbox="allow-same-origin" // allow-scripts removed for security
style={{ border: 'none', width: '100%', height: '100%' }}
/>
</div>
);
};

8. Conclusion

The transition from print to digital is not merely a change in medium but a change in dimension. Where paper is static and fixed, the screen is fluid and responsive. The EPUB format, built upon the bedrock of the Open Web, is the only format capable of fulfilling the promise of digital reading: to be accessible to all, readable on any device, and adaptable to the needs of the user.

While PDF retains its place for archival and print-replica purposes, it is an evolutionary dead-end for general reading. The proprietary forks of EPUB (Kindle) serve business models rather than user needs, creating silos that hinder the free exchange of knowledge.

The architectural plan outlined in this report—leveraging Service Workers for performant delivery, Shadow DOM principles for robust styling, and rigorous accessibility practices—provides a blueprint for a reading system that honors the semantic richness of the book while embracing the dynamic capabilities of the browser. By building this system, developers do not just display text; they build a tool that democratizes access to information, ensuring that reading is a right, not a privilege dependent on visual acuity or device screen size.

Works cited

1. What is the difference between viewing eBooks in PDF and EPUB formats online?, accessed December 31, 2025, https://connect.ebsco.com/s/article/What-is-the-difference-between-viewing-eBooks-in-PDF-and-EPUB-formats-online

2. EPUB vs PDF: Pros and Cons of ePublishing Formats - MAPSystems, accessed December 31, 2025, https://mapsystemsindia.com/resources/epub-vs-pdf-format.html

3. EPUB - Wikipedia, accessed December 31, 2025, https://en.wikipedia.org/wiki/EPUB

4. Best Practices for Creating Accessible Ebooks - The A11Y Collective, accessed December 31, 2025, https://www.a11y-collective.com/blog/ebook-accessibility/

5. ePub2 or ePub3: Which one is the best for eBook Conversion? - AEL Data, accessed December 31, 2025, https://aeldata.com/epub2-or-epub3/

6. ePub vs PDF: What's the Difference, accessed December 31, 2025, https://pdfcandy.com/blog/epub-vs-pdf.html

7. Top 7 Advantages of ePUB over PDF in 2025 - Kitaboo, accessed December 31, 2025, https://kitaboo.com/top-6-advantages-of-epub-over-pdf/

8. EPUB vs. PDF: Discover the Differences - UPDF, accessed December 31, 2025, https://updf.com/knowledge/epub-vs-pdf/

9. PDF vs. Word vs. HTML: Accessible Document Format Guide - Yomu AI, accessed December 31, 2025, https://www.yomu.ai/blog/pdf-vs-word-vs-html-accessible-document-format-guide

10. The Different Ebook Formats Explained: EPUB, MOBI, AZW, IBA, and More - MakeUseOf, accessed December 31, 2025, https://www.makeuseof.com/tag/ebook-formats-explained/

11. What are the differences between the EPUB, MOBI, AZW3 and PDF file formats? - Quora, accessed December 31, 2025, https://www.quora.com/What-are-the-differences-between-the-EPUB-MOBI-AZW3-and-PDF-file-formats

12. .AZW3 vs .MOBI? Why is AZW3 better than MOBI? : r/kindle - Reddit, accessed December 31, 2025, https://www.reddit.com/r/kindle/comments/f2zkx2/azw3_vs_mobi_why_is_azw3_better_than_mobi/

13. Comparison of e-book formats - Wikipedia, accessed December 31, 2025, https://en.wikipedia.org/wiki/Comparison_of_e-book_formats

14. EPUB vs. MOBI vs. PDF: Which Book Format Should You Use? | Kindlepreneur, accessed December 31, 2025, https://kindlepreneur.com/epub-vs-mobi-vs-pdf/

15. WAI-ARIA Roles - ARIA - MDN Web Docs, accessed December 31, 2025, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles

16. futurepress/epub.js: Enhanced eBooks in the browser. - GitHub, accessed December 31, 2025, https://github.com/futurepress/epub.js/

17. Readium Architecture, accessed December 31, 2025, https://readium.org/architecture/

18. Boost Performance and Offline Capability with Service Worker Caching | Leapcell, accessed December 31, 2025, https://leapcell.io/blog/boost-performance-and-offline-capability-with-service-worker-caching

19. Using shadow DOM - Web APIs | MDN, accessed December 31, 2025, https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

20. ShadowRoot: adoptedStyleSheets property - Web APIs | MDN, accessed December 31, 2025, https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets

21. What is the difference between default, user and author style sheets? - Stack Overflow, accessed December 31, 2025, https://stackoverflow.com/questions/18252356/what-is-the-difference-between-default-user-and-author-style-sheets

22. johnfactotum/foliate-js: Render e-books in the browser - GitHub, accessed December 31, 2025, https://github.com/johnfactotum/foliate-js

23. Optimize DOM Size For Better Web Performance - DebugBear, accessed December 31, 2025, https://www.debugbear.com/blog/excessive-dom-size

24. Optimize DOM size | Performance insights - Chrome for Developers, accessed December 31, 2025, https://developer.chrome.com/docs/performance/insights/dom-size

25. Service Worker Caching Strategies Based on Request Types | by Thomas Steiner - Medium, accessed December 31, 2025, https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c

26. Strategies for service worker caching | Workbox - Chrome for Developers, accessed December 31, 2025, https://developer.chrome.com/docs/workbox/caching-strategies-overview

27. Focus management - VA.gov Design System, accessed December 31, 2025, https://design.va.gov/accessibility/focus-management

28. Managing Focus and Visible Focus Indicators: Practical Accessibility Guidance for the Web - Vispero, accessed December 31, 2025, https://vispero.com/resources/managing-focus-and-visible-focus-indicators-practical-accessibility-guidance-for-the-web/

29. ARIA live regions - Module 11 - ESDC / IT Accessibility office, accessed December 31, 2025, https://bati-itao.github.io/learning/esdc-self-paced-web-accessibility-course/module11/aria-live.html

30. ARIA: aria-live attribute - MDN Web Docs - Mozilla, accessed December 31, 2025, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live

31. 10 Ways to Minimize Reflows and Improve Performance - SitePoint, accessed December 31, 2025, https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/