@udx/md2html 1.2.1 → 1.4.0

package/index.js

@@ -89,7 +89,7 @@ const CHAPTER_NAV_STYLES_PATH = path.join(path.dirname(new URL(import.meta.url).
 const SCRIPTS_PATH = path.join(path.dirname(new URL(import.meta.url).pathname), 'static/scripts.js');
 
 program
-  .version('1.2.0')
+  .version('1.3.0')
   .description('Convert markdown files to a single HTML document with Google Docs styling')
   .option('-s, --src <file>', 'Source markdown file or directory')
   .option('-o, --out <file>', 'Output HTML file path (optional - defaults to ./output.html)')
@@ -97,6 +97,8 @@ program
   .option('-d, --debug', 'Enable debug logging', false)
   .option('-p, --preview', 'Open generated HTML in browser with live preview server', false)
   .option('--port <number>', 'Port for preview server (default: random)', parseInt)
+  .option('-c, --css <file>', 'Custom CSS file to include (or auto-detect custom.css in source directory)')
+  .option('--theme <name>', 'Built-in theme: default, legal', 'default')
   .addHelpText('after', `
 Examples:
   Basic conversion:
@@ -111,7 +113,11 @@ Examples:
     md2html -s content/docs --preview --port 3000
   
   Single file:
-    md2html -s document.md --preview`)
+    md2html -s document.md --preview
+  
+  Custom styling:
+    md2html -s content/docs --css=custom.css
+    md2html -s content/docs --theme=legal`)
   .parse(process.argv);
 
 const options = program.opts();
@@ -147,6 +153,40 @@ async function buildHtml(srcDir, outputFile) {
     const chapterNavStyles = fs.readFileSync(CHAPTER_NAV_STYLES_PATH, 'utf8');
     const jsScripts = fs.readFileSync(SCRIPTS_PATH, 'utf8');
     
+    // Load custom CSS if specified or auto-detect
+    let customStyles = '';
+    const srcDirResolved = fs.statSync(srcDir).isDirectory() ? srcDir : path.dirname(srcDir);
+    
+    // Check for custom CSS in order of priority:
+    // 1. Explicit --css flag
+    // 2. custom.css in source directory
+    // 3. styles.css in source directory
+    const customCssPaths = [
+      options.css ? path.resolve(options.css) : null,
+      path.join(srcDirResolved, 'custom.css'),
+      path.join(srcDirResolved, 'styles.css')
+    ].filter(Boolean);
+    
+    for (const cssPath of customCssPaths) {
+      if (fs.existsSync(cssPath)) {
+        customStyles = fs.readFileSync(cssPath, 'utf8');
+        debug(`Loaded custom CSS from: ${cssPath}`);
+        break;
+      }
+    }
+    
+    // Apply built-in theme styles from files
+    let themeStyles = '';
+    if (options.theme && options.theme !== 'default') {
+      const themePath = path.join(path.dirname(new URL(import.meta.url).pathname), `static/themes/${options.theme}.css`);
+      if (fs.existsSync(themePath)) {
+        themeStyles = fs.readFileSync(themePath, 'utf8');
+        debug(`Applied ${options.theme} theme from: ${themePath}`);
+      } else {
+        console.warn(`Warning: Theme '${options.theme}' not found at ${themePath}`);
+      }
+    }
+    
     // Register custom Handlebars helpers
     Handlebars.registerHelper('slugify', function(text) {
       return text
@@ -552,6 +592,41 @@ async function buildHtml(srcDir, outputFile) {
     
     processedContent = processedContent.replace(/<table>/g, '<table aria-hidden="true" role="presentation">');
 
+    // Convert checkbox syntax to FontAwesome icons
+    // Unchecked: - [ ] or * [ ] becomes FontAwesome square icon
+    // Checked: - [x] or * [x] becomes FontAwesome check-square icon
+    processedContent = processedContent.replace(
+      /<li>\s*\[\s*\]\s*/gi,
+      '<li class="checkbox-item"><i class="far fa-square checkbox-icon"></i> '
+    );
+    processedContent = processedContent.replace(
+      /<li>\s*\[x\]\s*/gi,
+      '<li class="checkbox-item checkbox-checked"><i class="fas fa-check-square checkbox-icon"></i> '
+    );
+    
+    // Process inline SVG elements for proper sizing
+    // Add responsive wrapper and ensure viewBox is preserved
+    processedContent = processedContent.replace(
+      /<svg([^>]*)>/gi,
+      (match, attrs) => {
+        // Check if it already has a class
+        if (attrs.includes('class=')) {
+          return match.replace(/class="([^"]*)"/, 'class="$1 svg-responsive"');
+        }
+        return `<svg class="svg-responsive"${attrs}>`;
+      }
+    );
+    
+    // Wrap standalone SVG elements in a figure for better layout control
+    processedContent = processedContent.replace(
+      /(<p>)?(<svg[^>]*>[\s\S]*?<\/svg>)(<\/p>)?/gi,
+      (match, openP, svg, closeP) => {
+        // If SVG is already in a figure, don't wrap again
+        if (match.includes('<figure')) return match;
+        return `<figure class="svg-container">${svg}</figure>`;
+      }
+    );
+
     // If it's an imgix URL, add width parameter
     processedContent = processedContent.replace(/src="(https:\/\/[^"]*imgix\.net\/[^"]+)(?:\?([^"]*))?"/g, (match, url, params) => {
       if (params && params.includes('w=')) {
@@ -635,6 +710,11 @@ async function buildHtml(srcDir, outputFile) {
     processedWithHeadingAttrs += `\n<script type="application/json" id="document-chapters-data">${chaptersJSON}</script>\n`;
     
     // Prepare data for template
+    // Combine all styles: base + chapter nav + theme + custom (custom overrides all)
+    const allStyles = [cssStyles, chapterNavStyles, themeStyles, customStyles]
+      .filter(Boolean)
+      .join('\n\n');
+    
     const templateData = {
       title,
       description,
@@ -642,7 +722,7 @@ async function buildHtml(srcDir, outputFile) {
       date,
       version,
       content: processedWithHeadingAttrs,
-      styles: cssStyles + '\n' + chapterNavStyles,
+      styles: allStyles,
       scripts: jsScripts,
       chapters: chaptersInfo
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udx/md2html",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "Magazine-quality Markdown to HTML converter with professional styling",
   "main": "index.js",
   "type": "module",

package/static/chapter-navigation.css

@@ -1,11 +1,10 @@
 /* Chapter Navigation Styles */
 :root {
-  --chapter-nav-width: 180px;
-  --chapter-nav-text-color: #333;
-  --chapter-nav-text-faded: rgba(51, 51, 51, 0.4);
-  --chapter-text-normal-size: 0.9rem;
-  --chapter-text-active-size: calc(var(--chapter-text-normal-size) * 1.5);
-  --chapter-text-inactive-size: calc(var(--chapter-text-normal-size) * 0.8);
+  --chapter-nav-width: 220px;
+  --chapter-nav-text-color: #1a1a1a;
+  --chapter-nav-text-faded: rgba(51, 51, 51, 0.65);
+  --chapter-nav-active-color: #991b1b;
+  --chapter-text-size: 0.85rem;
 }
 
 /* Container for the floating navigation */
@@ -17,16 +16,16 @@
 /* Floating navigation styles - clean and minimal */
 .chapter-navigation {
   position: fixed;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 20px;
+  top: 0;
+  left: 0;
   width: var(--chapter-nav-width);
-  max-height: 80vh;
+  height: 100vh;
   overflow-y: auto;
-  background-color: transparent;
-  padding: 10px 0;
+  background-color: #fff;
+  padding: 40px 20px 60px 20px;
   z-index: 100;
-  scrollbar-width: none; /* Hide scrollbar for Firefox */
+  scrollbar-width: thin; /* Show thin scrollbar for Firefox */
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
   transition: transform 0.3s ease;
   border: 0 none transparent !important;
   box-shadow: none !important;
@@ -35,9 +34,18 @@
   -moz-box-shadow: none !important;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
+/* Show thin scrollbar for Chrome, Safari and Opera */
 .chapter-navigation::-webkit-scrollbar {
-  display: none;
+  width: 4px;
+}
+
+.chapter-navigation::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chapter-navigation::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
 }
 
 .chapter-nav-list {
@@ -47,20 +55,24 @@
 }
 
 .chapter-nav-item {
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   transition: all 0.3s ease;
 }
 
 .chapter-nav-link {
   display: block;
-  padding: 4px 0;
-  font-size: var(--chapter-text-inactive-size);
+  padding: 6px 0;
+  font-size: var(--chapter-text-size);
   color: var(--chapter-nav-text-faded);
   text-decoration: none;
-  transition: all 0.3s ease;
+  transition: color 0.2s ease, text-decoration 0.2s ease;
   background-color: transparent;
   border-radius: 0;
-  line-height: 1.3;
+  line-height: 1.4;
+  /* Better text handling for long titles */
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
 }
 
 .chapter-nav-link:hover {
@@ -68,9 +80,12 @@
 }
 
 .chapter-nav-item.active .chapter-nav-link {
-  font-size: var(--chapter-text-active-size);
-  color: var(--chapter-nav-text-color);
+  /* Use color and underline instead of font-size to prevent jumping */
+  font-size: var(--chapter-text-size);
+  color: var(--chapter-nav-active-color);
   font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
 
 /* Mobile dropdown styles - native-looking and minimal */
@@ -169,19 +184,28 @@
 
 .chapter-dropdown-menu li.active a {
   font-weight: 500;
-  color: var(--chapter-nav-text-color);
-  font-size: calc(0.95rem * 1.2);
+  color: var(--chapter-nav-active-color);
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
 
 /* Add padding to the content to prevent floating nav from overlapping */
+/* Content is centered in the remaining space to the right of the sidebar */
 .chapter-content {
-  padding-left: calc(var(--chapter-nav-width) + 40px);
+  /* Leave space for sidebar on the left - push content further right */
+  margin-left: calc(var(--chapter-nav-width) + 120px);
+  /* Add margin on the right for balance */
+  margin-right: 80px;
+  /* Remove padding-left since we're using margin */
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* Responsive adjustments */
 @media (max-width: 1024px) {
   .chapter-content {
-    padding-left: calc(var(--chapter-nav-width) + 30px);
+    margin-left: calc(var(--chapter-nav-width) + 60px);
+    margin-right: 40px;
   }
 }
 
@@ -195,12 +219,14 @@
   }
   
   .chapter-content {
-    padding-left: 20px;
-    padding-right: 20px;
+    margin-left: 20px;
+    margin-right: 20px;
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 
-/* Hide nav when printing */
+/* Hide nav when printing - let browser print dialog control all margins */
 @media print {
   .chapter-navigation,
   .mobile-chapter-nav {
@@ -208,6 +234,12 @@
   }
   
   .chapter-content {
-    padding-left: 0;
+    /* Remove all margins and padding so browser print dialog controls page margins */
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    max-width: 100% !important;
+    width: 100% !important;
   }
 }

package/static/scripts.js

@@ -44,51 +44,16 @@ document.addEventListener('DOMContentLoaded', (event) => {
     }
   });
 
-  // Ensure all tables are 100% width with stronger enforcement
+  // Table enhancement - add responsive wrapper and basic styling
+  // Note: We do NOT set inline styles for table-layout or width to avoid conflicts with CSS
   document.querySelectorAll('table').forEach(table => {
-    // Force full width with inline style AND classes
-    table.style.width = '100%';
-    table.style.tableLayout = 'fixed';
-    table.setAttribute('width', '100%');
-    table.classList.add('w-full');
-    table.classList.add('table-fixed');
-    
     // Add responsive wrapper if not already wrapped
     if (table.parentElement.tagName !== 'DIV' || !table.parentElement.classList.contains('table-responsive')) {
       const wrapper = document.createElement('div');
-      wrapper.className = 'table-responsive w-full overflow-x-auto my-8';
-      wrapper.style.width = '100%';
-      wrapper.style.maxWidth = '100%';
+      wrapper.className = 'table-responsive';
       table.parentNode.insertBefore(wrapper, table);
       wrapper.appendChild(table);
     }
-    
-    // Add proper classes and styles to table headers
-    table.querySelectorAll('th').forEach(th => {
-      th.classList.add('bg-gray-50');
-      th.classList.add('font-semibold');
-      th.classList.add('p-3');
-      th.classList.add('text-left');
-      th.classList.add('border');
-      th.classList.add('border-gray-200');
-      th.style.padding = '0.75rem 1rem';
-    });
-    
-    // Add proper classes and styles to table cells
-    table.querySelectorAll('td').forEach(td => {
-      td.classList.add('p-3');
-      td.classList.add('text-left');
-      td.classList.add('border');
-      td.classList.add('border-gray-200');
-      td.style.padding = '0.75rem 1rem';
-      td.style.borderColor = 'rgba(0, 0, 0, 0.1)';
-    });
-    
-    // Force table to use entire container width
-    const parentWidth = table.parentElement.offsetWidth;
-    if (parentWidth > 0) {
-      table.style.minWidth = parentWidth + 'px';
-    }
   });
 
   // Remove any blue highlights
@@ -122,24 +87,6 @@ document.addEventListener('DOMContentLoaded', (event) => {
     }
   });
   
-  // Improve table layout and ensure proper alignment
-  document.querySelectorAll('table').forEach(table => {
-    // Add a container for horizontal scrolling if needed
-    const wrapper = document.createElement('div');
-    wrapper.style.width = '100%';
-    wrapper.style.overflowX = 'auto';
-    table.parentNode.insertBefore(wrapper, table);
-    wrapper.appendChild(table);
-    
-    // Ensure consistent styling
-    table.querySelectorAll('th, td').forEach(cell => {
-      cell.style.padding = '0.75em 1em';
-      cell.style.verticalAlign = 'top';
-      cell.style.textAlign = 'left';
-      cell.style.fontSize = '18px';
-    });
-  });
-  
   // Process quote attributions with em dash
   document.querySelectorAll('blockquote + p').forEach(p => {
     const text = p.textContent || '';
@@ -206,10 +153,11 @@ document.addEventListener('DOMContentLoaded', (event) => {
     
     window.updateActiveChapter = () => {
       try {
-        // Only target H2 headings
-        const headings = Array.from(document.querySelectorAll('h2'));
+        // Target H2 and H3 headings for navigation
+        const allHeadings = Array.from(document.querySelectorAll('h2, h3'));
+        const h2Headings = Array.from(document.querySelectorAll('h2'));
         
-        if (!headings.length || !chapterNavItems.length) return;
+        if (!allHeadings.length || !chapterNavItems.length) return;
         
         // Calculate which heading is most visible in the viewport
         const viewportHeight = window.innerHeight;
@@ -218,7 +166,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
         let bestVisibleHeading = null;
         let bestVisibleScore = -1;
         
-        headings.forEach(heading => {
+        allHeadings.forEach(heading => {
           if (!heading) return;
           
           const rect = heading.getBoundingClientRect();
@@ -240,10 +188,29 @@ document.addEventListener('DOMContentLoaded', (event) => {
           }
         });
         
+        // Find the parent H2 for the current heading (if it's an H3)
+        const findParentH2 = (heading) => {
+          if (!heading || heading.tagName === 'H2') return heading;
+          
+          // Walk backwards through all headings to find the parent H2
+          const headingIndex = allHeadings.indexOf(heading);
+          for (let i = headingIndex - 1; i >= 0; i--) {
+            if (allHeadings[i].tagName === 'H2') {
+              return allHeadings[i];
+            }
+          }
+          return null;
+        };
+        
         if (bestVisibleHeading) {
           const headingId = bestVisibleHeading.getAttribute('id');
           const headingText = bestVisibleHeading.textContent.trim();
           
+          // Get parent H2 if current heading is H3
+          const parentH2 = findParentH2(bestVisibleHeading);
+          const parentH2Text = parentH2 ? parentH2.textContent.trim() : null;
+          const parentH2Id = parentH2 ? parentH2.getAttribute('id') : null;
+          
           chapterNavItems.forEach(item => {
             if (!item) return;
             
@@ -251,22 +218,30 @@ document.addEventListener('DOMContentLoaded', (event) => {
             if (!navLink) return;
             
             const itemText = navLink.textContent.trim();
-            const isActive = itemText === headingText || item.getAttribute('data-chapter-id') === headingId;
+            const itemId = item.getAttribute('data-chapter-id');
+            
+            // Check if this nav item matches the current heading OR its parent H2
+            const isCurrentHeading = itemText === headingText || itemId === headingId;
+            const isParentSection = parentH2 && (itemText === parentH2Text || itemId === parentH2Id);
+            const isActive = isCurrentHeading || isParentSection;
             
             if (isActive) {
               item.classList.add('active');
               
-              const navContainer = document.querySelector('.chapter-navigation');
-              if (navContainer) {
-                const itemOffset = item.offsetTop;
-                const navHeight = navContainer.offsetHeight;
-                const itemHeight = item.offsetHeight;
+              // Only scroll to and update text for the most specific (current) heading
+              if (isCurrentHeading) {
+                const navContainer = document.querySelector('.chapter-navigation');
+                if (navContainer) {
+                  const itemOffset = item.offsetTop;
+                  const navHeight = navContainer.offsetHeight;
+                  const itemHeight = item.offsetHeight;
+                  
+                  navContainer.scrollTop = itemOffset - (navHeight / 2) + (itemHeight / 2);
+                }
                 
-                navContainer.scrollTop = itemOffset - (navHeight / 2) + (itemHeight / 2);
-              }
-              
-              if (currentChapterText) {
-                currentChapterText.textContent = itemText;
+                if (currentChapterText) {
+                  currentChapterText.textContent = itemText;
+                }
               }
             } else {
               item.classList.remove('active');
@@ -281,7 +256,10 @@ document.addEventListener('DOMContentLoaded', (event) => {
             if (!link) return;
             
             const itemText = link.textContent.trim();
-            const isActive = itemText === headingText || item.getAttribute('data-chapter-id') === headingId;
+            const itemId = item.getAttribute('data-chapter-id');
+            const isCurrentHeading = itemText === headingText || itemId === headingId;
+            const isParentSection = parentH2 && (itemText === parentH2Text || itemId === parentH2Id);
+            const isActive = isCurrentHeading || isParentSection;
             
             if (isActive) {
               item.classList.add('active');
@@ -289,8 +267,8 @@ document.addEventListener('DOMContentLoaded', (event) => {
               item.classList.remove('active');
             }
           });
-        } else if (headings.length > 0) {
-          const firstHeading = headings[0];
+        } else if (h2Headings.length > 0) {
+          const firstHeading = h2Headings[0];
           const firstHeadingText = firstHeading.textContent.trim();
           
           chapterNavItems.forEach(item => {

package/static/styles.css

@@ -1,4 +1,10 @@
 @media print {
+  /* Remove all margins so browser print dialog controls page margins */
+  html, body {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+  
   pre, pre code {
     white-space: pre-wrap !important;
     overflow-x: hidden !important;
@@ -27,11 +33,15 @@
   .content-container {
     max-width: 100% !important;
     width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
   }
   
-  article {
+  article, main, section {
     width: 100% !important;
     max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
   }
 }
 
@@ -182,42 +192,41 @@ blockquote + p {
   margin-top: 2em;
 }
 
-/* Enhanced table styling with true full width enforcement */
+/* Enhanced table styling - use auto layout for natural column sizing */
 .prose table,
 table.w-full,
 article table,
 div table,
 .table-responsive table {
-  width: 100% !important;
-  min-width: 100% !important;
-  max-width: 100% !important;
-  margin: 2em 0 !important;
-  border-collapse: collapse !important;
-  table-layout: fixed !important;
-  display: table !important;
+  width: 100%;
+  margin: 2em 0;
+  border-collapse: collapse;
+  table-layout: auto;
+  display: table;
 }
 
 /* Table wrapper to handle overflow properly */
 .table-responsive,
 div.overflow-x-auto {
-  width: 100% !important;
-  min-width: 100% !important;
-  max-width: 100% !important;
-  overflow-x: auto !important;
-  margin: 2em 0 !important;
-  display: block !important;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  margin: 2em 0;
+  display: block;
 }
 
 .prose table th, .prose table td {
-  padding: 0.75em 1em !important;
-  border: 1px solid rgba(0, 0, 0, 0.1) !important;
-  text-align: left !important;
-  vertical-align: top !important;
+  padding: 0.75em 1em;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  text-align: left;
+  vertical-align: top;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .prose table th {
-  font-weight: 600 !important;
-  background-color: rgba(0, 0, 0, 0.05) !important;
+  font-weight: 600;
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 /* Grid-based tables for special formatting needs */
@@ -338,26 +347,60 @@ pre:has(.file-type-badge) .copy-button {
   display: none;
 }
 
-/* Image handling */
+/* ============================================
+   VISUAL ELEMENT SPACING
+   Consistent spacing for images, SVG, mermaid, figures
+   ============================================ */
+
+/* Base visual element spacing - consistent 1.5em above and below */
+:root {
+  --visual-spacing-top: 1.5em;
+  --visual-spacing-bottom: 1.5em;
+  --visual-spacing-print-top: 1em;
+  --visual-spacing-print-bottom: 1em;
+}
+
+/* Figure element - wrapper for images with captions */
 figure {
-  margin-top: 2em;
-  margin-bottom: 2em;
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
   text-align: center;
+  display: block;
 }
 
+/* Images - standalone or within figures */
 img {
   max-width: 100%;
   height: auto;
   border-radius: 0.25em;
-  margin-top: 2em;
-  margin-bottom: 0.5em;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Standalone images (not in figure) get vertical spacing */
+p > img,
+article > img,
+section > img,
+main > img,
+.prose > img {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
+}
+
+/* Images inside figures don't need extra spacing */
+figure img {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
+/* Figure captions */
 figcaption {
-  margin-top: 0.5em;
+  margin-top: 0.75em;
   font-size: 0.9em;
   color: #64748b;
   font-style: italic;
+  text-align: center;
 }
 
 /* Alt text is visually hidden but accessible for screen readers */
@@ -482,3 +525,232 @@ a:hover {
 .MathJax {
   font-size: 1.1em !important;
 }
+
+/* Checkbox styling with FontAwesome icons */
+.checkbox-item {
+  list-style: none;
+  margin-left: -1.5em;
+  padding-left: 0;
+}
+
+.checkbox-icon {
+  color: #6b7280;
+  font-size: 1.1em;
+  margin-right: 0.5em;
+  vertical-align: middle;
+}
+
+.checkbox-checked .checkbox-icon {
+  color: #10b981;
+}
+
+/* SVG responsive styling */
+.svg-responsive {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* SVG container with consistent spacing */
+.svg-container {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.svg-container svg {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Standalone SVG elements (not in container) */
+article > svg,
+section > svg,
+main > svg,
+.prose > svg {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Mermaid diagram containers - consistent spacing */
+.mermaid {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
+  text-align: center;
+  overflow-x: auto;
+}
+
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Signature block styling for SVG signatures */
+.signature-block {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
+  padding: 1em;
+  border-top: 1px solid #e5e7eb;
+}
+
+.signature-block svg {
+  max-width: 300px;
+  height: auto;
+}
+
+/* Print styling for visual elements */
+@media print {
+  /* Consistent print spacing for all visual elements */
+  figure,
+  .svg-container,
+  .mermaid,
+  article > img,
+  section > img,
+  main > img,
+  .prose > img {
+    margin-top: var(--visual-spacing-print-top);
+    margin-bottom: var(--visual-spacing-print-bottom);
+    page-break-inside: avoid;
+  }
+  
+  .svg-responsive {
+    max-width: 6in;
+  }
+  
+  /* Ensure images don't overflow in print */
+  img, svg {
+    max-width: 100% !important;
+    height: auto !important;
+  }
+}
+
+/* ============================================
+   PRINT PAGE BREAK SUPPORT
+   ============================================ */
+
+/* Manual page break - use <!-- pagebreak --> in markdown */
+.page-break {
+  page-break-before: always;
+  break-before: page;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+/* Print-specific page break rules */
+@media print {
+  /* Force page break before h1 (new chapters/volumes) */
+  h1 {
+    page-break-before: always;
+    break-before: page;
+  }
+  
+  /* First h1 should not have page break before it */
+  section:first-of-type h1:first-child,
+  article:first-of-type h1:first-child,
+  main > h1:first-child {
+    page-break-before: auto;
+    break-before: auto;
+  }
+  
+  /* Keep headings with their following content */
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+    break-after: avoid;
+  }
+  
+  /* Prevent page breaks inside these elements */
+  table, figure, pre, blockquote, ul, ol {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  
+  /* For very long tables, allow breaks but keep header visible */
+  table.allow-break {
+    page-break-inside: auto;
+    break-inside: auto;
+  }
+  
+  table.allow-break thead {
+    display: table-header-group;
+  }
+  
+  table.allow-break tr {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  
+  /* Orphan and widow control for paragraphs */
+  p {
+    orphans: 3;
+    widows: 3;
+  }
+  
+  /* Keep images with their captions */
+  figure {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  
+  /* Keep list items together */
+  li {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+}
+
+/* ============================================
+   TABLE STYLING
+   ============================================ */
+
+/* Tables use auto layout to fit content naturally */
+table {
+  table-layout: auto;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+/* Ensure table cells don't overlap */
+table th,
+table td {
+  padding: 0.75em 1em;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  text-align: left;
+  vertical-align: top;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+table th {
+  font-weight: 600;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Print table sizing */
+@media print {
+  table {
+    font-size: 10pt;
+  }
+  
+  table th, table td {
+    padding: 4pt 8pt;
+  }
+}

package/static/themes/legal.css

@@ -0,0 +1,134 @@
+/* Legal Theme - Professional government proposal and legal document styling */
+/* Inspired by NSF GOALI proposal formatting and federal document standards */
+
+body {
+  font-family: "Times New Roman", Times, Georgia, serif;
+  font-size: 12pt;
+  line-height: 1.5;
+}
+
+.content-container {
+  max-width: 8.5in;
+  padding: 1in;
+}
+
+/* Formal heading styles */
+.prose h1, h1 {
+  font-size: 18pt !important;
+  font-weight: bold !important;
+  text-align: center !important;
+  margin-bottom: 24pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose h2, h2 {
+  font-size: 14pt !important;
+  font-weight: bold !important;
+  margin-top: 18pt !important;
+  margin-bottom: 12pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose h3, h3 {
+  font-size: 12pt !important;
+  font-weight: bold !important;
+  margin-top: 12pt !important;
+  margin-bottom: 6pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose h4, h4, .prose h5, h5, .prose h6, h6 {
+  font-size: 12pt !important;
+  font-weight: bold !important;
+  font-style: italic !important;
+  margin-top: 12pt !important;
+  margin-bottom: 6pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose p, p {
+  font-size: 12pt !important;
+  text-align: justify !important;
+  margin-bottom: 12pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose li {
+  font-size: 12pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+/* Table styling for government documents */
+.prose table {
+  font-size: 10pt !important;
+  border-collapse: collapse !important;
+}
+
+.prose table th {
+  background-color: #f0f0f0 !important;
+  font-weight: bold !important;
+  border: 1px solid #333 !important;
+}
+
+.prose table td {
+  border: 1px solid #333 !important;
+}
+
+/* Sidebar adjustments for formal documents */
+.chapter-navigation {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Visual element spacing for legal documents - tighter than default */
+:root {
+  --visual-spacing-top: 12pt;
+  --visual-spacing-bottom: 12pt;
+  --visual-spacing-print-top: 10pt;
+  --visual-spacing-print-bottom: 10pt;
+}
+
+/* Figure and image styling for legal documents */
+figure {
+  margin-top: 12pt;
+  margin-bottom: 12pt;
+}
+
+figcaption {
+  font-size: 10pt !important;
+  font-style: italic;
+  text-align: center;
+  margin-top: 6pt;
+}
+
+/* SVG and diagram styling */
+.svg-container,
+.mermaid {
+  margin-top: 12pt;
+  margin-bottom: 12pt;
+}
+
+/* Images in legal documents */
+img {
+  margin-top: 12pt;
+  margin-bottom: 12pt;
+}
+
+figure img {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Print-optimized styling */
+@media print {
+  body {
+    font-size: 12pt !important;
+  }
+  
+  .chapter-navigation, .mobile-chapter-nav {
+    display: none !important;
+  }
+  
+  .chapter-content {
+    padding-left: 0 !important;
+  }
+}

package/static/view.hbs

@@ -317,6 +317,8 @@
           if (code) {
             const mermaidDiv = document.createElement('div');
             mermaidDiv.className = 'mermaid';
+            mermaidDiv.setAttribute('aria-hidden', 'true');
+            mermaidDiv.setAttribute('role', 'presentation');
             mermaidDiv.textContent = code.textContent;
             pre.parentNode.replaceChild(mermaidDiv, pre);
           }