Fix ordering of smaller text boxes

src/lib/components/Reader/TextBoxes.svelte

@@ -7,7 +7,8 @@
   export let page: Page;
   export let src: File;
 
-  $: textBoxes = page.blocks.map((block) => {
+  $: textBoxes = page.blocks
+    .map((block) => {
       const { img_height, img_width } = page;
       const { box, font_size, lines, vertical } = block;
 
@@ -20,6 +21,7 @@
 
       const width = xmax - xmin;
       const height = ymax - ymin;
+      const area = width * height;
 
       const textBox = {
         left: `${xmin}px`,
@@ -28,10 +30,14 @@
         height: `${height}px`,
         fontSize: $settings.fontSize === 'auto' ? `${font_size}px` : `${$settings.fontSize}pt`,
         writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
-      lines
+        lines,
+        area
       };
 
       return textBox;
+    })
+    .sort(({ area: a }, { area: b }) => {
+      return a - b;
     });
 
   $: fontWeight = $settings.boldFont ? 'bold' : '400';