📖 Chapter 90: HTML for E-Books (EPUB 3)

Reflowable vs. Fixed-Layout EPUBs

Dynamic Reflow vs. Pre-Paginated Pixel Precision: Metadata Properties, Viewports, Synthetic Spreads, and Illustrated Books

LEARNING OBJECTIVES ⌵

Differentiate between Reflowable EPUBs (novels, technical books) and Fixed-Layout (FXL / Pre-paginated) EPUBs (comics, manga, children's books).
Configure publication-level and spine-level rendition metadata (rendition:layout, rendition:orientation, rendition:spread).
Master the Fixed-Layout viewport configuration (<meta name="viewport" content="width=..., height=..." />).
Construct seamless synthetic double-page spreads using page-spread-left and page-spread-right properties.
Configure right-to-left page progression (page-progression-direction="rtl") for Japanese Manga.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine water being poured into various containers. If you pour water into a tall, slender shot glass, it becomes tall and narrow; if you pour it into a wide, flat baking tray, it flattens and expands.

That liquid state is a Reflowable EPUB. The text adapts fluidly to any screen size, user font choice, or orientation. This is the optimal architecture for novels, essays, and technical manuals.

Now imagine freezing that water into a solid, intricately carved crystal ice sculpture. It has exact, immutable dimensions. If you place it in a small box, you cannot compress it; the box must scale its view to display the sculpture in its entirety.

Reflowable EPUB (Liquid Content):
[ 12pt Font, Small Screen ]  -->  [ 24pt Font, Giant Screen ]
(Re-paginates into 4 pages)       (Re-paginates into 1 page)

Fixed-Layout EPUB (Frozen Crystal Architecture):
+-----------------------------------------------------------+
|  Exact 1920x1080 Aspect Ratio (Pixel-Locked Canvas)       |
|  [Background Art] + [Layered Absolute Text Overlay]       |
+-----------------------------------------------------------+
(Scales uniformly with letterboxing / pillarboxing)

That frozen sculpture is a Fixed-Layout (FXL) EPUB. In FXL, the author dictates exact coordinates, background image positioning, multi-layer overlays, and aspect ratios. FXL is essential for graphic novels, comics, children's picture books, and multi-column magazine spreads.

Technical Deep Dive & Specifications

Reflowable vs. Fixed-Layout Technical Comparison

Dimension	Reflowable EPUB	Fixed-Layout (FXL / Pre-paginated)
Primary Use Cases	Novels, biographies, programming books	Comics, manga, cookbooks, children's picture books
`rendition:layout`	`reflowable` (Default)	`pre-paginated`
Viewport Meta Tag	Forbidden or ignored	Mandatory (`width=X, height=Y`)
Font Sizing by Reader	User can freely resize text	Font sizes are locked to viewport coordinates
CSS Positioning	Normal document flow (`relative`, `flex`)	Absolute coordinate positioning (`px`, `%`)
Spreads	Dynamically computed by reading engine	Explicitly authored (`page-spread-left / right`)
Accessibility (a11y)	Extremely high (Natural reflow, high contrast)	Lower (Requires careful ARIA overlay layering)

The EPUB 3 Rendition Metadata Vocabulary

Rendition properties are governed by the W3C EPUB Packages Rendition vocabulary (http://www.idpf.org/vocab/rendition/#).

1. Declaring Rendition Vocabulary in `package.opf`

<package xmlns="http://www.idpf.org/2007/opf" 
         unique-identifier="pub-id" 
         version="3.0" 
         prefix="rendition: http://www.idpf.org/vocab/rendition/#">

2. Global Publication Metadata Options

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
  <!-- Layout: reflowable | pre-paginated -->
  <meta property="rendition:layout">pre-paginated</meta>

  <!-- Orientation: auto | portrait | landscape -->
  <meta property="rendition:orientation">landscape</meta>

  <!-- Synthetic Spreads: auto | both | none | landscape -->
  <meta property="rendition:spread">auto</meta>
</metadata>

3. Spine-Level Property Overrides & Spreads

You can override layouts per document or bind two individual XHTML files into a unified two-page synthetic spread:

<spine page-progression-direction="ltr">
  <!-- Cover: Standalone center page -->
  <itemref idref="cover" properties="rendition:spread-none" />

  <!-- Two-page illustrated spread (Left + Right) -->
  <itemref idref="page01" properties="page-spread-left" />
  <itemref idref="page02" properties="page-spread-right" />

  <!-- Hybrid chapter that switches back to reflowable text -->
  <itemref idref="ch01" properties="rendition:layout-reflowable" />
</spine>

[!TIP] Japanese Manga Support: For Japanese Manga and right-to-left comic books, set <spine page-progression-direction="rtl">. In RTL mode, page-spread-right becomes the first page of the spread, and page-spread-left becomes the second page.

The Fixed-Layout Viewport Requirement

In Fixed-Layout content documents, every single XHTML file must declare a <meta name="viewport"> tag with explicit integer dimensions matching the aspect ratio of the artwork:

<head>
  <meta charset="UTF-8" />
  <!-- Exact pixel coordinate canvas -->
  <meta name="viewport" content="width=1920, height=1080" />
  <title>Page 1: The Galactic Fleet</title>
  <link rel="stylesheet" type="text/css" href="../styles/fxl.css" />
</head>

+-------------------------------------------------------------------------------+
|                      E-READER SCREEN (e.g. iPad Pro 4:3)                      |
|                                                                               |
|  [Pillarbox Black Bar]                                 [Pillarbox Black Bar]  |
|  +---------------------------------------------------+                        |
|  |  FIXED-LAYOUT VIEWPORT (16:9 - 1920x1080)         |                        |
|  |                                                   |                        |
|  |  (Scaled uniformly without distortion)            |                        |
|  +---------------------------------------------------+                        |
+-------------------------------------------------------------------------------+

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code: Fixed-Layout Package Manifest (`package.opf`)

Content Document with Coordinate Layering (`text/page01.xhtml`)

Accompanying FXL Stylesheet (`styles/fxl.css`)

Expected E-Reader Render Output (Landscape Double Spread)

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<?xml version="1.0" encoding="UTF-8"?>
<package xmlns="http://www.idpf.org/2007/opf" 
         unique-identifier="comic-id" 
         version="3.0" 
         prefix="rendition: http://www.idpf.org/vocab/rendition/#">

  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
    <dc:identifier id="comic-id">urn:uuid:8b3c2d1e-9a0f-4e5a-8b7c-1d2e3f4a5b6c</dc:identifier>
    <dc:title>Chronicles of the Deep Space Outpost</dc:title>
    <dc:language>en</dc:language>
    <meta property="dcterms:modified">2026-08-20T16:00:00Z</meta>

    <!-- Global Fixed-Layout Declarations -->
    <meta property="rendition:layout">pre-paginated</meta>
    <meta property="rendition:orientation">landscape</meta>
    <meta property="rendition:spread">both</meta>
  </metadata>

  <manifest>
    <item id="nav" href="text/nav.xhtml" media-type="application/xhtml+xml" properties="nav" />
    <item id="p01" href="text/page01.xhtml" media-type="application/xhtml+xml" />
    <item id="p02" href="text/page02.xhtml" media-type="application/xhtml+xml" />
    <item id="css-fxl" href="styles/fxl.css" media-type="text/css" />
    <item id="art-p01" href="images/art_page01.jpg" media-type="image/jpeg" />
    <item id="art-p02" href="images/art_page02.jpg" media-type="image/jpeg" />
  </manifest>

  <spine page-progression-direction="ltr">
    <!-- Two-page synthetic double spread -->
    <itemref idref="p01" properties="page-spread-left" />
    <itemref idref="p02" properties="page-spread-right" />
  </spine>

</package>

/* Fixed-Layout Coordinate Rules */
html, body {
  margin: 0;
  padding: 0;
  width: 1200px;
  height: 800px;
  overflow: hidden;
  position: relative;
  background-color: #000000;
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 800px;
  z-index: 1;
}

.full-bleed-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.speech-bubble {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #000000;
  border-radius: 18px;
  padding: 16px 20px;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 20px;
  line-height: 1.3;
  color: #000000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}

+-----------------------------------+-----------------------------------+
|  LEFT PAGE (page-spread-left)     |  RIGHT PAGE (page-spread-right)   |
|                                   |                                   |
|   +---------------------------+   |                                   |
|   | "Commander, atmospheric   |   |                                   |
|   |  thrusters locked at 80%" |   |                                   |
|   +---------------------------+   |                                   |
|                                   |   +---------------------------+   |
|         [ Spaceship Art ]         |   | "Initiate retro-burn      |   |
|                                   |   |  on my mark!"             |   |
|                                   |   +---------------------------+   |
|                                   |                                   |
+-----------------------------------+-----------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Fixed-Layout Children's Book Spread

Instructions:

Configure the <spine> in package.opf to display a 2-page children's storybook spread in landscape mode.
The left page (story_left.xhtml) must be assigned to page-spread-left.
The right page (story_right.xhtml) must be assigned to page-spread-right.
Create the XHTML file for story_left.xhtml with a 1024x768 viewport, background image, and a formatted story container.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:epub="http://www.idpf.org/2007/ops" 
      lang="en" xml:lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=1024, height=768" />
  <title>The Little Astronaut - Page 1</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 1024px;
      height: 768px;
      position: relative;
      background: #0f172a;
      font-family: 'Comic Sans MS', cursive, sans-serif;
      overflow: hidden;
    }
    .background-img {
      position: absolute;
      width: 1024px;
      height: 768px;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .story-card {
      position: absolute;
      top: 100px;
      left: 80px;
      width: 400px;
      z-index: 2;
      background: rgba(255, 255, 255, 0.9);
      padding: 24px;
      border-radius: 16px;
      font-size: 24px;
      line-height: 1.4;
      color: #1e293b;
    }
  </style>
</head>
<body>
  <img src="../images/space_art_left.png" alt="Friendly robot waving from rocket" class="background-img" />
  <div class="story-card">
    <p>Pip the robot gazed out of the cockpit window at the shimmering ringed planet.</p>
  </div>
</body>
</html>

Why this works:

The <meta name="viewport"> matches the exact physical CSS canvas bounds (1024px by 768px).
Z-index layering separates the background illustration from the accessible text block.

⚠️ Common Pitfalls

Omitting <meta name="viewport"> in FXL Content Documents: If rendition:layout is set to pre-paginated but an XHTML file forgets its viewport tag, e-readers will render a blank or severely cropped canvas.
Using FXL for Standard Text Novels: Authoring standard prose novels as Fixed-Layout destroys usability on mobile phones, as users cannot resize text or customize margins without zooming and panning.
Mismatched Aspect Ratios in Synthetic Spreads: If the left page has a viewport of 1000x1500 and the right page has 1000x2000, the e-reader will distort or vertically misalign the spread. Always use identical viewport dimensions across spreads.

💡 Pro Tips

Live Text Over Artwork for Searchability & a11y: Never flatten text directly into raster JPEG/PNG comic artwork. Render the artwork as the background and overlay live, selectable HTML text in speech bubbles. This enables dictionary lookups, text-to-speech, translation, and search.
Hybrid Publications: You can mix reflowable and fixed-layout documents inside the same book by using spine-level properties="rendition:layout-reflowable" on specific itemrefs.

📌 Key Takeaways

Reflowable EPUB dynamically adjusts text flow and pagination to fit any screen size and font scale.
Fixed-Layout (FXL) locks dimensions, aspect ratios, and visual layering for comics, manga, and children's books.
FXL is enabled via <meta property="rendition:layout">pre-paginated</meta> in package.opf.
Every FXL content document must declare an exact pixel <meta name="viewport" content="width=..., height=...">.
Synthetic double spreads are constructed using properties="page-spread-left" and properties="page-spread-right".
Japanese Manga uses <spine page-progression-direction="rtl">.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Which `rendition:layout` value instructs an e-reader to treat an EPUB publication as Fixed-Layout?

Topic: HTML Fundamentals

? Question 2 / 3

What is mandatory in the `<head>` of EVERY XHTML document in a Fixed-Layout EPUB?

Topic: HTML Fundamentals

? Question 3 / 3

How do you configure a manga e-book to open from right-to-left in accordance with traditional Japanese publication flow?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

Reflowable vs. Fixed-Layout Technical Comparison

The EPUB 3 Rendition Metadata Vocabulary

1. Declaring Rendition Vocabulary in package.opf

2. Global Publication Metadata Options

3. Spine-Level Property Overrides & Spreads

The Fixed-Layout Viewport Requirement

💻 Interactive Code Playground

Starter Code: Fixed-Layout Package Manifest (package.opf)

Content Document with Coordinate Layering (text/page01.xhtml)

Accompanying FXL Stylesheet (styles/fxl.css)

Expected E-Reader Render Output (Landscape Double Spread)

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Fixed-Layout Children's Book Spread

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which rendition:layout value instructs an e-reader to treat an EPUB publication as Fixed-Layout?

What is mandatory in the <head> of EVERY XHTML document in a Fixed-Layout EPUB?

How do you configure a manga e-book to open from right-to-left in accordance with traditional Japanese publication flow?

1. Declaring Rendition Vocabulary in `package.opf`

Starter Code: Fixed-Layout Package Manifest (`package.opf`)

Content Document with Coordinate Layering (`text/page01.xhtml`)

Accompanying FXL Stylesheet (`styles/fxl.css`)

Which `rendition:layout` value instructs an e-reader to treat an EPUB publication as Fixed-Layout?

What is mandatory in the `<head>` of EVERY XHTML document in a Fixed-Layout EPUB?