[{"data":1,"prerenderedAt":78},["Reactive",2],{"blog-post-markdown-image-captions-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":52,"related":53},"markdown-image-captions-complete-guide","Markdown Image Captions: Complete Guide for Professional Visual Documentation","Master image captions in Markdown for professional documentation. Learn platform-specific implementations, HTML alternatives, and responsive design techniques for enhanced visual content accessibility.","Image captions in Markdown elevate visual content from simple illustrations to professional, accessible documentation that enhances reader comprehension and meets modern web accessibility…","2025-09-07","Tutorial","Matthew Rathbone","markdown image captions, image descriptions markdown, figure captions markdown, markdown image alt text, responsive image captions, markdown visual documentation, accessible image captions",17,"\u003Cp>Image captions in Markdown elevate visual content from simple illustrations to professional, accessible documentation that enhances reader comprehension and meets modern web accessibility standards. While basic Markdown image syntax provides functional image display, proper caption implementation transforms visual elements into informative, search-optimized content that improves both user experience and content discoverability.\u003C/p>\n\u003Ch2 id=\"why-use-image-captions\">Why Use Image Captions?\u003C/h2>\n\u003Cp>Image captions provide essential benefits for professional documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Accessibility Compliance\u003C/strong>: Screen readers and assistive technologies rely on captions for visual content understanding\u003C/li>\n\u003Cli>\u003Cstrong>SEO Enhancement\u003C/strong>: Search engines index caption text to improve content discoverability\u003C/li>\n\u003Cli>\u003Cstrong>Professional Presentation\u003C/strong>: Captions create polished, publication-ready visual documentation\u003C/li>\n\u003Cli>\u003Cstrong>Content Context\u003C/strong>: Descriptive captions help readers understand visual information relevance\u003C/li>\n\u003Cli>\u003Cstrong>Legal Requirements\u003C/strong>: Many jurisdictions require accessible visual content for public-facing websites\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"basic-markdown-image-syntax-review\">Basic Markdown Image Syntax Review\u003C/h2>\n\u003Ch3 id=\"standard-image-implementation\">Standard Image Implementation\u003C/h3>\n\u003Cp>Understanding basic image syntax provides the foundation for caption enhancement:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">![\u003Cspan class=\"hljs-string\">Alt text\u003C/span>](\u003Cspan class=\"hljs-link\">image-path.jpg\u003C/span>)\n![\u003Cspan class=\"hljs-string\">Descriptive alt text\u003C/span>](\u003Cspan class=\"hljs-link\">https://example.com/image.jpg "Optional title"\u003C/span>)\n![\u003Cspan class=\"hljs-string\">Local image\u003C/span>](\u003Cspan class=\"hljs-link\">../assets/images/diagram.png\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"image-reference-links\">Image Reference Links\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">![\u003Cspan class=\"hljs-string\">Architecture diagram\u003C/span>][\u003Cspan class=\"hljs-symbol\">diagram-ref\u003C/span>]\n![\u003Cspan class=\"hljs-string\">Performance chart\u003C/span>][\u003Cspan class=\"hljs-symbol\">performance-chart\u003C/span>]\n\n[\u003Cspan class=\"hljs-symbol\">diagram-ref\u003C/span>]: \u003Cspan class=\"hljs-link\">/assets/images/system-architecture.svg "System Architecture Overview"\u003C/span>\n[\u003Cspan class=\"hljs-symbol\">performance-chart\u003C/span>]: \u003Cspan class=\"hljs-link\">/assets/charts/performance-metrics.png "Performance Metrics Dashboard"\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"html-based-caption-implementation\">HTML-Based Caption Implementation\u003C/h2>\n\u003Ch3 id=\"figure-and-figcaption-elements\">Figure and Figcaption Elements\u003C/h3>\n\u003Cp>The most semantic and accessible approach uses HTML figure elements:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Basic figure with caption -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/database-schema.png"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Database schema showing user, order, and product tables with relationships"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">width\u003C/span>=\u003Cspan class=\"hljs-string\">"800"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">"600"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Figure 1:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Database schema diagram showing the relationship between user accounts, order processing, and product catalog tables. Primary keys are highlighted in bold, foreign key relationships shown with connecting lines.\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Advanced figure with multiple images -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-grid"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/before-optimization.png"\u003C/span> \n         \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Website loading performance before optimization showing 3.2 second load time"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/after-optimization.png"\u003C/span> \n         \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Website loading performance after optimization showing 0.8 second load time"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Figure 2:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Performance comparison showing website loading times before (left) and after (right) implementation of caching, image optimization, and code minification. Average load time improved from 3.2 seconds to 0.8 seconds.\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Scientific figure with detailed caption -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/protein-structure.jpg"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"3D molecular structure of insulin protein showing alpha helices and beta sheets"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Figure 3:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Three-dimensional structure of human insulin protein (PDB ID: 3I40). \n    Alpha helices are shown in red, beta sheets in yellow, and loop regions in green. \n    The A-chain (21 amino acids) and B-chain (30 amino acids) are connected by disulfide bonds \n    between cysteine residues. This structure is critical for insulin's biological function \n    in glucose metabolism regulation.\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-figure-implementation\">Responsive Figure Implementation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Responsive figure with multiple breakpoints -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"responsive-figure"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">picture\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">source\u003C/span> \u003Cspan class=\"hljs-attr\">media\u003C/span>=\u003Cspan class=\"hljs-string\">"(min-width: 1024px)"\u003C/span> \n            \u003Cspan class=\"hljs-attr\">srcset\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/chart-desktop.png 1x, \n                    /assets/images/chart-desktop@2x.png 2x"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">source\u003C/span> \u003Cspan class=\"hljs-attr\">media\u003C/span>=\u003Cspan class=\"hljs-string\">"(min-width: 768px)"\u003C/span> \n            \u003Cspan class=\"hljs-attr\">srcset\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/chart-tablet.png 1x, \n                    /assets/images/chart-tablet@2x.png 2x"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/chart-mobile.png"\u003C/span> \n         \u003Cspan class=\"hljs-attr\">srcset\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/chart-mobile@2x.png 2x"\u003C/span>\n         \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Revenue growth chart showing 40% increase from Q1 to Q4 2024"\u003C/span>\n         \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">picture\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Revenue Growth Analysis:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Quarterly revenue progression throughout 2024, \n    displaying steady growth trajectory with notable acceleration in Q3 following \n    product launch. Data represents gross revenue in millions USD.\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-caption-solutions\">Platform-Specific Caption Solutions\u003C/h2>\n\u003Ch3 id=\"github-flavored-markdown\">GitHub Flavored Markdown\u003C/h3>\n\u003Cp>GitHub supports HTML figures with some limitations:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## System Architecture Overview\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"docs/images/system-diagram.svg"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Microservices architecture with API gateway, authentication service, and data layer"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <em>Figure 1: Microservices architecture showing API gateway routing requests to authentication, user management, and data processing services. Each service maintains independent databases for scalability.</em>\n  </figcaption>\n</figure>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">## API Response Examples\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"docs/images/api-response-format.png"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"JSON API response structure showing nested data objects and metadata"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    Standard API response format including data payload, pagination metadata, and error handling fields. All responses follow RESTful conventions with appropriate HTTP status codes.\n  </figcaption>\n</figure>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"gitlab-markdown-enhancement\">GitLab Markdown Enhancement\u003C/h3>\n\u003Cp>GitLab provides additional figure styling support:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">### Deployment Pipeline Visualization\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"gitlab-figure"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"assets/pipeline-diagram.png"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"CI/CD pipeline showing build, test, security scan, and deployment stages"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <strong>Deployment Pipeline:</strong> Automated CI/CD workflow triggering on code commits. \n    Pipeline includes unit testing, integration testing, security vulnerability scanning, \n    and automated deployment to staging and production environments.\n  </figcaption>\n</figure>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">### Performance Metrics Dashboard\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"assets/metrics-dashboard.png"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Application performance dashboard showing CPU, memory, and response time metrics"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    Real-time application performance monitoring dashboard displaying key performance indicators: \n    CPU utilization (avg 15%), memory usage (2.1GB), and average response time (120ms). \n    Data collected over 24-hour period with 5-minute sampling intervals.\n  </figcaption>\n</figure>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"jekyll-enhancement-with-liquid\">Jekyll Enhancement with Liquid\u003C/h3>\n\u003Cp>Jekyll provides powerful caption automation through Liquid templating:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- Custom Jekyll include for figures -->\n<!-- _includes/figure.html -->\n<figure class="post-figure{% if include.class %} {{ include.class }}{% endif %}">\n  {% if include.image_path %}\n    <img src="{{ include.image_path | relative_url }}" \n         alt="{{ include.alt | default: include.caption }}"\n         {% if include.width %}width="{{ include.width }}"{% endif %}\n         {% if include.height %}height="{{ include.height }}"{% endif %}\n         loading="lazy">\n  {% endif %}\n  \n  {% if include.caption %}\n    <figcaption>\n      {% if include.figure_number %}\n        <strong>Figure {{ include.figure_number }}:</strong> \n      {% endif %}\n      {{ include.caption | markdownify }}\n    </figcaption>\n  {% endif %}\n</figure>\n\n<!-- Usage in posts -->\n{% include figure.html \n   image_path="/assets/images/user-interface-mockup.png"\n   alt="Mobile application user interface showing navigation, content area, and action buttons"\n   caption="Mobile application user interface design featuring bottom navigation, scrollable content area, and floating action button. Design follows Material Design principles with consistent spacing and typography."\n   figure_number="1"\n   class="centered-figure" %}\n\n{% include figure.html \n   image_path="/assets/images/data-flow-diagram.svg"\n   alt="Data flow diagram showing information movement between system components"\n   caption="**Data Flow Architecture:** Information flow between frontend application, API gateway, microservices, and database layers. Arrows indicate data direction and processing stages."\n   figure_number="2" %}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcode-implementation\">Hugo Shortcode Implementation\u003C/h3>\n\u003Cp>Hugo provides flexible figure shortcodes:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Built-in Hugo figure shortcode -->\n{{< figure src="/images/network-topology.png" \n\u003Cspan class=\"hljs-code\">           title="Network Topology Diagram" \n           caption="Corporate network infrastructure showing routers, switches, and security zones. DMZ contains public-facing services while internal network segments are protected by firewalls."\n           alt="Network diagram with routers, switches, firewalls, and server segments"\n           width="800" \n           height="600" >}}\n\u003C/span>\n<!-- Custom Hugo shortcode with enhanced features -->\n{{< enhanced-figure \n\u003Cspan class=\"hljs-code\">    src="/images/performance-comparison.png"\n    alt="Before and after performance metrics showing response time improvements"\n    caption="Performance optimization results demonstrating 60% reduction in average response time and 40% improvement in throughput after implementing caching strategies."\n    figure-number="3"\n    class="wide-figure"\n    lazy="true" >}}\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"obsidian-caption-plugin\">Obsidian Caption Plugin\u003C/h3>\n\u003Cp>Obsidian supports captions through plugins and custom CSS:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Obsidian image with caption using plugin -->\n![[system-architecture.png]]\n\u003Cspan class=\"hljs-emphasis\">*Figure 1: System architecture overview showing microservices communication patterns*\u003C/span>\n\n<!-- Alternative Obsidian caption approach -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-with-caption"\u003C/span>>\u003C/span>\u003C/span>\n  ![[database-schema.png]]\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"caption"\u003C/span>>\u003C/span>\u003C/span>Database schema design for e-commerce platform with normalized tables for users, products, orders, and inventory tracking.\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"css-styling-for-professional-captions\">CSS Styling for Professional Captions\u003C/h2>\n\u003Ch3 id=\"basic-figure-styling\">Basic Figure Styling\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Professional figure and caption styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> \u003Cspan class=\"hljs-selector-tag\">strong\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#212529\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> \u003Cspan class=\"hljs-selector-tag\">em\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-caption-themes\">Advanced Caption Themes\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Scientific publication theme */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.scientific-figure\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#2c3e50\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.scientific-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ecf0f1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#bdc3c7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Times New Roman'\u003C/span>, serif;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#2c3e50\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.scientific-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> \u003Cspan class=\"hljs-selector-tag\">strong\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e74c3c\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Technical documentation theme */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.tech-figure\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">122\u003C/span>, \u003Cspan class=\"hljs-number\">204\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">145deg\u003C/span>, \u003Cspan class=\"hljs-number\">#ffffff\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#f8fbff\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tech-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tech-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">145deg\u003C/span>, \u003Cspan class=\"hljs-number\">#f1f8ff\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#e3f2fd\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1565c0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Arial, sans-serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Marketing/presentation theme */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.presentation-figure\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">24px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.12\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.presentation-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.presentation-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.presentation-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> \u003Cspan class=\"hljs-selector-tag\">strong\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.1em\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-caption-design\">Responsive Caption Design\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Responsive figure layouts */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-figure\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1200px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> auto;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile-first responsive approach */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.presentation-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.scientific-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Large screen enhancements */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">1200px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.wide-figure\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">120%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: -\u003Cspan class=\"hljs-number\">10%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: -\u003Cspan class=\"hljs-number\">10%\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.wide-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">3rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dark-mode-support\">Dark Mode Support\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Dark mode caption styling */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-color-scheme\u003C/span>: dark) {\n  \u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#1a1a1a\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#404040\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.3\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-bottom-color\u003C/span>: \u003Cspan class=\"hljs-number\">#404040\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#2d2d2d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> \u003Cspan class=\"hljs-selector-tag\">strong\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> \u003Cspan class=\"hljs-selector-tag\">em\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#b0b0b0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.scientific-figure\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#4a90e2\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#1a1a1a\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.scientific-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#2a2a2a\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-top-color\u003C/span>: \u003Cspan class=\"hljs-number\">#404040\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.tech-figure\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#66b3ff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">145deg\u003C/span>, \u003Cspan class=\"hljs-number\">#1a1a1a\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#1e1e2e\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.tech-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">145deg\u003C/span>, \u003Cspan class=\"hljs-number\">#2a2a3a\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#1e2a3a\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-top-color\u003C/span>: \u003Cspan class=\"hljs-number\">#66b3ff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#99ccff\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"javascript-enhancement-for-interactive-captions\">JavaScript Enhancement for Interactive Captions\u003C/h2>\n\u003Ch3 id=\"dynamic-caption-loading\">Dynamic Caption Loading\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Dynamic caption system with lazy loading\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">EnhancedFigures\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">figures\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'figure'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedCaptions\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleIntersection\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>),\n            { \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.1\u003C/span> }\n        );\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">figures\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">figure, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Add figure numbering if missing\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFigureNumber\u003C/span>(figure, index + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Set up lazy loading\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(figure);\n            \n            \u003Cspan class=\"hljs-comment\">// Add zoom functionality\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addZoomCapability\u003C/span>(figure);\n            \n            \u003Cspan class=\"hljs-comment\">// Add copy caption functionality\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addCopyCapability\u003C/span>(figure);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addFigureNumber\u003C/span>(\u003Cspan class=\"hljs-params\">figure, number\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = figure.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'figcaption'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caption && !caption.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.figure-number'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> numberSpan = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n            numberSpan.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'figure-number'\u003C/span>;\n            numberSpan.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Figure \u003Cspan class=\"hljs-subst\">${number}\u003C/span>: `\u003C/span>;\n            numberSpan.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">fontWeight\u003C/span> = \u003Cspan class=\"hljs-string\">'bold'\u003C/span>;\n            numberSpan.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">color\u003C/span> = \u003Cspan class=\"hljs-string\">'#007acc'\u003C/span>;\n            \n            caption.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(numberSpan, caption.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleIntersection\u003C/span>(\u003Cspan class=\"hljs-params\">entries\u003C/span>) {\n        entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span> && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedCaptions\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceCaption\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedCaptions\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceCaption\u003C/span>(\u003Cspan class=\"hljs-params\">figure\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = figure.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'figcaption'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> img = figure.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'img'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caption && img) {\n            \u003Cspan class=\"hljs-comment\">// Add image metadata if available\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addImageMetadata\u003C/span>(figure, img);\n            \n            \u003Cspan class=\"hljs-comment\">// Add accessibility enhancements\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceAccessibility\u003C/span>(figure);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addImageMetadata\u003C/span>(\u003Cspan class=\"hljs-params\">figure, img\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = figure.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'figcaption'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add image dimensions and file info\u003C/span>\n        img.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'load'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> metadata = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            metadata.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'image-metadata'\u003C/span>;\n            metadata.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                margin-top: 0.5rem;\n                font-size: 0.75rem;\n                color: #6c757d;\n                border-top: 1px solid #e9ecef;\n                padding-top: 0.5rem;\n            `\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> dimensions = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.naturalWidth}\u003C/span> × \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.naturalHeight}\u003C/span>px`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> alt = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alt\u003C/span> ? \u003Cspan class=\"hljs-string\">` • Alt: "\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.alt}\u003C/span>"`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            metadata.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                <em>Image info: \u003Cspan class=\"hljs-subst\">${dimensions}\u003C/span>\u003Cspan class=\"hljs-subst\">${alt}\u003C/span></em>\n            `\u003C/span>;\n            \n            caption.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(metadata);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addZoomCapability\u003C/span>(\u003Cspan class=\"hljs-params\">figure\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> img = figure.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'img'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (img) {\n            img.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">'zoom-in'\u003C/span>;\n            img.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createImageModal\u003C/span>(img);\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createImageModal\u003C/span>(\u003Cspan class=\"hljs-params\">img\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create modal overlay\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> modal = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        modal.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'image-modal'\u003C/span>;\n        modal.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.9);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            z-index: 9999;\n            cursor: zoom-out;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create enlarged image\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> enlargedImg = img.\u003Cspan class=\"hljs-title function_\">cloneNode\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>);\n        enlargedImg.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            max-width: 90%;\n            max-height: 90%;\n            object-fit: contain;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n        `\u003C/span>;\n        \n        modal.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(enlargedImg);\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(modal);\n        \n        \u003Cspan class=\"hljs-comment\">// Close modal on click\u003C/span>\n        modal.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(modal);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Close on escape key\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">escapeHandler\u003C/span> = (\u003Cspan class=\"hljs-params\">e\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(modal);\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, escapeHandler);\n            }\n        };\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, escapeHandler);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addCopyCapability\u003C/span>(\u003Cspan class=\"hljs-params\">figure\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = figure.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'figcaption'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caption) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> copyButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n            copyButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'copy-caption-btn'\u003C/span>;\n            copyButton.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'📋'\u003C/span>;\n            copyButton.\u003Cspan class=\"hljs-property\">title\u003C/span> = \u003Cspan class=\"hljs-string\">'Copy caption text'\u003C/span>;\n            copyButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                position: absolute;\n                top: 0.5rem;\n                right: 0.5rem;\n                background: rgba(0, 123, 204, 0.8);\n                color: white;\n                border: none;\n                border-radius: 4px;\n                padding: 0.25rem 0.5rem;\n                cursor: pointer;\n                font-size: 0.8rem;\n                opacity: 0;\n                transition: opacity 0.2s;\n            `\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Position caption relatively\u003C/span>\n            caption.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'relative'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Show button on hover\u003C/span>\n            figure.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mouseenter'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                copyButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'1'\u003C/span>;\n            });\n            \n            figure.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mouseleave'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                copyButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'0'\u003C/span>;\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Copy functionality\u003C/span>\n            copyButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> (e) => {\n                e.\u003Cspan class=\"hljs-title function_\">stopPropagation\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> captionText = caption.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                \n                \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">await\u003C/span> navigator.\u003Cspan class=\"hljs-property\">clipboard\u003C/span>.\u003Cspan class=\"hljs-title function_\">writeText\u003C/span>(captionText);\n                    copyButton.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'✅'\u003C/span>;\n                    copyButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">background\u003C/span> = \u003Cspan class=\"hljs-string\">'rgba(40, 167, 69, 0.8)'\u003C/span>;\n                    \n                    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                        copyButton.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'📋'\u003C/span>;\n                        copyButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">background\u003C/span> = \u003Cspan class=\"hljs-string\">'rgba(0, 123, 204, 0.8)'\u003C/span>;\n                    }, \u003Cspan class=\"hljs-number\">2000\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (err) {\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to copy caption:'\u003C/span>, err);\n                    copyButton.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'❌'\u003C/span>;\n                    copyButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">background\u003C/span> = \u003Cspan class=\"hljs-string\">'rgba(220, 53, 69, 0.8)'\u003C/span>;\n                    \n                    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                        copyButton.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'📋'\u003C/span>;\n                        copyButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">background\u003C/span> = \u003Cspan class=\"hljs-string\">'rgba(0, 123, 204, 0.8)'\u003C/span>;\n                    }, \u003Cspan class=\"hljs-number\">2000\u003C/span>);\n                }\n            });\n            \n            caption.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(copyButton);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">figure\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> img = figure.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'img'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = figure.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'figcaption'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (img && caption) {\n            \u003Cspan class=\"hljs-comment\">// Create unique IDs for ARIA labeling\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> figId = \u003Cspan class=\"hljs-string\">'fig-'\u003C/span> + \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">random\u003C/span>().\u003Cspan class=\"hljs-title function_\">toString\u003C/span>(\u003Cspan class=\"hljs-number\">36\u003C/span>).\u003Cspan class=\"hljs-title function_\">substr\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> captionId = \u003Cspan class=\"hljs-string\">'caption-'\u003C/span> + figId;\n            \n            figure.\u003Cspan class=\"hljs-property\">id\u003C/span> = figId;\n            caption.\u003Cspan class=\"hljs-property\">id\u003C/span> = captionId;\n            \n            \u003Cspan class=\"hljs-comment\">// Link image to caption\u003C/span>\n            img.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-describedby'\u003C/span>, captionId);\n            \n            \u003Cspan class=\"hljs-comment\">// Add role attributes\u003C/span>\n            figure.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'img'\u003C/span>);\n            caption.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'text'\u003C/span>);\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize enhanced figures\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">EnhancedFigures\u003C/span>();\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"caption-animation-system\">Caption Animation System\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Animated caption reveal system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AnimatedCaptions\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">animateCaption\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>),\n            { \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.5\u003C/span>, \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">'50px'\u003C/span> }\n        );\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initAnimations\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initAnimations\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'figure'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">figure\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = figure.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'figcaption'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caption) {\n                \u003Cspan class=\"hljs-comment\">// Set initial animation state\u003C/span>\n                caption.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> += \u003Cspan class=\"hljs-string\">`\n                    transform: translateY(20px);\n                    opacity: 0;\n                    transition: all 0.6s ease-out;\n                `\u003C/span>;\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(figure);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">animateCaption\u003C/span>(\u003Cspan class=\"hljs-params\">entries\u003C/span>) {\n        entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'figcaption'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caption) {\n                    \u003Cspan class=\"hljs-comment\">// Animate caption reveal\u003C/span>\n                    caption.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">'translateY(0)'\u003C/span>;\n                    caption.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'1'\u003C/span>;\n                    \n                    \u003Cspan class=\"hljs-comment\">// Add typewriter effect for figure number\u003C/span>\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addTypewriterEffect\u003C/span>(caption);\n                }\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addTypewriterEffect\u003C/span>(\u003Cspan class=\"hljs-params\">caption\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> figureNumber = caption.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.figure-number'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (figureNumber) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalText = figureNumber.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n            figureNumber.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            figureNumber.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">borderRight\u003C/span> = \u003Cspan class=\"hljs-string\">'2px solid #007acc'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> index = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> typeInterval = \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                figureNumber.\u003Cspan class=\"hljs-property\">textContent\u003C/span> += originalText[index];\n                index++;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index >= originalText.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                    \u003Cspan class=\"hljs-built_in\">clearInterval\u003C/span>(typeInterval);\n                    \u003Cspan class=\"hljs-comment\">// Remove cursor after delay\u003C/span>\n                    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                        figureNumber.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">borderRight\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                    }, \u003Cspan class=\"hljs-number\">1000\u003C/span>);\n                }\n            }, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize animated captions\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">AnimatedCaptions\u003C/span>();\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-best-practices\">Accessibility Best Practices\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Comprehensive accessibility implementation -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"img"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"caption-1"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"figure-1"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/workflow-diagram.png"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Business process workflow showing approval stages from request to completion"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"caption-1"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"caption-1"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"figure-label"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span>>\u003C/span>Figure 1:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span>>\u003C/span>Business process workflow diagram illustrating the complete approval cycle for project requests. The process begins with initial submission, proceeds through manager review, budget approval, and resource allocation before final implementation. Average completion time is 5-7 business days depending on project complexity and resource availability.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Complex figure with detailed accessibility -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"img"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"caption-2"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"complex-figure"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/data-visualization.svg"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Multi-chart dashboard displaying quarterly sales, customer acquisition, and revenue metrics"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"caption-2 data-description"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"caption-2"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Figure 2: Q3 2024 Business Performance Dashboard\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Comprehensive business metrics visualization showing three key performance areas across quarterly periods.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-comment\"><!-- Detailed data description for screen readers -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"data-description"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>Detailed Chart Data:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>Sales Performance: Q1: $1.2M, Q2: $1.5M, Q3: $1.8M (50% growth)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>Customer Acquisition: Q1: 150 new customers, Q2: 220, Q3: 280 (87% growth)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>Revenue Metrics: Recurring revenue increased 35%, one-time sales up 42%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"color-contrast-and-visual-accessibility\">Color Contrast and Visual Accessibility\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.scientific-figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.figure-number\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion preferences */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n  \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.copy-caption-btn\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus indicators for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">figure\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>-within {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.copy-caption-btn\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-implementation-examples\">Advanced Implementation Examples\u003C/h2>\n\u003Ch3 id=\"scientific-publication-figures\">Scientific Publication Figures\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Peer-review ready scientific figure -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"scientific-figure"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/protein-analysis-results.png"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Protein expression analysis showing gel electrophoresis bands at different molecular weights"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">width\u003C/span>=\u003Cspan class=\"hljs-string\">"600"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">"400"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Figure 3. Protein Expression Analysis in E. coli BL21(DE3) Cells.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    SDS-PAGE analysis of recombinant protein expression following IPTG induction. \n    Lane 1: Molecular weight marker (kDa indicated on left); Lane 2: Uninduced control; \n    Lane 3: 4-hour post-induction; Lane 4: 8-hour post-induction. Target protein \n    (45 kDa, indicated by arrow) shows maximum expression at 8 hours with minimal \n    degradation products. Expression optimization achieved 15 mg/L yield in minimal media \n    supplemented with glucose (0.2% w/v).\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Research methodology figure -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"scientific-figure"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/experimental-setup.jpg"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Laboratory experimental setup showing spectrophotometer, sample holder, and measurement apparatus"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Figure 4. Experimental Setup for Spectroscopic Analysis.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    Custom-built spectrophotometer configuration for measuring optical absorption \n    in the 400-800 nm range. Components include: (A) tungsten-halogen light source \n    with stabilized power supply, (B) sample compartment with temperature control \n    (±0.1°C), (C) monochromator with 1 nm resolution, (D) photodiode detector \n    with amplification circuit, (E) computer interface for data acquisition. \n    Measurements performed in 1 cm pathlength quartz cuvettes with baseline \n    correction using appropriate solvent blanks.\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"technical-documentation-figures\">Technical Documentation Figures\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Software architecture diagram -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-figure"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/microservices-architecture.svg"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Microservices architecture diagram showing service interactions, databases, and API gateways"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>System Architecture: Microservices Implementation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Production architecture demonstrating service-oriented design with independent scalability. \n    Key components include:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>API Gateway:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Request routing, authentication, and rate limiting\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>User Service:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Account management and profile data (PostgreSQL)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Order Service:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Transaction processing and fulfillment (MySQL)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Inventory Service:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Stock management and availability (Redis cache)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Notification Service:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Email, SMS, and push notifications (MongoDB)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Inter-service communication via REST APIs with Circuit Breaker pattern for fault tolerance. \n    Container orchestration managed through Kubernetes with automated scaling based on CPU/memory metrics.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- API documentation figure -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-figure"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/api-endpoint-flow.png"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"API request/response flow diagram showing authentication, validation, processing, and response stages"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">width\u003C/span>=\u003Cspan class=\"hljs-string\">"800"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">"500"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>API Request Processing Flow\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Complete request lifecycle for RESTful API endpoints showing security and validation layers:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Authentication:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> JWT token validation and user authorization\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Input Validation:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Schema validation using JSON Schema v7\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Business Logic:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Core application processing and data manipulation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Data Persistence:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Database operations with transaction management\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Response Formatting:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Consistent JSON response structure with metadata\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Error handling implemented at each stage with appropriate HTTP status codes and descriptive error messages. \n    Average response time: 120ms (95th percentile), with automatic retry logic for transient failures.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"marketing-and-presentation-figures\">Marketing and Presentation Figures\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Marketing performance dashboard -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"presentation-figure"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/marketing-performance-dashboard.png"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Marketing performance dashboard showing campaign metrics, conversion rates, and ROI data"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Q3 2024 Marketing Performance Overview\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Comprehensive marketing analytics demonstrating campaign effectiveness and customer acquisition success. \n    Key achievements include 40% increase in qualified leads, 25% improvement in conversion rates, \n    and 3.2x return on advertising spend (ROAS) across all digital channels.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Product feature comparison -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"presentation-figure"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/feature-comparison-matrix.png"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Product feature comparison matrix showing capabilities across different pricing tiers"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">width\u003C/span>=\u003Cspan class=\"hljs-string\">"900"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">"600"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Product Tier Comparison Matrix\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Feature availability across subscription tiers designed to accommodate different user needs and budget requirements. \n    Essential features included in all tiers ensure core functionality access, while advanced features provide \n    scalability for growing businesses and enterprise clients.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"seo-optimization-for-image-captions\">SEO Optimization for Image Captions\u003C/h2>\n\u003Ch3 id=\"structured-data-implementation\">Structured Data Implementation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Rich snippet markup for images -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">itemscope\u003C/span> \u003Cspan class=\"hljs-attr\">itemtype\u003C/span>=\u003Cspan class=\"hljs-string\">"https://schema.org/ImageObject"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/product-demonstration.jpg"\u003C/span>\n         \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Product demonstration showing key features and user interface elements"\u003C/span>\n         \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"contentUrl"\u003C/span>\n         \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"caption"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Product Demonstration:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Interactive walkthrough highlighting core functionality \n        including dashboard navigation, data visualization tools, and reporting capabilities. \n        User interface designed for intuitive operation with minimal training requirements.\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"description"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"Product demonstration screenshot showing main dashboard interface with navigation menu, data charts, and export functionality"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"author"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"Product Development Team"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"dateCreated"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"2024-09-01"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Article with embedded images -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">article\u003C/span> \u003Cspan class=\"hljs-attr\">itemscope\u003C/span> \u003Cspan class=\"hljs-attr\">itemtype\u003C/span>=\u003Cspan class=\"hljs-string\">"https://schema.org/Article"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"headline"\u003C/span>>\u003C/span>Advanced Data Processing Techniques\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"image"\u003C/span> \u003Cspan class=\"hljs-attr\">itemscope\u003C/span> \u003Cspan class=\"hljs-attr\">itemtype\u003C/span>=\u003Cspan class=\"hljs-string\">"https://schema.org/ImageObject"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/data-processing-pipeline.svg"\u003C/span>\n           \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Data processing pipeline architecture with ingestion, transformation, and output stages"\u003C/span>\n           \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"url"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"caption"\u003C/span>>\u003C/span>\n        Data processing pipeline architecture demonstrating ETL workflow for handling \n        high-volume data streams with real-time processing capabilities and automated error handling.\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"width"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"800"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"height"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"600"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">article\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"caption-content-strategy\">Caption Content Strategy\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- SEO-optimized caption content -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"seo-optimized"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/assets/images/responsive-web-design-example.png"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Responsive web design example showing mobile, tablet, and desktop layouts"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Responsive Web Design Implementation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Modern responsive web design demonstrating mobile-first development approach with fluid grid systems, \n    flexible images, and CSS media queries. Design adapts seamlessly across devices:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Mobile (320px-768px):\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Single-column layout, touch-optimized navigation, compressed content hierarchy\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Tablet (768px-1024px):\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Two-column grid, expanded navigation menu, optimized image sizing\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Desktop (1024px+):\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Multi-column layout, full navigation display, enhanced interactive elements\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Implementation achieves 95+ Google PageSpeed scores across all device categories with Core Web Vitals compliance. \n    Progressive enhancement ensures functionality across legacy browsers while leveraging modern CSS features for enhanced user experience.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-workflows\">Integration with Documentation Workflows\u003C/h2>\n\u003Cp>Image captions work seamlessly with other advanced Markdown features to create comprehensive visual documentation. When creating technical guides that combine detailed explanations with visual examples, image captions integrate effectively with \u003Ca href=\"/blog/markdown-collapsible-sections-guide\">collapsible sections\u003C/a> to organize complex visual content into manageable, expandable sections.\u003C/p>\n\u003Cp>For scientific documentation requiring both detailed visual analysis and structured data presentation, image captions complement \u003Ca href=\"/blog/markdown-table-borders-styling-complete-guide\">tables with advanced styling\u003C/a> to create comprehensive research presentations that combine visual evidence with quantitative data analysis.\u003C/p>\n\u003Cp>When documenting processes that include both visual demonstrations and step-by-step instructions, image captions work alongside \u003Ca href=\"/blog/markdown-task-lists-and-checkboxes-complete-guide\">task lists and checkboxes\u003C/a> to create comprehensive tutorials with clear visual guidance and progress tracking capabilities.\u003C/p>\n\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"caption-display-problems\">Caption Display Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Captions not appearing or rendering incorrectly\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>Verify HTML figure element structure and proper tag closure\u003C/li>\n\u003Cli>Check CSS specificity conflicts that might override caption styles\u003C/li>\n\u003Cli>Test with minimal HTML structure to isolate issues\u003C/li>\n\u003Cli>Validate image paths and ensure images load successfully\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Troubleshooting template -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid red;"\u003C/span>>\u003C/span> \u003Cspan class=\"hljs-comment\"><!-- Debug border -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/path/to/image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Alt text"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 100%;"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: yellow; color: black;"\u003C/span>>\u003C/span> \u003Cspan class=\"hljs-comment\"><!-- Debug styling -->\u003C/span>\n    Caption text here\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"accessibility-validation-issues\">Accessibility Validation Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Screen readers not properly reading captions\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessibility debugging -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"img"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"debug-caption"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/image.jpg"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Descriptive alt text"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"debug-caption"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"debug-caption"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span>>\u003C/span>\n    Caption content with proper ARIA labeling\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-layout-problems\">Responsive Layout Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Captions breaking on mobile devices\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Mobile debugging styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: auto \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">word-wrap\u003C/span>: break-word \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"performance-optimization-issues\">Performance Optimization Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Slow loading with multiple captioned images\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Performance optimization -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/placeholder.jpg"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">data-src\u003C/span>=\u003Cspan class=\"hljs-string\">"/actual-image.jpg"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Image description"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy-load"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n    Caption content\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-comment\">// Lazy loading implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> lazyImages = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.lazy-load'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> imageObserver = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries, observer\u003C/span>) =>\u003C/span> {\n  entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> img = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n      img.\u003Cspan class=\"hljs-property\">src\u003C/span> = img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">src\u003C/span>;\n      img.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'lazy-load'\u003C/span>);\n      observer.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(img);\n    }\n  });\n});\n\nlazyImages.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">img\u003C/span> =>\u003C/span> imageObserver.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(img));\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Markdown image captions transform basic visual content into professional, accessible documentation that enhances reader comprehension and meets modern web standards. By mastering HTML-based figure implementations, CSS styling techniques, and JavaScript enhancements, you can create visual documentation that not only presents information effectively but actively improves the user experience across all devices and accessibility needs.\u003C/p>\n\u003Cp>The key to successful image caption implementation lies in understanding your platform's capabilities, ensuring accessibility compliance, and optimizing for performance across different content types and user scenarios. Whether you're creating technical documentation, scientific publications, or marketing materials, the techniques covered in this guide provide the foundation for professional visual content that serves both information delivery and user accessibility requirements.\u003C/p>\n\u003Cp>Remember to test caption implementations across different platforms and devices, validate accessibility compliance with screen readers and assistive technologies, and optimize performance for varying content loads. With proper implementation, image captions become powerful tools for creating informative, accessible visual documentation that enhances both content quality and user experience.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49],{"id":16,"text":17,"level":18},"why-use-image-captions","Why Use Image Captions?",2,{"id":20,"text":21,"level":18},"basic-markdown-image-syntax-review","Basic Markdown Image Syntax Review",{"id":23,"text":24,"level":18},"html-based-caption-implementation","HTML-Based Caption Implementation",{"id":26,"text":27,"level":18},"platform-specific-caption-solutions","Platform-Specific Caption Solutions",{"id":29,"text":30,"level":18},"css-styling-for-professional-captions","CSS Styling for Professional Captions",{"id":32,"text":33,"level":18},"javascript-enhancement-for-interactive-captions","JavaScript Enhancement for Interactive Captions",{"id":35,"text":36,"level":18},"accessibility-best-practices","Accessibility Best Practices",{"id":38,"text":39,"level":18},"advanced-implementation-examples","Advanced Implementation Examples",{"id":41,"text":42,"level":18},"seo-optimization-for-image-captions","SEO Optimization for Image Captions",{"id":44,"text":45,"level":18},"integration-with-documentation-workflows","Integration with Documentation Workflows",{"id":47,"text":48,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":50,"text":51,"level":18},"conclusion","Conclusion",[],[54,62,70],{"slug":55,"title":56,"description":57,"excerpt":58,"date":59,"category":9,"author":10,"keywords":60,"readingMinutes":61},"markdown-diagrams-flowcharts-complete-guide","Markdown Diagrams and Flowcharts: Complete Guide for Visual Documentation","Master diagrams and flowcharts in Markdown using Mermaid, PlantUML, and other diagram tools. Learn to create visual documentation with flowcharts, sequence diagrams, and architectural diagrams.","Diagrams and flowcharts transform complex technical concepts into clear, visual representations that enhance understanding and communication. While traditional Markdown focuses on text formatting,…","2025-08-29","markdown diagrams, markdown flowcharts, mermaid diagrams, plantuml markdown, markdown charts, visual documentation, markdown graphs, sequence diagrams",9,{"slug":63,"title":64,"description":65,"excerpt":66,"date":67,"category":9,"author":10,"keywords":68,"readingMinutes":69},"markdown-badges-shields-complete-guide","Markdown Badges and Shields: Complete Guide for Professional Documentation","Master badges and shields in Markdown for GitHub, GitLab, and documentation platforms. Learn to create custom status badges, build badges, test coverage shields, and dynamic informational elements.","Badges and shields are essential visual elements in modern technical documentation that communicate project status, build health, test coverage, and other key metrics at a glance. These compact,…","2025-08-28","markdown badges, markdown shields, github badges, build status badges, test coverage badges, shields.io badges, readme badges, documentation badges",7,{"slug":71,"title":72,"description":73,"excerpt":74,"date":75,"category":9,"author":10,"keywords":76,"readingMinutes":77},"markdown-image-alignment-positioning-complete-guide","Markdown Image Alignment and Positioning: Complete Guide for Professional Layouts","Master image alignment, positioning, and layout control in Markdown. Learn how to center, float, resize, and create responsive image galleries with HTML integration.","Images are essential elements in modern documentation and content creation, but standard Markdown provides limited control over image positioning and alignment. Understanding how to effectively…","2025-08-21","markdown image alignment, markdown center images, markdown image positioning, markdown image layout, responsive images markdown, markdown image float",10,1792184941429]