diff --git a/TutorialMaker/Lib/TutorialExporter.py b/TutorialMaker/Lib/TutorialExporter.py
index c554af5..a9e038e 100644
--- a/TutorialMaker/Lib/TutorialExporter.py
+++ b/TutorialMaker/Lib/TutorialExporter.py
@@ -534,11 +534,26 @@ class Theme(Enum):
             overflow: hidden;
             page-break-after: always;
             page-break-inside: avoid;
-            min-height: 600px;
+            height: 600px;
+            display: flex;
+            flex-direction: column;
+        }}
+
+        /* Stacked content */
+        .slideContent, .textContent, .blankContent {{
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            padding: 40px;
         }}
 
-        /* Content Wrappers */
-        .slideContent, .coverContent, .backCoverContent, .sectionContent, .textContent, .blankContent {{
+        /* Centered content */
+        .coverContent, .backCoverContent, .sectionContent {{
+            flex: 0 1 auto;
+            min-height: 0;
+            overflow: hidden;
             padding: 40px;
         }}
 
@@ -546,7 +561,6 @@ class Theme(Enum):
         .cover {{
             background: linear-gradient(135deg, {primary} 0%, {secondary} 100%);
             color: white;
-            display: flex;
             align-items: center;
             justify-content: center;
         }}
@@ -589,45 +603,54 @@ class Theme(Enum):
 
         /* Regular Slides */
         .slideTitle {{
+            flex-shrink: 0;
             font-size: 2.2rem;
             font-weight: 600;
             color: {primary};
-            margin-bottom: 30px;
+            margin-bottom: 20px;
             padding-bottom: 15px;
             border-bottom: 3px solid {primary};
         }}
 
         .containerImage {{
-            text-align: center;
-            margin: 30px 0;
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
             background: #fafafa;
-            padding: 20px;
+            padding: 10px;
             border-radius: 4px;
         }}
 
         .slideImage {{
-            max-width: 90%;
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
             height: auto;
+            object-fit: contain;
             border-radius: 4px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }}
 
         .slideDescription {{
-            font-size: 1.2rem;
-            line-height: 1.8;
+            flex-shrink: 1;
+            min-height: 0;
+            overflow: hidden;
+            font-size: 1.1rem;
+            line-height: 1.6;
             color: #444;
             text-align: justify;
-            margin-top: 25px;
+            margin-top: 10px;
         }}
 
         /* Back Cover */
         .backCover {{
             background: linear-gradient(135deg, {secondary} 0%, {primary} 100%);
             color: white;
-            min-height: 600px;
-            display: flex;
-            flex-direction: column;
             align-items: center;
+            justify-content: center;
         }}
 
         .backCoverContent {{
@@ -677,8 +700,6 @@ class Theme(Enum):
         .sectionSlide {{
             background: linear-gradient(135deg, {primary} 0%, {secondary} 100%);
             color: white;
-            min-height: 600px;
-            display: flex;
             align-items: center;
             justify-content: center;
         }}
@@ -697,17 +718,21 @@ class Theme(Enum):
         }}
 
         .textTitle {{
+            flex-shrink: 0;
             font-size: 2.2rem;
             font-weight: 600;
             color: {primary};
-            margin-bottom: 30px;
+            margin-bottom: 20px;
             padding-bottom: 15px;
             border-bottom: 3px solid {primary};
         }}
 
         .textBody {{
-            font-size: 1.2rem;
-            line-height: 1.8;
+            flex-shrink: 1;
+            min-height: 0;
+            overflow: hidden;
+            font-size: 1.1rem;
+            line-height: 1.6;
             color: #444;
             text-align: justify;
         }}
@@ -717,40 +742,48 @@ class Theme(Enum):
             background: white;
         }}
 
-        .blankTitle {{
-            font-size: 2.2rem;
-            font-weight: 600;
-            color: {primary};
-            margin-bottom: 30px;
-            padding-bottom: 15px;
-            border-bottom: 3px solid {primary};
-        }}
-
         .blankBody {{
-            font-size: 1.2rem;
-            line-height: 1.8;
+            flex-shrink: 1;
+            min-height: 0;
+            overflow: hidden;
+            font-size: 1.1rem;
+            line-height: 1.6;
             color: #444;
-            text-align: justify;
+        }}
+
+        .slideContent p, .textContent p, .blankContent p {{
+            margin: 0 0 0.4em;
         }}
 
         /* Print Styles */
         @media print {{
+            * {{
+                print-color-adjust: exact;
+                -webkit-print-color-adjust: exact;
+            }}
+
             body {{
                 background: white;
                 padding: 0;
             }}
 
             .slide, .cover, .backCover, .sectionSlide, .textSlide, .blankSlide {{
+                max-width: none;
+                width: 297mm;
+                height: 148.5mm;
                 margin: 0;
                 box-shadow: none;
                 border-radius: 0;
-                min-height: 100vh;
-                height: auto;
+                overflow: hidden;
+            }}
+
+            .slideContent, .textContent, .blankContent {{
+                overflow: hidden;
             }}
         }}
 
         @page {{
-            size: A4 landscape;
+            size: 297mm 148.5mm;
             margin: 0;
         }}
     """,
@@ -777,16 +810,29 @@ class Theme(Enum):
             overflow: hidden;
             page-break-after: always;
             page-break-inside: avoid;
-            min-height: 600px;
+            height: 600px;
+            display: flex;
+            flex-direction: column;
+        }}
+
+        .slideContent, .textContent, .blankContent {{
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            padding: 50px;
         }}
 
-        .slideContent, .coverContent, .backCoverContent, .sectionContent, .textContent, .blankContent {{
+        .coverContent, .backCoverContent, .sectionContent {{
+            flex: 0 1 auto;
+            min-height: 0;
+            overflow: hidden;
             padding: 50px;
         }}
 
         .cover {{
             background: white;
-            display: flex;
             align-items: center;
             justify-content: center;
         }}
@@ -828,10 +874,11 @@ class Theme(Enum):
         }}
 
         .slideTitle {{
+            flex-shrink: 0;
             font-size: 2.5rem;
             font-weight: 600;
             color: {primary};
-            margin-bottom: 30px;
+            margin-bottom: 20px;
             padding-bottom: 15px;
             border-bottom: 2px solid {primary};
             text-align: center;
@@ -839,31 +886,40 @@ class Theme(Enum):
         }}
 
         .containerImage {{
-            text-align: center;
-            margin: 30px 0;
-            padding: 20px;
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            padding: 10px;
             border: 1px solid #ddd;
         }}
 
         .slideImage {{
-            max-width: 85%;
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
             height: auto;
+            object-fit: contain;
             border: 1px solid {primary};
         }}
 
         .slideDescription {{
-            font-size: 1.15rem;
-            line-height: 1.9;
+            flex-shrink: 1;
+            min-height: 0;
+            overflow: hidden;
+            font-size: 1.1rem;
+            line-height: 1.6;
             color: {text};
             text-align: justify;
-            margin-top: 25px;
+            margin-top: 10px;
         }}
 
         .backCover {{
             background: white;
-            display: flex;
-            flex-direction: column;
             align-items: center;
+            justify-content: center;
         }}
 
         .backCover .coverTitle {{
@@ -905,8 +961,6 @@ class Theme(Enum):
         /* Section Slide */
         .sectionSlide {{
             background: #fefefe;
-            min-height: 600px;
-            display: flex;
             align-items: center;
             justify-content: center;
         }}
@@ -931,10 +985,11 @@ class Theme(Enum):
         }}
 
         .textTitle {{
+            flex-shrink: 0;
             font-size: 2.5rem;
             font-weight: 600;
             color: {primary};
-            margin-bottom: 30px;
+            margin-bottom: 20px;
             padding-bottom: 15px;
             border-bottom: 2px solid {primary};
             text-align: center;
@@ -942,8 +997,11 @@ class Theme(Enum):
         }}
 
         .textBody {{
-            font-size: 1.15rem;
-            line-height: 1.9;
+            flex-shrink: 1;
+            min-height: 0;
+            overflow: hidden;
+            font-size: 1.1rem;
+            line-height: 1.6;
             color: {text};
             text-align: justify;
         }}
@@ -953,40 +1011,46 @@ class Theme(Enum):
             background: #fefefe;
         }}
 
-        .blankTitle {{
-            font-size: 2.5rem;
-            font-weight: 600;
-            color: {primary};
-            margin-bottom: 30px;
-            padding-bottom: 15px;
-            border-bottom: 2px solid {primary};
-            text-align: center;
-            font-family: Georgia, serif;
-        }}
-
         .blankBody {{
-            font-size: 1.15rem;
-            line-height: 1.9;
+            flex-shrink: 1;
+            min-height: 0;
+            overflow: hidden;
+            font-size: 1.1rem;
+            line-height: 1.6;
             color: {text};
-            text-align: justify;
+        }}
+
+        .slideContent p, .textContent p, .blankContent p {{
+            margin: 0 0 0.4em;
         }}
 
         @media print {{
+            * {{
+                print-color-adjust: exact;
+                -webkit-print-color-adjust: exact;
+            }}
+
             body {{
                 background: white;
                 padding: 0;
             }}
 
             .slide, .cover, .backCover, .sectionSlide, .textSlide, .blankSlide {{
+                max-width: none;
+                width: 297mm;
+                height: 148.5mm;
                 margin: 0;
                 border: none;
-                min-height: 100vh;
-                height: auto;
+                overflow: hidden;
+            }}
+
+            .slideContent, .textContent, .blankContent {{
+                overflow: hidden;
             }}
         }}
 
         @page {{
-            size: A4 landscape;
+            size: 297mm 148.5mm;
             margin: 0;
         }}
     """,
@@ -1012,15 +1076,28 @@ class Theme(Enum):
             overflow: hidden;
             page-break-after: always;
             page-break-inside: avoid;
-            min-height: 600px;
+            height: 600px;
+            display: flex;
+            flex-direction: column;
         }}
         
-        .slideContent, .coverContent, .backCoverContent, .sectionContent, .textContent, .blankContent {{
+        .slideContent, .textContent, .blankContent {{
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            padding: 60px;
+        }}
+
+        .coverContent, .backCoverContent, .sectionContent {{
+            flex: 0 1 auto;
+            min-height: 0;
+            overflow: hidden;
             padding: 60px;
         }}
 
         .cover {{
-            display: flex;
             align-items: center;
             justify-content: center;
             border-left: 8px solid {primary};
@@ -1056,35 +1133,46 @@ class Theme(Enum):
         }}
 
         .slideTitle {{
+            flex-shrink: 0;
             font-size: 2rem;
             font-weight: 400;
             color: {primary};
-            margin-bottom: 30px;
+            margin-bottom: 20px;
             padding-bottom: 10px;
             border-bottom: 1px solid {primary};
         }}
 
         .containerImage {{
-            text-align: center;
-            margin: 30px 0;
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            padding: 10px;
         }}
 
         .slideImage {{
             max-width: 100%;
+            max-height: 100%;
+            width: auto;
             height: auto;
+            object-fit: contain;
         }}
 
         .slideDescription {{
+            flex-shrink: 1;
+            min-height: 0;
+            overflow: hidden;
             font-size: 1.1rem;
-            line-height: 1.8;
+            line-height: 1.6;
             color: {text};
-            margin-top: 25px;
+            margin-top: 10px;
         }}
 
         .backCover {{
-            display: flex;
-            flex-direction: column;
             align-items: center;
+            justify-content: center;
             border-left: 8px solid {primary};
         }}
 
@@ -1127,8 +1215,6 @@ class Theme(Enum):
         .sectionSlide {{
             background: white;
             border-left: 8px solid {primary};
-            display: flex;
-            min-height: 600px;
             align-items: center;
             justify-content: center;
         }}
@@ -1148,17 +1234,21 @@ class Theme(Enum):
         }}
 
         .textTitle {{
+            flex-shrink: 0;
             font-size: 2rem;
             font-weight: 400;
             color: {primary};
-            margin-bottom: 30px;
+            margin-bottom: 20px;
             padding-bottom: 10px;
             border-bottom: 1px solid {primary};
         }}
 
         .textBody {{
+            flex-shrink: 1;
+            min-height: 0;
+            overflow: hidden;
             font-size: 1.1rem;
-            line-height: 1.8;
+            line-height: 1.6;
             color: {text};
         }}
 
@@ -1167,36 +1257,45 @@ class Theme(Enum):
             background: white;
         }}
 
-        .blankTitle {{
-            font-size: 2rem;
-            font-weight: 400;
-            color: {primary};
-            margin-bottom: 30px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid {primary};
-        }}
-
         .blankBody {{
+            flex-shrink: 1;
+            min-height: 0;
+            overflow: hidden;
             font-size: 1.1rem;
-            line-height: 1.8;
+            line-height: 1.6;
             color: {text};
         }}
 
+        .slideContent p, .textContent p, .blankContent p {{
+            margin: 0 0 0.4em;
+        }}
+
         @media print {{
+            * {{
+                print-color-adjust: exact;
+                -webkit-print-color-adjust: exact;
+            }}
+
             body {{
                 background: white;
                 padding: 0;
             }}
 
             .slide, .cover, .backCover, .sectionSlide, .textSlide, .blankSlide {{
+                max-width: none;
+                width: 297mm;
+                height: 148.5mm;
                 margin: 0;
-                min-height: 100vh;
-                height: auto;
+                overflow: hidden;
+            }}
+
+            .slideContent, .textContent, .blankContent {{
+                overflow: hidden;
             }}
         }}
 
         @page {{
-            size: A4 landscape;
+            size: 297mm 148.5mm;
             margin: 0;
         }}
     """
@@ -1212,7 +1311,7 @@ def __init__(self, title: str, author: str, date: str, description: str):
         self.Description = description
         pass
     
-    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = HTML_TEMPLATES[theme]['cover']
         colors = PALETTE_COLORS[palette]
         return template.format(
@@ -1223,7 +1322,7 @@ def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
             **colors
         )
     
-    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = MARKDOWN_TEMPLATES[theme]['cover']
         colors = PALETTE_COLORS[palette]
         return template.format(
@@ -1239,7 +1338,7 @@ def __init__(self, title: str, Acknowledgments: str):
         self.Title = title
         self.Acknowledgments = Acknowledgments 
     
-    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         if isinstance(self.Acknowledgments, dict):
             items = "".join(
                 f"<li><div class='ackItem'><strong>{k}</strong><p>{v}</p></div></li>"
@@ -1257,7 +1356,7 @@ def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
             **colors
         )
 
-    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         colors = PALETTE_COLORS[palette]
         
         if isinstance(self.Acknowledgments, dict):
@@ -1289,13 +1388,18 @@ def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODER
         )
 
 class SimpleSlide():
-    def __init__(self, Title: str, Description: str, ImagePath: str):
+    def __init__(self, Title: str, Description: str, ImagePath: str, base_dir: str = None):
         self.Title = Title
         self.Description = Description
         self.ImagePath = ImagePath
+        self.BaseDir = base_dir
     
-    def _get_image_data_url(self, image_path):
-        if not image_path or not os.path.exists(image_path):
+    def _get_image_data_url(self, image_path, base_dir: str = None):
+        if not image_path:
+            return image_path
+        if base_dir and not os.path.isabs(image_path):
+            image_path = os.path.join(base_dir, image_path)
+        if not os.path.exists(image_path):
             return image_path
         
         try:
@@ -1319,11 +1423,14 @@ def _get_image_data_url(self, image_path):
             print(f"Warning: Could not convert image to base64 ({image_path}): {e}")
             return image_path
         
-    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = HTML_TEMPLATES[theme]['slide']
         colors = PALETTE_COLORS[palette]
-        
-        image_src = self._get_image_data_url(self.ImagePath)
+        base_dir = self.BaseDir
+        if embed:
+            image_src = self._get_image_data_url(self.ImagePath, base_dir=base_dir)
+        else:
+            image_src = self.ImagePath or ""
 
         return template.format(
             title=self.Title,
@@ -1333,11 +1440,14 @@ def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
             **colors
         )
     
-    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = MARKDOWN_TEMPLATES[theme]['slide']
         colors = PALETTE_COLORS[palette]
-        
-        image_src = self._get_image_data_url(self.ImagePath)
+        base_dir = self.BaseDir
+        if embed:
+            image_src = self._get_image_data_url(self.ImagePath, base_dir=base_dir)
+        else:
+            image_src = self.ImagePath or ""
         
         return template.format(
             title=self.Title,
@@ -1351,7 +1461,7 @@ class SimpleSection():
     def __init__(self, Title: str):
         self.Title = Title
     
-    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = HTML_TEMPLATES[theme]['section']
         colors = PALETTE_COLORS[palette]
         return template.format(
@@ -1359,7 +1469,7 @@ def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
             **colors
         )
     
-    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = MARKDOWN_TEMPLATES[theme]['section']
         colors = PALETTE_COLORS[palette]
         return template.format(
@@ -1372,7 +1482,7 @@ def __init__(self, Title: str, Body: str):
         self.Title = Title
         self.Body = Body
     
-    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = HTML_TEMPLATES[theme]['text']
         colors = PALETTE_COLORS[palette]
         return template.format(
@@ -1381,7 +1491,7 @@ def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
             **colors
         )
     
-    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = MARKDOWN_TEMPLATES[theme]['text']
         colors = PALETTE_COLORS[palette]
         return template.format(
@@ -1394,12 +1504,12 @@ class BlankSlide():
     def __init__(self):
         pass
     
-    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = HTML_TEMPLATES[theme]['blank']
         colors = PALETTE_COLORS[palette]
         return template.format(**colors)
     
-    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
+    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
         template = MARKDOWN_TEMPLATES[theme]['blank']
         colors = PALETTE_COLORS[palette]
         return template.format(**colors)
@@ -1419,9 +1529,10 @@ def __init__(self, Model:SlideModel = SlideModel.SimpleSlide):
         self.Model = Model # Model will be used later to create more than one type of slide
 
 class TutorialExporter():
-    def __init__(self, Slides: list[SlidePage], Title: str):
+    def __init__(self, Slides: list[SlidePage], Title: str, html_dir: str = None):
         self.Slides = Slides
         self.Title = Title
+        self.HtmlDir = html_dir
         self.Html = """ <!DOCTYPE html>
                         <html lang="en">
                         <head>
@@ -1435,18 +1546,103 @@ def __init__(self, Slides: list[SlidePage], Title: str):
                         <style>
                             {}
                         </style>
+                        <script>
+                        function fitSlides() {{
+                            var specs = [
+                                {{ container: '.slideContent', texts: ['.slideTitle', '.slideDescription'], scaleUp: false }},
+                                {{ container: '.textContent',  texts: ['.textTitle', '.textBody'], scaleUp: true }},
+                                {{ container: '.blankContent', texts: ['.blankBody'], scaleUp: true }}
+                            ];
+
+                            specs.forEach(function(spec) {{
+                                document.querySelectorAll(spec.container).forEach(function(el) {{
+                                    var textEls = spec.texts
+                                        .map(function(s) {{ return el.querySelector(s); }})
+                                        .filter(Boolean);
+                                    if (!textEls.length) return;
+
+                                    // reset any previous inline font-size
+                                    textEls.forEach(function(t) {{ t.style.fontSize = ''; }});
+
+                                    // Step 1: capture constrained dimensions
+                                    var rect      = el.getBoundingClientRect();
+                                    var available = rect.height;
+                                    var elWidth   = rect.width;
+                                    if (available <= 0 || elWidth <= 0) return;
+
+                                    // Step 2: clone off-screen with the SAME width → accurate natural height
+                                    function measure(source) {{
+                                        var c = source.cloneNode(true);
+                                        c.style.cssText = [
+                                            'position:fixed',
+                                            'top:-99999px',
+                                            'left:-99999px',
+                                            'width:' + elWidth + 'px',
+                                            'height:auto',
+                                            'min-height:0',
+                                            'overflow:visible',
+                                            'flex:none',
+                                            'visibility:hidden'
+                                        ].join(';');
+                                        document.body.appendChild(c);
+                                        var h = c.getBoundingClientRect().height;
+                                        document.body.removeChild(c);
+                                        return h;
+                                    }}
+
+                                    var natural = measure(el);
+
+                                    // Step 3: scale UP if text-only slide has significant empty space
+                                    if (spec.scaleUp && natural < available * 0.9) {{
+                                        var upRatio = (available * 0.95) / natural;
+                                        textEls.forEach(function(t) {{
+                                            var fs = parseFloat(window.getComputedStyle(t).fontSize);
+                                            t.style.fontSize = (fs * upRatio) + 'px';
+                                        }});
+                                        natural = measure(el);
+                                    }}
+
+                                    if (natural <= available) return;
+
+                                    // Step 4: single-shot scale down
+                                    var ratio = available / natural;
+                                    textEls.forEach(function(t) {{
+                                        var fs = parseFloat(window.getComputedStyle(t).fontSize);
+                                        t.style.fontSize = Math.max(fs * ratio, 6) + 'px';
+                                    }});
+
+                                    // Step 5: one correction pass for line-height rounding
+                                    var after = measure(el);
+                                    if (after > available) {{
+                                        var ratio2 = available / after;
+                                        textEls.forEach(function(t) {{
+                                            var fs = parseFloat(window.getComputedStyle(t).fontSize);
+                                            t.style.fontSize = Math.max(fs * ratio2, 6) + 'px';
+                                        }});
+                                    }}
+                                }});
+                            }});
+                        }}
+
+                        document.addEventListener('DOMContentLoaded', function() {{
+                            requestAnimationFrame(function() {{
+                                requestAnimationFrame(fitSlides);
+                            }});
+                        }});
+                        window.addEventListener('beforeprint', fitSlides);
+                        </script>
                         </html>
                     """
         self.Markdown = ""
         
-    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
-        body = "".join([slide.Model.ToHtml(palette=palette, theme=theme) for slide in self.Slides])
+    def ToHtml(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
+        body = "".join([slide.Model.ToHtml(palette=palette, theme=theme, embed=embed) for slide in self.Slides])
         colors = PALETTE_COLORS[palette]
         css = CSS_TEMPLATES[theme].format(**colors)
         return self.Html.format(self.Title, body, css)
     
-    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
-        md = "".join([slide.Model.ToMarkdown(palette=palette, theme=theme) for slide in self.Slides])
+    def ToMarkdown(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN, embed: bool = False):
+        md = "".join([slide.Model.ToMarkdown(palette=palette, theme=theme, embed=embed) for slide in self.Slides])
         self.Markdown = md
         return md
     
@@ -1462,7 +1658,7 @@ def ToPdf(self, palette: Palette = Palette.BLUE, theme: Theme = Theme.MODERN):
             printer.setOrientation(qt.QPrinter.Landscape)
 
             doc = qt.QTextDocument()
-            doc.setHtml(self.ToHtml(palette=palette, theme=theme))
+            doc.setHtml(self.ToHtml(palette=palette, theme=theme, embed=True))
             doc.setPageSize(qt.QSizeF(printer.pageRect().size()))
             doc.print_(printer)
             
diff --git a/TutorialMaker/Lib/TutorialPainter.py b/TutorialMaker/Lib/TutorialPainter.py
index 9246a46..46697ae 100644
--- a/TutorialMaker/Lib/TutorialPainter.py
+++ b/TutorialMaker/Lib/TutorialPainter.py
@@ -842,11 +842,11 @@ def GenerateHTMLfromAnnotatedTutorial(self, path):
                 )
 
             elif slide.SlideLayout == AnnotatorSlideLayoutType.Screenshot:
-                full_image_path = os.path.join(localizedScreenshotsPath, slide.imagePath)
                 page = Exporter.SimpleSlide(
                     slide.SlideTitle,
                     self.SimpleParser(slide.SlideBody),
-                    full_image_path
+                    slide.imagePath,
+                    base_dir=localizedScreenshotsPath
                 )
 
             elif slide.SlideLayout == AnnotatorSlideLayoutType.Blank:
@@ -860,7 +860,7 @@ def GenerateHTMLfromAnnotatedTutorial(self, path):
         
         tutorialPath = localizedScreenshotsPath + f"/{clean_title}"
 
-        export = Exporter.TutorialExporter(pages, self.TutorialInfo["title"])
+        export = Exporter.TutorialExporter(pages, self.TutorialInfo["title"], html_dir=localizedScreenshotsPath)
         html = export.ToHtml()
         markdown = export.ToMarkdown()
         # pdf = export.ToPdf()