-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
392 lines (300 loc) · 23.6 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>L’ebook reflowable text</title>
<link rel="stylesheet" href="css/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/icons/favicon.ico" type="image/x-icon">
<link rel="icon" href="assets/icons/favicon.ico" type="image/x-icon">
<!-- Google -->
<meta name="theme-color" content="#F6F6F6">
<!-- Apple -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="L’ebook redistribuable">
<link rel="apple-touch-icon" href="assets/icons/icon-152x152.png">
<!-- MS -->
<meta name="msapplication-TileImage" content="assets/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#FAFAFA">
<meta name="application-name" content="L’ebook redistribuable">
<noscript>
<style type="text/css">
.demo {display: none;}
.article-settings{display: none;}
.warning {display: block;}
</style>
</noscript>
</head>
<body>
<main>
<header>
<h1>L’ebook redistribuable</h1>
<p class="lead">Une introduction rapide et interactive à l’usage des éditeurs, graphistes et simples curieux.</p>
<p class="author">Par Jiminy Panoz</p>
</header>
<aside class="warning">
<p>Il semblerait que JavaScript ne soit pas activé dans votre navigateur.</p>
<p>Les démonstrations interactives ont par conséquent été désactivées.</p>
</aside>
<section>
<div class="article-settings">
<label>
<input type="checkbox" name="article" value="tldr-on" /><span class="checker"></span> <span>Mode Scan</span>
</label>
</div>
<h2>Introduction</h2>
<p>On parle très souvent de formats, de modèles économiques, de parts de marché, d’enrichissement ou de disruption mais <mark class="tldr">nous en oublions souvent un essentiel : le design du livre.</mark></p>
<p>Au cours de ces dernières années, j’ai pu me rendre compte que beaucoup d’éditeurs et de graphistes se sentaient perdus à ce sujet.</p>
<p>Qu’est-il possible de faire et comment ?</p>
<p>Est-ce que tel logiciel de <abbr title="Publication Assistée par Ordinateur" class="sc">P.A.O.</abbr> est capable de le faire directement ?</p>
<p>Pourquoi la mise en page bogue dans telle ou telle application de lecture ?</p>
<p>Est-ce que nous pouvons rajouter quelques interactions ?</p>
<p>Quelles contraintes prendre en compte ?</p>
<p>Autant de questions dont les réponses restent vagues et qui demandent très régulièrement des éclaircissements.</p>
<p>L’objectif de cette page est par conséquent de <mark class="tldr">donner les clés du livre numérique redistribuable</mark>, aussi connu sous le nom d’<i lang="en">ebook reflowable text.</i></p>
</section>
<section>
<h2>Le livre numérique, c’est du web</h2>
<p>Même si nous n’allons pas nous plonger dans les méandres techniques du livre numérique et, plus particulièrement, du standard <abbr class="sc">EPUB</abbr>, il n’est pas inutile de rappeler que celui-ci <mark class="tldr">emprunte les langages du web.</mark></p>
<p>Un livre numérique au format <abbr class="sc">EPUB</abbr> c’est :</p>
<ul>
<li>une structure en <abbr class="sc">HTML</abbr> (<i lang="en">HyperText Markup Language</i>) ;</li>
<li>une mise en pages en <abbr class="sc">CSS</abbr> (<i lang="en">Cascading Style Sheets</i>) ;</li>
<li>des interactions en <abbr class="sc">JS</abbr> (<i lang="en">JavaScript</i>) ;</li>
<li>des images vectorielles en <abbr class="sc">SVG</abbr> (<i lang="en">Scalable Vector Graphics</i>).</li>
</ul>
<p>La structure <abbr class="sc">HTML</abbr> se présente ainsi :</p>
<div class="full-width inherit-grid bg-container">
<pre><code><h1>Titre du chapitre</h1>
<p>Le premier paragraphe de notre chapitre, une <em>emphase</em> vient accentuer un mot de la phrase.</p>
<blockquote>
<p>Voici le premier paragraphe d’une citation en bloc.</p>
<p>Et voilà le second.</p>
</blockquote>
<figure>
<img alt="description de l’image" src="../Images/image1.jpg" />
<figcaption>La légende de l’image</figcaption>
</figure></code></pre>
</div>
<p><mark class="tldr">Cette structure permet aux solutions de lecture de comprendre le texte</mark> et de pouvoir faire la différence entre les contenus (titre, citation, illustration, etc.). Cela servira notamment pour la synthèse vocale.</p>
<p>Quant à la mise en pages <abbr class="sc">CSS</abbr>…</p>
<div class="full-width inherit-grid bg-container">
<pre><code>p {
font-size: 1em;
line-height: 1.5;
margin: 0;
text-indent: 1em;
}</code></pre>
</div>
<p>Dans cet exemple, nous déclarons des styles pour tous les paragraphes de l’ouvrage (taille, interlignage, marges et retrait de la première ligne).</p>
<figure class="full-width inherit-grid floating-caption">
<picture>
<source media="(min-width: 1024px)" srcset="assets/1200/fluide-2x.png">
<source media="(min-width: 1366px)" srcset="assets/1800/fluide-3x.png">
<img alt="Le contenu d’un fichier EPUB affiché à l’écran n’est pas le même en fonction des dimensions de l’écran. Un smartphone affichera moins de contenu qu’une liseuse ou qu’une tablette." src="assets/900/fluide.png" />
</picture>
<figcaption>Contrairement à un <abbr class="sc">PDF</abbr>, qui est mis à l’échelle, le contenu <abbr class="sc">HTML</abbr> s’adapte automatiquement aux dimensions de l’écran.</figcaption>
</figure>
<p>Il est extrêmement important de faire remarquer que <mark class="tldr">le contenu web est fluide par défaut</mark> : celui-ci est en effet <mark class="tldr">automatiquement redistribué dans la fenêtre du navigateur.</mark> Nous pourrions par exemple le comparer au bloc de texte redistribuable d’InDesign.</p>
<div class="full-width inherit-grid demo">
<div class="demo-settings">
<label>
<input type="checkbox" name="fluid-demo" value="styled" /><span class="checker"></span> <span>Ajouter des styles</span>
</label>
</div>
<iframe id="fluid-demo" src="demo.html"></iframe>
</div>
<p><mark class="tldr">C’est en stylant que l’on est susceptible de dégrader cette fluidité.</mark></p>
<p>Il fut un temps où les designers web utilisaient des dimensions fixes, par exemple 800 pixels de large. Ils pouvaient ainsi réaliser des mises en pages plus complexes : colonnes, objets placés au pixel près, etc. Inutile de souligner qu’ils se sont rapidement rendu compte que cette <mark class="tldr">approche de conception reposant sur des dimensions fixes ne pouvait plus fonctionner avec l’avénement des appareils mobiles.</mark></p>
</section>
<section>
<h2>Du web, à une différence près</h2>
<p>On entend souvent dire que le livre numérique est une sorte de « site web empaqueté » mais cela ne signifie pas pour autant que tous les navigateurs web sont capables d’ouvrir un fichier <abbr class="sc">EPUB</abbr>. En effet, si les bases sont communes, <mark class="tldr"><abbr class="sc">EPUB</abbr> est une norme qui dispose de ses propres spécifications.</mark></p>
<p>À l’heure actuelle, seul le navigateur Microsoft Edge prend nativement en charge le format.</p>
<figure class="gutter" role="presentation">
<img alt="" src="assets/900/apps.png" />
</figure>
<p>Aussi, il faut généralement passer par une solution de lecture (appareil dédié, app, service dans le nuage) pour pouvoir accéder au contenu du livre numérique.</p>
<p>Les solutions modernes empruntent aux navigateurs web leur moteur de rendu, un composant logiciel qui se charge, comme son nom l’indique, du rendu des pages web. On peut ainsi considérer que les solutions de lecture sont des <mark class="tldr">surcouches logicielles qui permettent la prise en charge du format et proposent une interface dédiée à l’activité de lecture.</mark></p>
<p><mark class="tldr">Ces surcouches s’accompagnent de spécificités (pagination, réglages utilisateurs, etc.)</mark> qui rendent la conception et le développement d’un livre numérique quelque peu différents de ceux d’un site web.</p>
</section>
<section>
<h2>Un changement de paradigme</h2>
<p>Si l’on compare navigateurs web et outils <abbr class="sc">P.A.O</abbr>, force est de constater que <mark class="tldr">les moteurs de rendu web sont largement moins aboutis que ceux des logiciels auxquels nous sommes habitués.</mark></p>
<p>Les algorithmes de justification des navigateurs web sont simplistes, les fonctionnalités typographiques avancées (fonctionnalités Open Type) sont très récentes et parfois mal supportées, les grilles de composition viennent tout juste d’arriver, le modèle de fragmentation (pagination) est encore inexistant…</p>
<p>De même, en matière de typographie, césures, veuves et orphelines, et sauts de page proposent un contrôle pour le moins limité en numérique. Bien que les solutions de lecture paginent par défaut, ces choses sont très médiocrement supportées.</p>
<p>Aussi, <mark class="tldr">il faut bien différencier la « page <abbr class="sc">PDF</abbr> » de la « page <abbr class="sc">EPUB</abbr> ».</mark></p>
<figure class="full-width grid-2" role="group">
<figure class="grid-component">
<picture>
<source media="(min-width: 1024px)" srcset="assets/1200/wysiwyg-2x.png">
<source media="(min-width: 1366px)" srcset="assets/1800/wysiwyg-3x.png">
<img alt="" src="assets/900/wysiwyg.png" />
</picture>
<figcaption>Avec le <abbr class="sc">PDF</abbr>, on obtient ce que l’on voit dans le logiciel <abbr class="sc">P.A.O.</abbr></figcaption>
</figure>
<figure class="grid-component">
<picture>
<source media="(min-width: 1024px)" srcset="assets/1200/wysiwygn-2x.png">
<source media="(min-width: 1366px)" srcset="assets/1800/wysiwygn-3x.png">
<img alt="" src="assets/900/wysiwygn.png" />
</picture>
<figcaption>Avec <abbr class="sc">EPUB</abbr>, le contenu est redistribué dans un flux.</figcaption>
</figure>
</figure>
<p><mark class="tldr">En <abbr class="sc">EPUB</abbr> redistribuable, il n’y a pas de dimensions fixes donc de pagination prédéfinie, il n’y a pas d’alignement vertical, il n’y a pas non plus d’image à fond perdu ou de note de bas de page qui fragmentent un paragraphe.</mark></p>
<p>Le contenu est redistribué en fonction de la taille de l’écran, les contenus se suivent dans un flux continu et non pas fragmenté, paragraphes et images sont des blocs solides et il n’est pas réellement possible de placer certains contenus arbitrairement.</p>
<figure class="gutter" role="presentation">
<img alt="" src="assets/900/indicateur.png" />
</figure>
<p>De fait, <mark class="tldr">il n’existe rien dans les moteurs de rendu pour gérer la pagination à l’heure actuelle.</mark> La pagination est un <em>hack,</em> une bidouille réalisée à l’aide des outils <abbr class="sc">CSS</abbr> disponibles dans le but de l’imiter.</p>
<div class="full-width inherit-grid demo">
<div class="demo-settings">
<label>
<input type="checkbox" name="pagination-demo" value="paginated" /><span class="checker"></span> <span>Paginer le texte</span>
</label>
</div>
<iframe id="pagination-demo" src="demo.html"></iframe>
</div>
<p>Les solutions de lecture modernes utilisent très souvent les colonnes <abbr class="sc">CSS</abbr> pour émuler la pagination. Le problème est que cette spécification n’a jamais été conçue pour cela et n’a pas évolué pour permettre les cas d’usages du livre numérique.</p>
<p><mark class="tldr">Le maquettiste ne met pas en pages, il ne fait que donner des indications.</mark> Il faut oublier le concept de <abbr title="What You See is What You Get" class="sc">WYSIWYG</abbr> (Ce que l’on voit à l’écran est le résultat final).</p>
</section>
<section>
<h2>Pour les développeurs, faire en sorte que tout fonctionne</h2>
<p>Le rendu <abbr class="sc">EPUB</abbr> est un processus quelque peu complexe dans le sens où paginer une mise en pages définie arbitrairement peut créer de nombreux problèmes. Il n’est ainsi par rare que des <mark class="tldr">solutions de lecture « surchargent » des styles pour régler des bugs d’affichage.</mark></p>
<p>On parle ici d’<em lang="en">override,</em> soit un remplacement dynamique d’un ou plusieurs styles du fichier <abbr class="sc">EPUB</abbr>. En d’autres termes, c’est comme si les développeurs de la solution de lecture ne prenaient pas en compte ou outrepassaient certaines indications de mise en page.</p>
<div class="full-width inherit-grid demo">
<div class="demo-settings">
<label>
<input type="checkbox" name="overrides-demo" value="overridden" /><span class="checker"></span> <span>Appliquer les overrides</span>
</label>
</div>
<iframe id="overrides-demo" src="demo.html"></iframe>
</div>
<p>Il faut noter que ces <i lang="en">overrides</i> sont rarement gratuits ; ils sont le plus souvent prévus pour <mark class="tldr">régler des problèmes réels</mark> : images ou textes coupés, mauvais affichage de certaines polices, marges énormes sur des petits écrans, etc.</p>
<p>Par ailleurs, certaines solutions de lecture se servent des <i lang="en">overrides</i> pour « rattraper le coup » quand des déclarations <abbr class="sc">CSS</abbr> désactivent des réglages utilisateurs ou fonctionnalités.</p>
<p>Il faut bien comprendre que l’on obtiendra <mark class="tldr">jamais le même résultat partout, il faut oublier le « au pixel près ».</mark> D’une part, les moteurs de rendu sont bien incapables de mettre en pages de manière totalement identique. D’autre part, les solutions de lecture gèrent ces contenus différemment.</p>
<p>Il faut donc accepter la perte de contrôle…</p>
</section>
<section>
<h2>Le graphiste propose, l’utilisateur dispose</h2>
<p>Cette perte de contrôle est d’autant plus certaine que les réglages utilisateurs sont très largement attendus par les lecteurs.</p>
<figure class="full-width inherit-grid floating-caption">
<picture>
<source media="(min-width: 1024px)" srcset="assets/1200/font-2x.png">
<source media="(min-width: 1366px)" srcset="assets/1800/font-3x.png">
<img alt="Les réglages utilisateurs sont accessibles depuis les menus des l’interface de lecture." src="assets/900/font.png" />
</picture>
<figcaption>Toutes les solutions de lecture ou presque proposent un minimum de réglages utilisateur.</figcaption>
</figure>
<p>Depuis le tout début du livre numérique, ceux-ci peuvent <mark class="tldr">composer le texte à leur convenance</mark> : police et taille de caractères, couleur de fond, marges de la page, interlignage et alignement du texte sont autant de variables sur lesquelles ils peuvent intervenir.</p>
<figure class="full-width grid-4" role="group" aria-labelledby="settings-cap">
<figure class="grid-component">
<img alt="Texte noir sur fond blanc, taille de caractères par défaut." src="assets/900/config1.png" />
</figure>
<figure class="grid-component">
<img alt="Texte blanc sur fond noir, taille de caractère minimum." src="assets/900/config2.png" />
</figure>
<figure class="grid-component">
<img alt="Texte noir sur fond sépia, taille de caractères augmentée." src="assets/900/config3.png" />
</figure>
<figure class="grid-component">
<img alt="Texte blanc sur fond gris, taille de caractère maximale." src="assets/900/config4.png" />
</figure>
<figcaption id="settings-cap">Il faut prévoir la mise en pages pour des configurations de lecture extrêmement variées.</figcaption>
</figure>
<p>Nous pouvons concevoir ces réglages utilisateurs comme une seconde catégorie d’<i lang="en">overrides,</i> ce qui complique par ailleurs la tâche des développeurs de solutions de lecture.</p>
<div class="full-width inherit-grid demo">
<div class="demo-settings flex-2">
<label>
<input type="checkbox" name="settings-demo" value="sans" /><span class="checker"></span> <span>Sans serif</span>
</label>
<label>
<input type="checkbox" name="settings-demo" value="night" /><span class="checker"></span> <span>Mode nuit</span>
</label>
</div>
<iframe id="settings-demo" src="demo.html"></iframe>
</div>
<p><mark class="tldr">À noter que les styles générés par les logiciels <abbr class="sc">P.A.O.</abbr> « cassent » souvent certains réglages utilisateurs…</mark> Le lecteur pourra donc se retrouver avec du texte illisible en mode nuit, des polices pas remplacées pour l’italique ou un réglage qui ne fonctionne pas du tout.</p>
</section>
<section>
<h2>Une expérience de lecture</h2>
<p>Concevoir un livre numérique, aussi simple soit-il, <mark class="tldr">dépasse très largement le cadre de la composition et de la mise en pages.</mark></p>
<p><mark class="tldr">Il faut penser en termes d’expérience de lecture.</mark></p>
<figure class="full-width grid-2" role="group">
<figure class="grid-component">
<picture>
<source media="(min-width: 1024px)" srcset="assets/1200/search-2x.png">
<source media="(min-width: 1366px)" srcset="assets/1800/search-3x.png">
<img alt="" src="assets/900/search.png" />
</picture>
<figcaption>On peut rechercher directement dans le texte.</figcaption>
</figure>
<figure class="grid-component">
<picture>
<source media="(min-width: 1024px)" srcset="assets/1200/annoter-2x.png">
<source media="(min-width: 1366px)" srcset="assets/1800/annoter-3x.png">
<img alt="" src="assets/900/annoter.png" />
</picture>
<figcaption>On peut également annoter et partager ses remarques.</figcaption>
</figure>
</figure>
<p>Les solutions de lecture proposent nombre de fonctionnalités dédiées à l’activité de lecture :</p>
<ul>
<li>l’accès à la table des matières ;</li>
<li>la recherche dans le texte ;</li>
<li>la définition et la recherche en ligne (d’un mot ou d’une phrase) ;</li>
<li>l’annotation ;</li>
<li>le partage ;</li>
<li>le zoom des tableaux ou images ;</li>
<li>les notes pop-up ;</li>
<li>la consultation des seules images que le livre contient (Kindle) ;</li>
<li>etc.</li>
</ul>
<p>Cela n’est pas sans poser quelques défis de conception… <mark class="tldr">Comment faire en sorte de ne pas interférer avec ces fonctionnalités ?</mark> Comment dépasser celles-ci pour en apporter d’autres, susceptibles d’améliorer l’expérience de lecture de l’utilisateur ?</p>
<p>Rien que les appels de notes peuvent déjà dégrader cette expérience. Non liés, ils ne permettront pas d’accéder à la note de fin de section ; trop petits, ils demanderont à l’utilisateur de s’y reprendre à plusieurs fois avant d’y parvenir sur son appareil tactile.</p>
<p>Quant aux interactions plus complexes, <mark class="tldr">le support du langage JavaScript n’étant pas obligatoire en <abbr class="sc">EPUB</abbr>, il faudra composer avec cette contrainte et proposer une solution de secours statique pour chaque interaction.</mark></p>
</section>
<section>
<h2>Une perte de contrôle, une gamme de possibilités</h2>
<p>Si nous faisons le bilan, il faut admettre que le livre numérique redistribuable peut désarçoner bien des éditeurs et graphistes rompus aux joutes de l’édition.</p>
<figure class="full-width inherit-grid floating-caption">
<picture>
<source media="(min-width: 1024px)" srcset="assets/1200/flux-2x.png">
<source media="(min-width: 1366px)" srcset="assets/1800/flux-3x.png">
<img alt="L’appareil de lecture n’est de facto qu’un cadre que l’utilisateur déplace sur un volumen." src="assets/900/flux.png" />
</picture>
<figcaption>Le livre numérique, ce sont des contenus dans un flux continu, manipulés par les solutions de lecture, redistribués de manière dynamique et restylés par le lecteur.</figcaption>
</figure>
<p>Il faut envisager les choses différemment, perdre certaines habitudes, <mark class="tldr">re-penser l’utilisabilité de l’objet imprimé pour l’écran, créer de nouvelles méthodes de conception adaptées aux contraintes de ce nouveau medium…</mark></p>
<p>Le web étant déjà passé par là, nous pouvons en tirer une leçon importante : il faut épouser l’idée que <mark class="tldr">toutes les solutions de lecture ne sont pas égales en support et en possibilités techniques.</mark></p>
<p>La réponse est probablement le concept d’amélioration progressive : <mark class="tldr">on construit une base solide qui fonctionne partout puis on l’améliore en fonction des capacités des solutions de lecture.</mark></p>
<p>Aujourd’hui, nous sommes ainsi capables de simuler l’alignement vertical, de forcer une image à fragmenter un paragraphe dans certaines conditions ou de l’habiller de manière complexe, d’effectuer des transformations sur du texte (e.g. rotation) et de créer des grilles de composition adaptatives.</p>
<p>Mieux encore, <mark class="tldr"><abbr class="sc">CSS</abbr> et JavaScript disposent de mécanismes pour concevoir cette amélioration progressive au mieux.</mark></p>
<p>Il y a de l’espoir mais cela demandera le partage des connaissances, beaucoup de recherche utilisateur et, surtout, un effort collectif.</p>
</section>
<section>
<h2>Aller plus loin</h2>
<ul>
<li><a href="http://jiminy.chapalpanoz.com">Site de l’auteur</a></li>
<li><a href="https://jaypanoz.github.io/pilen2016/#/">Slides « Pourquoi le monde de l’édition devrait s’intéresser au web »</a></li>
<li><a href="http://jiminy.chapalpanoz.com/category/editodesignhack/">Série d’articles et de livres « Édito / Design / Hack »</a></li>
<li><a href="https://jaypanoz.github.io/ebookcraft2017/#/">Atelier « <i xml:lang="en">ebooks, beta testing, and the apocalypse</i> »</a></li>
<li><a href="http://friendsofepub.github.io/Blitz/">Cadre de conception et de développement Blitz</a></li>
</ul>
</section>
<footer>
<p>© 2017, Jiminy Panoz</p>
<p>Typo « <a href="http://vollkorn-typeface.com">Vollkorn</a> » par Friedrich Althausen</p>
<p class="footer-links"><a href="https://github.com/JayPanoz/reflow">Consulter la source</a> | <a href="https://github.com/JayPanoz/reflow/issues">Signaler un bug</a></p>
</footer>
</main>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/konami.js"></script>
<script type="text/javascript">
var easter_egg = new Konami(function() { document.body.classList.toggle('sepia')});
</script>
</body>
</html>