-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
97 lines (59 loc) · 3.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bookstore</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>Acme Labs</h1>
<ul>
<li><a href="main.html?manifest=MobyDick/manifest.json">
<img src="covers/moby-dick-book-cover.jpg" height="40" alt="Moby Dick Book Cover"/>Moby-Dick • Herman Melville</a></li>
<li><a href="main.html?manifest=Bartleby/manifest.json">
<img src="covers/Bartleby.jpg" height="40" alt="Bartleby Book Cover"/>Bartleby, The Scrivener • Herman Melville
</a></li>
<li><a href="main.html?manifest=Mott/manifest.json"><img src="covers/mott.jpg" height="40" alt="Lucretia Mott Book Cover"/>Discourse on Woman • Lucretia Mott</a>
</li>
<li><a href="main.html?manifest=Lighthouse/manifest.json">
<td><img src="covers/lighthouse.jpg" height="40" alt="To the Lighthouse Book Cover"/>To the Lighthouse • Virginia Woolf</a>
</li>
<li><a href="main.html?manifest=Orlando/manifest.json">
<img src="covers/orlando.jpg" height="40" alt="Orlando Book Cover"/>
Orlando • Virginia Woolf</td>
</a>
</li>
<li>
<a href="main.html?manifest=BooksInBrowsers/manifest.json">
<img src="covers/BiB.jpg" height="40" alt="Books in Browsers Image"/>
A Bag Full of Stories • Dave Cramer</a>
</li>
<li>
<a href="main.html?manifest=page-blanche/manifest.json">
<img src="covers/pageblanche.jpg" height="40" alt="Page Blanche Cover"/>La Page Blanche • Boulet & Pénélope Bagieu</a>
</li>
<li>
<a href="main.html#sous">
<img src="covers/souslevent.jpg" height="40" alt="Sous le Vent Cover"/>Sous Le Vent • Jean-Bernard Pouy & Joe G. Pinelli</a>
</li>
</table>
<p><i><a href="https://jakearchibald.github.io/ebook-demo/publisher-site/readme/">Service Worker</a> by <a href="https://twitter.com/jaffathecake">@jaffathecake</a></i>, although I’ve now ruined it.</p>
<section>
<h1>What’s all this, then?</h1>
<p>This is another experiment along the lines of PWP, BFF, or EPUB Zero. The goal was to provide an environment for reading books, where the content itself was as simple as possible. There’s no JavaScript in the books; information about the book is in a web application manifest style extended with a “spine” and other “resources.” The book is displayed in an iframe. The previous/next buttons read from the manifest. A service worker allows offline reading, and can download the book as a zip file. Soon I hope to be able to package as EPUB3 as well. In the absence of a framework that understands the manifest, point to the <code>index.html</code> file of each book to find ordinary navigation, etc.</p>
<p>What have I learned? Creating zips from a cache is tricky. The one hard problem in computer science is paths. Having a list of the components of a publication is <i>really</i> useful.</p>
<p>Yes, this is really buggy, mostly because I don’t know JS.</p>
<aside>The content is paginated in Safari desktop, Chrome, and Opera 12.16 due to the glory of <code>overflow: paged-x</code>.</aside>
</section>
<section>
<h1>convenience links to bug test cases</h1>
<ul>
<li><a href="bugs/overflow-paged.html">paged overflow outside iframe</a></li>
<li><a href="bugs/iframe.html">paged overflow inside iframe</a></li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=165304">actual webkit bug</a></li>
</ul>
</body>
</html>