From 7179e44814096c115092c6631f96557aca3fd9d4 Mon Sep 17 00:00:00 2001
From: caribaud <christian@aribaud.net>
Date: Thu, 25 May 2023 21:31:22 +0200
Subject: [PATCH] Allow for varying-size pages

---
 README.md                                     |  6 +-
 demos/demo_data.js                            | 83 -------------------
 demos/pepper_and_carrot_e35_highres.html      | 28 +++----
 ...epper_and_carrot_e35_highres_htmldata.html | 69 ---------------
 demos/pepper_and_carrot_e35_lowres.html       | 77 -----------------
 melpomene.css                                 |  9 +-
 melpomene.js                                  | 55 +++++++-----
 zooms_generator.py                            | 17 ++--
 8 files changed, 61 insertions(+), 283 deletions(-)
 delete mode 100644 demos/demo_data.js
 delete mode 100644 demos/pepper_and_carrot_e35_highres_htmldata.html
 delete mode 100644 demos/pepper_and_carrot_e35_lowres.html

diff --git a/README.md b/README.md
index 6e21b8a..4fd34e9 100644
--- a/README.md
+++ b/README.md
@@ -30,10 +30,9 @@ Melpomene is mainly one JS file and one CSS file. You only need to include them
 
 The JS files expect you to write some very specific HTML tags to be able to work.
 To simplify things, you only need to copy-paste the content of `melpomene.html` into your own page and change a few things :
-+ `data-pages-width` must be set to your comic pages width in px
-+ `data-pages-height` must be set to your comic pages height in px
 + You must duplicate the `img` tag for each of you comic page and :
     + set `url` to the actual URL of your page
+    + set `height` and `width` to the actual image sizes 
     + set `data-zooms` with the zooms information, like so : `<zoom 1 width>, <zoom 1 height>, <zoom 1 x offset>, <zoom 1 y offset>; <zoom 2 width> ...`
         + example : `<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>`
 
@@ -45,7 +44,6 @@ The following limitations are known and will be improved upon :
 
 + Mobile support is currently limited
 + There are some performences issues
-+ Your comic pages need to be the same size
 
 # How to setup Melpomene ?
 
@@ -85,4 +83,4 @@ You are now ready to integrate Melpomene in your website!
 
 # Credits
 
-Most examples and the documentation of Melpomene uses illustrations from David "Deevad" Revoy's "Pepper & Carrot" webcomic, which is published under CC-BY 4.0. Full licence [here](https://www.peppercarrot.com/en/license/index.html).
\ No newline at end of file
+Most examples and the documentation of Melpomene uses illustrations from David "Deevad" Revoy's "Pepper & Carrot" webcomic, which is published under CC-BY 4.0. Full licence [here](https://www.peppercarrot.com/en/license/index.html).
diff --git a/demos/demo_data.js b/demos/demo_data.js
deleted file mode 100644
index dffd7ed..0000000
--- a/demos/demo_data.js
+++ /dev/null
@@ -1,83 +0,0 @@
-PAGES_ZOOMS = [
-    [1, 2481.0, 1327.1057, 0.0, 0.0],
-    [1, 593.15338, 1076.4635, 0.0, 1364.053],
-    [1, 890.72864, 491.29874, 830.81415, 1751.5],
-    [1, 2481.0, 1078.4192, 0.0, 1364.053],
-    [1, 562.77032, 909.44702, 102.48115, 2491.6567],
-    [1, 920.74463, 909.44702, 698.55927, 2491.6567],
-    [1, 728.776, 909.44702, 1652.3695, 2491.6567],
-    [2, 1459.9161, 960.62878, 99.857468, 103.85177],
-    [2, 788.87384, 960.62878, 1593.7252, 103.85177],
-    [2, 455.35007, 305.56384, 389.44412, 1376.0359],
-    [2, 2282.7415, 760.914, 99.857475, 1114.4093],
-    [2, 1069.9728, 496.29166, 101.85461, 1928.2478],
-    [2, 1209.7733, 496.29166, 1172.3267, 1928.2478],
-    [2, 788.87402, 926.67731, 101.85462, 2474.468],
-    [2, 415.40707, 926.67731, 924.68018, 2474.468],
-    [2, 1008.5604, 926.67731, 1372.0416, 2474.468],
-    [3, 2278.4634, 1424.0264, 103.9937, 103.9937],
-    [3, 457.3472, 589.15906, 816.83411, 469.33011],
-    [3, 618.69055, 832.04285, 104.47829, 1578.7172],
-    [3, 1170.7311, 832.04285, 756.71887, 1578.7172],
-    [3, 418.14838, 832.04285, 1962.6545, 1578.7172],
-    [3, 2280.6614, 940.57422, 100.82664, 2461.1147],
-    [4, 1128.3893, 547.21899, 100.85604, 101.85461],
-    [4, 1125.3937, 505.27878, 101.85462, 700.99945],
-    [4, 659.59674, 1104.1381, 1237.9126, 100.46677],
-    [4, 474.09705, 1104.7645, 1908.0801, 103.04887],
-    [4, 991.58466, 641.08496, 365.47833, 1256.2069],
-    [4, 2276.7502, 1268.1899, 101.85461, 1256.2069],
-    [4, 669.66565, 827.24689, 100.95136, 2574.8799],
-    [4, 1574.1992, 825.24969, 806.56573, 2576.877],
-    [5, 2270.7588, 1348.0758, 107.84606, 109.84322],
-    [5, 828.80096, 1879.4762, 104.70337, 1519.7256],
-    [5, 606.50098, 1877.479, 975.78717, 1521.7228],
-    [5, 755.02411, 1139.5406, 1623.401, 1521.7228],
-    [5, 757.02124, 680.4198, 1621.4038, 2716.7849],
-    [6, 2273.6387, 1248.3829, 104.50265, 107.32705],
-    [6, 624.19147, 440.60574, 1259.6805, 771.06006],
-    [6, 830.37231, 940.5238, 110.15143, 1415.0222],
-    [6, 1395.2515, 1313.3441, 985.71411, 1409.3734],
-    [6, 1321.8173, 796.47961, 112.97583, 2417.6829],
-    [6, 974.4165, 754.11365, 1403.7247, 2646.4587],
-    [7, 828.81702, 497.29019, 443.36716, 531.2417],
-    [7, 2275.0127, 1188.0789, 105.30553, 109.78442],
-    [7, 2275.0127, 804.28339, 105.30553, 1356.3481],
-    [7, 847.87823, 1182.9146, 105.30553, 2210.6436],
-    [7, 497.6918, 1185.7389, 994.37964, 2213.468],
-    [7, 854.35431, 1185.7389, 1528.7885, 2213.468],
-    [8, 2272.7561, 1228.2468, 101.85461, 107.84607],
-    [8, 497.29019, 756.91962, 994.58044, 569.18756],
-    [8, 2276.7502, 1052.4977, 101.85461, 1336.0929],
-    [8, 2278.7473, 958.63165, 101.85462, 2444.5107],
-    [9, 1131.1705, 453.31552, 101.67825, 103.09045],
-    [9, 1148.1168, 453.31552, 1232.8488, 103.09045],
-    [9, 1481.6407, 453.31552, 501.89209, 103.09045],
-    [9, 2282.1118, 855.79193, 98.853851, 604.42072],
-    [9, 1776.5449, 881.21149, 290.91275, 1355.71],
-    [9, 703.27454, 398.23981, 762.58685, 2863.9373],
-    [9, 2270.8142, 1132.5826, 107.32704, 2270.8142],
-    [10, 2278.7473, 1240.2297, 101.85461, 101.85461],
-    [10, 667.04791, 1016.549, 99.857468, 1390.016],
-    [10, 1583.7395, 1014.5519, 798.85974, 1390.016],
-    [10, 2280.7446, 944.65161, 99.857468, 2456.4937],
-    [11, 830.81415, 1194.2953, 97.860321, 101.85461],
-    [11, 774.89398, 1198.2897, 960.62885, 99.857468],
-    [11, 609.13055, 1192.2982, 1769.4744, 101.85461],
-    [11, 363.4812, 868.75995, 99.857468, 1348.0758],
-    [11, 1495.8649, 870.75714, 493.2959, 1346.0787],
-    [11, 357.48975, 870.75714, 2023.1123, 1348.0758],
-    [11, 529.24457, 499.28735, 103.85177, 2280.7446],
-    [11, 531.24176, 687.01941, 99.857468, 2716.123],
-    [11, 1022.5405, 1120.4008, 669.04504, 2280.7446],
-    [11, 657.06213, 1120.4008, 1725.5371, 2280.7446],
-    [12, 704.99371, 341.51254, 619.11633, 281.59805],
-    [12, 393.43842, 551.21326, 1459.9161, 159.77196],
-    [12, 2280.7446, 691.01367, 99.857468, 101.85461],
-    [12, 718.97375, 1198.2897, 99.857468, 840.79987],
-    [12, 712.9823, 1196.2925, 850.78564, 842.79706],
-    [12, 780.88538, 1192.2982, 1599.7167, 842.79706],
-    [12, 2366.6221, 1445.9362, 61.911629, 2049.0752],
-    [12, 922.68298, 551.21326, 984.59467, 2378.605],
-    [12, 631.09918, 211.69783, 1851.3574, 3289.3049],
-]
diff --git a/demos/pepper_and_carrot_e35_highres.html b/demos/pepper_and_carrot_e35_highres.html
index c6949ea..b3b7d02 100644
--- a/demos/pepper_and_carrot_e35_highres.html
+++ b/demos/pepper_and_carrot_e35_highres.html
@@ -15,19 +15,19 @@
         <!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
         <div id="reader-frame">
             <div id="reader-content-frame">
-                <div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/>
+                <div id="reader-pages" class="animated" hidden>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
+                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
                 </div>
                 <div id="focus-overlay" class="flex-col fill">
                     <div class="grow obscured animated"></div>
@@ -60,10 +60,10 @@
         </div>
         <!-- End of Melpomene comic reader -->
 
+
     </body>
     
     <!-- melpomene_js.html import -->
-    <script src="demo_data.js"></script> 
     <script src="../melpomene.js"></script> 
     
 </html>
diff --git a/demos/pepper_and_carrot_e35_highres_htmldata.html b/demos/pepper_and_carrot_e35_highres_htmldata.html
deleted file mode 100644
index 84881c6..0000000
--- a/demos/pepper_and_carrot_e35_highres_htmldata.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-    <head>
-        <link rel="stylesheet" href="demo.css">
-        
-        <!-- melpomene_head.html import -->
-        <link rel="stylesheet" href="../melpomene.css">
-    
-    </head>
-
-    <body>
-    
-        <!-- Melpomene comic reader -->
-        <!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
-        <div id="reader-frame">
-            <div id="reader-content-frame">
-                <div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
-                </div>
-                <div id="focus-overlay" class="flex-col fill">
-                    <div class="grow obscured animated"></div>
-                    <div id="focus-overlay-height" class="flex animated" style="height:100%">
-                        <div class="grow obscured animated"></div>
-                        <div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
-                        <div class="grow obscured animated"></div>
-                    </div>
-                    <div class="grow obscured animated"></div>
-                </div>
-                <div id="nav-controls" class="fill">
-                    <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
-                    <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
-                </div>
-                <div id="help-menu">
-                    <div id="help-controls" style="opacity:1; transform: translate(0,0);">
-                        <div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
-                        <div><div class="key">&rarr;</div>/ scroll down / clic  : next</div>
-                        <div>-----------------------</div>
-                        <div><div class="key">F</div>: Toggle fullscreen</div>
-                        <div><div class="key">P</div>: Toggle progress bar</div>
-                        <div><div class="key">V</div>: Toggle panel / page viewing mode</div>
-                    </div>
-                </div>
-            </div>
-            <div id="reader-progress-container">
-                <div id="reader-progress-bar"></div>
-                <div id="reader-progress-pages"></div>
-            </div>
-        </div>
-        <!-- End of Melpomene comic reader -->
-
-
-    </body>
-    
-    <!-- melpomene_js.html import -->
-    <script src="../melpomene.js"></script> 
-    
-</html>
diff --git a/demos/pepper_and_carrot_e35_lowres.html b/demos/pepper_and_carrot_e35_lowres.html
deleted file mode 100644
index 011ea93..0000000
--- a/demos/pepper_and_carrot_e35_lowres.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-    <head>
-        <link rel="stylesheet" href="demo.css">
-        
-        <!-- melpomene_head.html import -->
-        <link rel="stylesheet" href="../melpomene.css">
-    
-    </head>
-
-    <body>
-    
-        <!-- melpomene_reader.html import -->
-    
-        <!-- Melpomene comic reader -->
-        <!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
-        <div id="reader-frame">
-            <div id="reader-content-frame">
-                
-                <div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg"/>
-                    <img loading="lazy" width="2481" height="3503" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/>
-                </div>
-                
-                <div id="focus-overlay" class="flex-col fill">
-                    <div class="grow obscured animated"></div>
-                    <div id="focus-overlay-height" class="flex animated" style="height:100%">
-                        <div class="grow obscured animated"></div>
-                        <div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
-                        <div class="grow obscured animated"></div>
-                    </div>
-                    <div class="grow obscured animated"></div>
-                </div>
-                
-                <div id="nav-controls" class="fill">
-                    <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
-                    <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
-                </div>
-                
-                <div id="help-menu">
-                    <div id="help-controls" style="opacity:1; transform: translate(0,0);">
-                        <div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
-                        <div><div class="key">&rarr;</div>/ scroll down / clic  : next</div>
-                        <div>-----------------------</div>
-                        <div><div class="key">F</div>: Toggle fullscreen</div>
-                        <div><div class="key">P</div>: Toggle progress bar</div>
-                        <div><div class="key">V</div>: Toggle panel / page viewing mode</div>
-                    </div>
-                </div>
-            
-            </div>
-            
-            <div id="reader-progress-container">
-                <div id="reader-progress-bar"></div>
-                <div id="reader-progress-pages"></div>
-            </div>
-        </div>
-        <!-- End of Melpomene comic reader -->
-
-    </body>
-    
-    <!-- melpomene_js.html import -->
-    <script src="demo_data.js"></script> 
-    <script src="../melpomene.js"></script> 
-    
-</html>
diff --git a/melpomene.css b/melpomene.css
index 869c1db..58a312a 100644
--- a/melpomene.css
+++ b/melpomene.css
@@ -22,19 +22,18 @@
 }
 
 #reader-pages {
-    position: absolute;
     flex-direction: row;
-    left: 0px;
-    right: 0px;
     transform-origin: top left;
     transform: scale(1) translate(0);
+    align-items: center;
+    width: fit-content;
+    height: fit-content;
 }
 
 #reader-pages > img {
     display: inline-block;
     opacity: 0;
     transition: all 1s cubic-bezier(.9,.03,.69,.22); /* ease-in quartic */
-    flex-shrink: 0;
 }
 
 .fill {
@@ -175,4 +174,4 @@
     box-sizing: border-box;
     border-right: 0.3em black solid;
     flex: 1;
-}
\ No newline at end of file
+}
diff --git a/melpomene.js b/melpomene.js
index 1501b23..bffd898 100644
--- a/melpomene.js
+++ b/melpomene.js
@@ -149,37 +149,48 @@ function getPagesCount() {
     return READER_PAGES.childElementCount
 }
 
-function pageOriginalHeight() {
-    return parseInt(READER_PAGES.dataset.pagesHeight)
+function pageOriginalHeight(pageNumber) {
+    return READER_PAGES.children[pageNumber - 1].height
 }
 
-function pageOriginalWidth() {
-    return parseInt(READER_PAGES.dataset.pagesWidth)
+function pageOriginalWidth(pageNumber) {
+    return READER_PAGES.children[pageNumber - 1].width
 }
 
 function readerFrameRatio() {
     return READER_CONTENT_FRAME.clientWidth / READER_CONTENT_FRAME.clientHeight
 }
 
-function pageRatio() {
-    return READER_PAGES.dataset.pagesWidth / READER_PAGES.dataset.pagesHeight
+function pageRatio(pageNumber) {
+    return READER_PAGES.children[pageNumber - 1].width / READER_PAGES.children[pageNumber - 1].height
 }
 
-function isFrameRatioWiderThanPage(){
-    return readerFrameRatio() > pageRatio()
-}
-
-function pageToFrameScaleFactor(useHeight){
-    // The scale factor to apply to a page so it exactly fit in the reader frame
-    if (useHeight) {
-        return READER_CONTENT_FRAME.clientHeight / pageOriginalHeight()
+function pageMaxHeight(){
+    let max_height = 0
+    
+    for (var i = 0; i < READER_PAGES.children.length; i++) {
+        if(READER_PAGES.children[i].height > max_height){
+            max_height = READER_PAGES.children[i].height
+        }
     }
-    return READER_CONTENT_FRAME.clientWidth / pageOriginalWidth()
+    
+    return max_height
 }
 
-function totalPagesWidth() {
-    // The width of all cumuled pages with scale factor applied
-    return pageOriginalWidth() * getPagesCount()
+function pageVerticalOffset(pageNumber) {
+    return ( pageMaxHeight() - pageOriginalHeight(pageNumber) ) / 2
+}
+
+function previousPagesWidth(pageNumber) {
+    // The width of all previous pages relative to the provided index
+    
+    let totalWidth = 0
+    
+    for (let idx = 0; idx < pageNumber - 1; idx++){
+        totalWidth = totalWidth + READER_PAGES.children[idx].width
+    }
+    
+    return totalWidth
 }
 
 // =========
@@ -225,19 +236,19 @@ function initReader(){
 
 function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
     
-    // Move to the correct page
-    READER_PAGES.style.transform = "translateX(" + (- pageOriginalWidth() * (pageNumber - 1)) + "px )"
+    // Align the top-left corner of the frame with the page
+    READER_PAGES.style.transform = "translate(-" + previousPagesWidth(pageNumber) + "px, -" + pageVerticalOffset(pageNumber) + "px )"
     
     // Then move so the top-left point of the zoom match the frame top-left
     READER_PAGES.style.transform = "translate(" + (- posx) + "px, " + (-posy) + "px )" + READER_PAGES.style.transform
     
     // Then, scale so the zoom would fit the frame, and center the zoom
     if (width == 0){
-        width = pageOriginalWidth()
+        width = pageOriginalWidth(pageNumber)
     }
     
     if (height == 0){
-        height = pageOriginalHeight()
+        height = pageOriginalHeight(pageNumber)
     }
     
     zoomRatio = width / height
diff --git a/zooms_generator.py b/zooms_generator.py
index 4c321c0..24d900c 100644
--- a/zooms_generator.py
+++ b/zooms_generator.py
@@ -69,17 +69,16 @@ def extract_zooms(src_folder):
     
         zooms[idx] = {
             "name": svg_path.stem,
+            "width": 0,
+            "height": 0,
             "zooms": [],
         }
     
         tree = ET.parse(svg_path)
         root = tree.getroot()
-        
-        for svg in root.findall('.//{*}svg'):
-            if area.get("width") > max_width:
-                max_width = area.get("width")
-            if area.get("height") > max_width:
-                max_width = area.get("height")
+
+        zooms[idx]["width"] = int(root.get("width"))
+        zooms[idx]["height"] = int(root.get("height"))
         
         for area in root.findall('.//{*}rect'):
             zooms[idx]["zooms"].append([
@@ -120,13 +119,13 @@ def write_html(zooms, dest_file, pages_width, pages_height, prefix, extention):
     
         data_file.write(HTML_START_CONSTANT)
     
-        data_file.write(f'        <div id="reader-pages" class="animated" data-pages-width="{pages_width}" data-pages-height="{pages_height}" hidden>\n')
+        data_file.write(f'        <div id="reader-pages" class="animated" hidden>\n')
         
         for page_idx in sorted(zooms.keys()):
             img_url = f"{prefix}{zooms[page_idx]['name']}.{extention}"
             zoom_html_data = [','.join([str(zoom) for zoom in page_zooms]) for page_zooms in zooms[page_idx]["zooms"]]
             zoom_html_str = ';'.join(zoom_html_data)
-            data_file.write(f'            <img loading="lazy" src="{img_url}" data-zooms="{zoom_html_str}"/>\n')
+            data_file.write(f'            <img loading="lazy" heigth="{zooms[page_idx]["height"]}" width="{zooms[page_idx]["width"]}" src="{img_url}" data-zooms="{zoom_html_str}"/>\n')
         
         data_file.write(f'        </div>\n')
         
@@ -179,4 +178,4 @@ if __name__ == "__main__":
         write_json_or_js(zooms, output, False)
     
     elif args.output_format == "js":
-        write_json_or_js(zooms, output, True)
\ No newline at end of file
+        write_json_or_js(zooms, output, True)