| |
| testing:math [2025/10/20 12:22] – created ayush | testing:math [2025/10/20 13:19] (current) – ayush |
|---|
| - MathJax | ====== Mathematical Notation Rendering Comparison: Visual Quality Assessment ====== |
| |
| - Katex | **Purpose**: Compare four methods for displaying mathematical notation in CORSIPP and POLICE documentation. This page demonstrates the visual differences to help you choose the best standard for both projects. |
| |
| - Unicode | **Current State**: |
| | * CORSIPP: Uses MathJax 2.7 (DokuWiki plugin) |
| | * POLICE: Uses Unicode/HTML subscripts |
| | * **Decision needed**: Choose ONE method for both projects |
| | |
| | <html> |
| | <style> |
| | .comparison-container { |
| | margin: 2em 0; |
| | padding: 1.5em; |
| | border-radius: 8px; |
| | background: #f8f9fa; |
| | } |
| | .method-label { |
| | display: inline-block; |
| | padding: 0.4em 1em; |
| | margin-bottom: 1em; |
| | font-weight: 600; |
| | font-size: 1.1em; |
| | border-radius: 4px; |
| | color: white; |
| | } |
| | .method-mathjax2 { background: #2e7d32; } |
| | .method-mathjax4 { background: #1976d2; } |
| | .method-katex { background: #7b1fa2; } |
| | .method-unicode { background: #c62828; } |
| | .content-box { |
| | background: white; |
| | padding: 1.5em; |
| | border-radius: 6px; |
| | border-left: 4px solid #ddd; |
| | font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| | line-height: 1.7; |
| | font-size: 1.05em; |
| | } |
| | .visual-note { |
| | margin-top: 1em; |
| | padding: 0.8em; |
| | background: #fff3cd; |
| | border-left: 4px solid #ffc107; |
| | font-size: 0.95em; |
| | } |
| | .visual-note.good { |
| | background: #d4edda; |
| | border-left-color: #28a745; |
| | font-weight: 500; |
| | } |
| | .visual-note.bad { |
| | background: #f8d7da; |
| | border-left-color: #dc3545; |
| | font-weight: 500; |
| | } |
| | </style> |
| | </html> |
| | |
| | ===== Full-Text Comparison: Same Content, Four Different Rendering Methods ===== |
| | |
| | <html> |
| | <div class="comparison-container"> |
| | <span class="method-label method-mathjax2">OPTION 1: MathJax 2.7 (Current CORSIPP Plugin)</span> |
| | <div class="content-box"> |
| | </html> |
| | |
| | Polarimetric radars provide variables like the specific differential phase ($K_{DP}$) to detect fingerprints of dendritic growth in the dendritic growth layer (DGL) and secondary ice production, both critical for precipitation formation. A key challenge in interpreting radar observations is the lack of in situ validation of particle properties within the radar measurement volume. While high $K_{DP}$ in snow is usually associated with high particle number concentrations, only few studies attributed $K_{DP}$ to certain hydrometeor types and sizes. We found that at W-band, $K_{DP} > 2\,^\circ\,\mathrm{km}^{-1}$ can result from a broad range of particle number concentrations, between $1$ and $100\,\mathrm{L}^{-1}$. Blowing snow and increased ice collisional fragmentation in a turbulent layer enhanced observed $K_{DP}$ values. T-matrix simulations indicated that high $K_{DP}$ values were primarily produced by particles smaller than $0.8\,\mathrm{mm}$ in the DGL and $1.5\,\mathrm{mm}$ near the surface. |
| | |
| | The distinction between aggregation and riming below the DGL is important, because the latter signals the presence of super-cooled liquid water (SLW). Riming favors secondary ice production through the Hallet-Mossop process (rime splintering), which is active between $-3\,^\circ\mathrm{C}$ and $-8\,^\circ\mathrm{C}$. POLICE exploited quasi-vertical profile (QVP) data of reflectivity ($Z_H$), differential reflectivity ($Z_{DR}$), and depolarization ratio ($DR$). Similar to $Z_{DR}$, the variable $DR$ tends to decrease in rimed snow relative to aggregated snow, but the corresponding difference in $DR$ is $2$–$4\,\mathrm{dB}$ larger (e.g., Ryzhkov et al., 2017). Naturally, $DR$ combines the information content of $Z_{DR}$ and cross-correlation coefficient ($\rho_{hv}$) in a single quantity. The MISPs of mean Doppler velocity ($MDV$) are used to identify regions with particles falling faster than $1.5\,\mathrm{m}\,\mathrm{s}^{-1}$ and accordingly associated with riming. |
| | |
| | <html> |
| | </div> |
| | <div class="visual-note good"> |
| | Publication-grade quality. Professional spacing and alignment. Uses Computer Modern font (LaTeX standard). |
| | </div> |
| | </div> |
| | </html> |
| | |
| | ---- |
| | |
| | <html> |
| | <div class="comparison-container"> |
| | <span class="method-label method-mathjax4">OPTION 2: MathJax 4 (Manual Implementation)</span> |
| | |
| | <!-- MathJax 4 Setup --> |
| | <script> |
| | window.MathJax = { |
| | tex: { |
| | inlineMath: [['$', '$']], |
| | displayMath: [['$$', '$$']], |
| | processEscapes: true, |
| | processEnvironments: true |
| | }, |
| | svg: { |
| | fontCache: 'global', |
| | scale: 1.02, |
| | minScale: 0.5 |
| | }, |
| | options: { |
| | skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], |
| | ignoreHtmlClass: 'tex2jax_ignore', |
| | processHtmlClass: 'mathjax4-zone' |
| | } |
| | }; |
| | </script> |
| | <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-beta.7/tex-svg.js"></script> |
| | |
| | <style> |
| | .mathjax4-zone mjx-container[jax="SVG"] { |
| | font-size: 102% !important; |
| | } |
| | .mathjax4-zone mjx-container[jax="SVG"][display="true"] { |
| | margin: 1em 0 !important; |
| | } |
| | </style> |
| | |
| | <div class="content-box mathjax4-zone"> |
| | |
| | Polarimetric radars provide variables like the specific differential phase ($K_{DP}$) to detect fingerprints of dendritic growth in the dendritic growth layer (DGL) and secondary ice production, both critical for precipitation formation. A key challenge in interpreting radar observations is the lack of in situ validation of particle properties within the radar measurement volume. While high $K_{DP}$ in snow is usually associated with high particle number concentrations, only few studies attributed $K_{DP}$ to certain hydrometeor types and sizes. We found that at W-band, $K_{DP} > 2\,^\circ\,\mathrm{km}^{-1}$ can result from a broad range of particle number concentrations, between $1$ and $100\,\mathrm{L}^{-1}$. Blowing snow and increased ice collisional fragmentation in a turbulent layer enhanced observed $K_{DP}$ values. T-matrix simulations indicated that high $K_{DP}$ values were primarily produced by particles smaller than $0.8\,\mathrm{mm}$ in the DGL and $1.5\,\mathrm{mm}$ near the surface. |
| | |
| | The distinction between aggregation and riming below the DGL is important, because the latter signals the presence of super-cooled liquid water (SLW). Riming favors secondary ice production through the Hallet-Mossop process (rime splintering), which is active between $-3\,^\circ\mathrm{C}$ and $-8\,^\circ\mathrm{C}$. POLICE exploited quasi-vertical profile (QVP) data of reflectivity ($Z_H$), differential reflectivity ($Z_{DR}$), and depolarization ratio ($DR$). Similar to $Z_{DR}$, the variable $DR$ tends to decrease in rimed snow relative to aggregated snow, but the corresponding difference in $DR$ is $2$–$4\,\mathrm{dB}$ larger (e.g., Ryzhkov et al., 2017). Naturally, $DR$ combines the information content of $Z_{DR}$ and cross-correlation coefficient ($\rho_{hv}$) in a single quantity. The MISPs of mean Doppler velocity ($MDV$) are used to identify regions with particles falling faster than $1.5\,\mathrm{m}\,\mathrm{s}^{-1}$ and accordingly associated with riming. |
| | |
| | </div> |
| | <div class="visual-note good"> |
| | Publication-grade quality. Modern rendering engine. SVG output (sharper on high-DPI screens). Slightly faster than v2.7. |
| | </div> |
| | </div> |
| | </html> |
| | |
| | ---- |
| | |
| | <html> |
| | <div class="comparison-container"> |
| | <span class="method-label method-katex">OPTION 3: KaTeX (Manual Implementation)</span> |
| | |
| | <!-- KaTeX Setup --> |
| | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.css" |
| | integrity="sha384-//SZkxyB7axjCAopkAL1E1rve+ZSPKapD89Lo/lLhcsXR+zOYl5z6zJZEFXil+q0" |
| | crossorigin="anonymous"> |
| | <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.js" |
| | integrity="sha384-cpAIxua0Xbyc+XrpHQpCtJzGSZ6U2kS/FeyoKjnS+BgAYNV6uVUetVs/LC9+l3rs" |
| | crossorigin="anonymous"></script> |
| | <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/contrib/auto-render.min.js" |
| | integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" |
| | crossorigin="anonymous"></script> |
| | |
| | <style> |
| | .katex-zone .katex { |
| | font-size: 1.02em; |
| | color: inherit; |
| | font-weight: inherit; |
| | } |
| | .katex-zone .katex-display { |
| | margin: 1em 0; |
| | font-size: 1.08em; |
| | } |
| | .katex-zone .katex .text, |
| | .katex-zone .katex .mord.text, |
| | .katex-zone .katex .mathrm { |
| | font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; |
| | } |
| | .katex-zone .katex .base { letter-spacing: -0.01em; } |
| | .katex-zone .katex .mbin, .katex-zone .katex .mrel { font-weight: 400; } |
| | </style> |
| | |
| | <script> |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const zones = document.querySelectorAll('.katex-zone'); |
| | zones.forEach(zone => { |
| | renderMathInElement(zone, { |
| | delimiters: [ |
| | {left: '$$', right: '$$', display: true}, |
| | {left: '$', right: '$', display: false} |
| | ], |
| | throwOnError: false, |
| | strict: false, |
| | trust: false |
| | }); |
| | }); |
| | }); |
| | </script> |
| | |
| | <div class="content-box katex-zone"> |
| | |
| | Polarimetric radars provide variables like the specific differential phase ($K_{DP}$) to detect fingerprints of dendritic growth in the dendritic growth layer (DGL) and secondary ice production, both critical for precipitation formation. A key challenge in interpreting radar observations is the lack of in situ validation of particle properties within the radar measurement volume. While high $K_{DP}$ in snow is usually associated with high particle number concentrations, only few studies attributed $K_{DP}$ to certain hydrometeor types and sizes. We found that at W-band, $K_{DP} > 2\,^\circ\,\mathrm{km}^{-1}$ can result from a broad range of particle number concentrations, between $1$ and $100\,\mathrm{L}^{-1}$. Blowing snow and increased ice collisional fragmentation in a turbulent layer enhanced observed $K_{DP}$ values. T-matrix simulations indicated that high $K_{DP}$ values were primarily produced by particles smaller than $0.8\,\mathrm{mm}$ in the DGL and $1.5\,\mathrm{mm}$ near the surface. |
| | |
| | The distinction between aggregation and riming below the DGL is important, because the latter signals the presence of super-cooled liquid water (SLW). Riming favors secondary ice production through the Hallet-Mossop process (rime splintering), which is active between $-3\,^\circ\mathrm{C}$ and $-8\,^\circ\mathrm{C}$. POLICE exploited quasi-vertical profile (QVP) data of reflectivity ($Z_H$), differential reflectivity ($Z_{DR}$), and depolarization ratio ($DR$). Similar to $Z_{DR}$, the variable $DR$ tends to decrease in rimed snow relative to aggregated snow, but the corresponding difference in $DR$ is $2$–$4\,\mathrm{dB}$ larger (e.g., Ryzhkov et al., 2017). Naturally, $DR$ combines the information content of $Z_{DR}$ and cross-correlation coefficient ($\rho_{hv}$) in a single quantity. The MISPs of mean Doppler velocity ($MDV$) are used to identify regions with particles falling faster than $1.5\,\mathrm{m}\,\mathrm{s}^{-1}$ and accordingly associated with riming. |
| | |
| | </div> |
| | <div class="visual-note good"> |
| | Publication-grade quality. Instant rendering (10-40× faster than MathJax). Uses Cambria Math font. Smaller file size. |
| | </div> |
| | </div> |
| | </html> |
| | |
| | ---- |
| | |
| | <html> |
| | <div class="comparison-container"> |
| | <span class="method-label method-unicode">OPTION 4: Unicode/HTML (Current POLICE Method)</span> |
| | <div class="content-box"> |
| | </html> |
| | |
| | Polarimetric radars provide variables like the specific differential phase (K<sub>DP</sub>) to detect fingerprints of dendritic growth in the dendritic growth layer (DGL) and secondary ice production, both critical for precipitation formation. A key challenge in interpreting radar observations is the lack of in situ validation of particle properties within the radar measurement volume. While high K<sub>DP</sub> in snow is usually associated with high particle number concentrations, only few studies attributed K<sub>DP</sub> to certain hydrometeor types and sizes. We found that at W-band, K<sub>DP</sub> > 2 °km⁻¹ can result from a broad range of particle number concentrations, between 1 and 100 L⁻¹. Blowing snow and increased ice collisional fragmentation in a turbulent layer enhanced observed K<sub>DP</sub> values. T-matrix simulations indicated that high K<sub>DP</sub> values were primarily produced by particles smaller than 0.8 mm in the DGL and 1.5 mm near the surface. |
| | |
| | The distinction between aggregation and riming below the DGL is important, because the latter signals the presence of super-cooled liquid water (SLW). Riming favors secondary ice production through the Hallet-Mossop process (rime splintering), which is active between -3°C and -8°C. POLICE exploited quasi-vertical profile (QVP) data of reflectivity (Z<sub>H</sub>), differential reflectivity (Z<sub>DR</sub>), and depolarization ratio (DR). Similar to Z<sub>DR</sub>, the variable DR tends to decrease in rimed snow relative to aggregated snow, but the corresponding difference in DR is 2-4 dB larger (e.g., Ryzhkov et al., 2017). Naturally, DR combines the information content of Z<sub>DR</sub> and cross-correlation coefficient (ρ<sub>hv</sub>) in a single quantity. The MISPs of mean Doppler velocity (MDV) are used to identify regions with particles falling faster than 1.5 m/s and accordingly associated with riming. |
| | |
| | <html> |
| | </div> |
| | <div class="visual-note bad"> |
| | Subscripts drop too low, disrupting line spacing. Greek letters use wrong font. No mathematical spacing rules. Unprofessional appearance for scientific documentation. |
| | </div> |
| | </div> |
| | </html> |
| | |
| | ---- |
| | |
| | ===== Close-Up Visual Comparison: Critical Notation Patterns ===== |
| | |
| | <html> |
| | <style> |
| | .example-grid { |
| | display: grid; |
| | grid-template-columns: repeat(4, 1fr); |
| | gap: 1em; |
| | margin: 2em 0; |
| | } |
| | .example-box { |
| | padding: 1.2em; |
| | background: white; |
| | border-radius: 8px; |
| | border: 2px solid #ddd; |
| | text-align: center; |
| | } |
| | .example-box h4 { |
| | margin: 0 0 0.8em 0; |
| | padding: 0.4em; |
| | font-size: 0.85em; |
| | border-radius: 4px; |
| | color: white; |
| | } |
| | .example-mathjax2 h4 { background: #2e7d32; } |
| | .example-mathjax4 h4 { background: #1976d2; } |
| | .example-katex h4 { background: #7b1fa2; } |
| | .example-unicode h4 { background: #c62828; } |
| | .example-content { |
| | font-size: 2em; |
| | padding: 0.8em; |
| | min-height: 70px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | border: 1px dashed #e0e0e0; |
| | border-radius: 4px; |
| | font-family: "Inter", -apple-system, sans-serif; |
| | } |
| | .example-caption { |
| | margin-top: 0.6em; |
| | font-size: 0.8em; |
| | color: #666; |
| | line-height: 1.3; |
| | min-height: 2.6em; |
| | } |
| | .example-caption.good { color: #2e7d32; font-weight: 600; } |
| | .example-caption.bad { color: #c62828; font-weight: 600; } |
| | </style> |
| | |
| | <h3 style="margin: 2em 0 1em 0;">Example 1: Most Common Variable (K<sub>DP</sub>)</h3> |
| | <div class="example-grid"> |
| | <div class="example-box example-mathjax2"> |
| | <h4>MathJax 2.7</h4> |
| | <div class="example-content"> |
| | </html> |
| | |
| | $K_{DP}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Perfect</div> |
| | </div> |
| | <div class="example-box example-mathjax4"> |
| | <h4>MathJax 4</h4> |
| | <div class="example-content mathjax4-zone"> |
| | </html> |
| | |
| | $K_{DP}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Perfect</div> |
| | </div> |
| | <div class="example-box example-katex"> |
| | <h4>KaTeX</h4> |
| | <div class="example-content katex-zone"> |
| | </html> |
| | |
| | $K_{DP}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Perfect</div> |
| | </div> |
| | <div class="example-box example-unicode"> |
| | <h4>Unicode/HTML</h4> |
| | <div class="example-content"> |
| | </html> |
| | |
| | K<sub>DP</sub> |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption bad">Subscript too low</div> |
| | </div> |
| | </div> |
| | |
| | <h3 style="margin: 2em 0 1em 0;">Example 2: Inequality with Complex Units</h3> |
| | <div class="example-grid"> |
| | <div class="example-box example-mathjax2"> |
| | <h4>MathJax 2.7</h4> |
| | <div class="example-content" style="font-size: 1.6em;"> |
| | </html> |
| | |
| | $K_{DP} > 2\,^\circ\,\mathrm{km}^{-1}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Proper spacing, clean</div> |
| | </div> |
| | <div class="example-box example-mathjax4"> |
| | <h4>MathJax 4</h4> |
| | <div class="example-content mathjax4-zone" style="font-size: 1.6em;"> |
| | </html> |
| | |
| | $K_{DP} > 2\,^\circ\,\mathrm{km}^{-1}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Proper spacing, clean</div> |
| | </div> |
| | <div class="example-box example-katex"> |
| | <h4>KaTeX</h4> |
| | <div class="example-content katex-zone" style="font-size: 1.6em;"> |
| | </html> |
| | |
| | $K_{DP} > 2\,^\circ\,\mathrm{km}^{-1}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Proper spacing, clean</div> |
| | </div> |
| | <div class="example-box example-unicode"> |
| | <h4>Unicode/HTML</h4> |
| | <div class="example-content" style="font-size: 1.6em;"> |
| | </html> |
| | |
| | K<sub>DP</sub> > 2 °km⁻¹ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption bad">Awkward spacing</div> |
| | </div> |
| | </div> |
| | |
| | <h3 style="margin: 2em 0 1em 0;">Example 3: Temperature Range</h3> |
| | <div class="example-grid"> |
| | <div class="example-box example-mathjax2"> |
| | <h4>MathJax 2.7</h4> |
| | <div class="example-content" style="font-size: 1.5em;"> |
| | </html> |
| | |
| | $-3\,^\circ\mathrm{C}$ to $-8\,^\circ\mathrm{C}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Professional spacing</div> |
| | </div> |
| | <div class="example-box example-mathjax4"> |
| | <h4>MathJax 4</h4> |
| | <div class="example-content mathjax4-zone" style="font-size: 1.5em;"> |
| | </html> |
| | |
| | $-3\,^\circ\mathrm{C}$ to $-8\,^\circ\mathrm{C}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Professional spacing</div> |
| | </div> |
| | <div class="example-box example-katex"> |
| | <h4>KaTeX</h4> |
| | <div class="example-content katex-zone" style="font-size: 1.5em;"> |
| | </html> |
| | |
| | $-3\,^\circ\mathrm{C}$ to $-8\,^\circ\mathrm{C}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Professional spacing</div> |
| | </div> |
| | <div class="example-box example-unicode"> |
| | <h4>Unicode/HTML</h4> |
| | <div class="example-content" style="font-size: 1.5em;"> |
| | </html> |
| | |
| | -3°C to -8°C |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption bad">No space before unit</div> |
| | </div> |
| | </div> |
| | |
| | <h3 style="margin: 2em 0 1em 0;">Example 4: Greek Letter with Subscript</h3> |
| | <div class="example-grid"> |
| | <div class="example-box example-mathjax2"> |
| | <h4>MathJax 2.7</h4> |
| | <div class="example-content"> |
| | </html> |
| | |
| | $\rho_{hv}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Italic Greek, perfect</div> |
| | </div> |
| | <div class="example-box example-mathjax4"> |
| | <h4>MathJax 4</h4> |
| | <div class="example-content mathjax4-zone"> |
| | </html> |
| | |
| | $\rho_{hv}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Italic Greek, perfect</div> |
| | </div> |
| | <div class="example-box example-katex"> |
| | <h4>KaTeX</h4> |
| | <div class="example-content katex-zone"> |
| | </html> |
| | |
| | $\rho_{hv}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Italic Greek, perfect</div> |
| | </div> |
| | <div class="example-box example-unicode"> |
| | <h4>Unicode/HTML</h4> |
| | <div class="example-content"> |
| | </html> |
| | |
| | ρ<sub>hv</sub> |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption bad">Upright, wrong font</div> |
| | </div> |
| | </div> |
| | |
| | <h3 style="margin: 2em 0 1em 0;">Example 5: Velocity with Compound Units</h3> |
| | <div class="example-grid"> |
| | <div class="example-box example-mathjax2"> |
| | <h4>MathJax 2.7</h4> |
| | <div class="example-content" style="font-size: 1.6em;"> |
| | </html> |
| | |
| | $1.5\,\mathrm{m}\,\mathrm{s}^{-1}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Thin spaces, upright units</div> |
| | </div> |
| | <div class="example-box example-mathjax4"> |
| | <h4>MathJax 4</h4> |
| | <div class="example-content mathjax4-zone" style="font-size: 1.6em;"> |
| | </html> |
| | |
| | $1.5\,\mathrm{m}\,\mathrm{s}^{-1}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Thin spaces, upright units</div> |
| | </div> |
| | <div class="example-box example-katex"> |
| | <h4>KaTeX</h4> |
| | <div class="example-content katex-zone" style="font-size: 1.6em;"> |
| | </html> |
| | |
| | $1.5\,\mathrm{m}\,\mathrm{s}^{-1}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Thin spaces, upright units</div> |
| | </div> |
| | <div class="example-box example-unicode"> |
| | <h4>Unicode/HTML</h4> |
| | <div class="example-content" style="font-size: 1.6em;"> |
| | </html> |
| | |
| | 1.5 m/s |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption bad">Informal slash notation</div> |
| | </div> |
| | </div> |
| | |
| | <h3 style="margin: 2em 0 1em 0;">Example 6: Multiple Variables in Sequence</h3> |
| | <div class="example-grid"> |
| | <div class="example-box example-mathjax2"> |
| | <h4>MathJax 2.7</h4> |
| | <div class="example-content" style="font-size: 1.4em;"> |
| | </html> |
| | |
| | $Z_H$, $Z_{DR}$, $K_{DP}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Uniform consistency</div> |
| | </div> |
| | <div class="example-box example-mathjax4"> |
| | <h4>MathJax 4</h4> |
| | <div class="example-content mathjax4-zone" style="font-size: 1.4em;"> |
| | </html> |
| | |
| | $Z_H$, $Z_{DR}$, $K_{DP}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Uniform consistency</div> |
| | </div> |
| | <div class="example-box example-katex"> |
| | <h4>KaTeX</h4> |
| | <div class="example-content katex-zone" style="font-size: 1.4em;"> |
| | </html> |
| | |
| | $Z_H$, $Z_{DR}$, $K_{DP}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Uniform consistency</div> |
| | </div> |
| | <div class="example-box example-unicode"> |
| | <h4>Unicode/HTML</h4> |
| | <div class="example-content" style="font-size: 1.4em;"> |
| | </html> |
| | |
| | Z<sub>H</sub>, Z<sub>DR</sub>, K<sub>DP</sub> |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption bad">Visually cluttered</div> |
| | </div> |
| | </div> |
| | |
| | <h3 style="margin: 2em 0 1em 0;">Example 7: Concentration Range</h3> |
| | <div class="example-grid"> |
| | <div class="example-box example-mathjax2"> |
| | <h4>MathJax 2.7</h4> |
| | <div class="example-content" style="font-size: 1.5em;"> |
| | </html> |
| | |
| | $1$ to $100\,\mathrm{L}^{-1}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Clean unit formatting</div> |
| | </div> |
| | <div class="example-box example-mathjax4"> |
| | <h4>MathJax 4</h4> |
| | <div class="example-content mathjax4-zone" style="font-size: 1.5em;"> |
| | </html> |
| | |
| | $1$ to $100\,\mathrm{L}^{-1}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Clean unit formatting</div> |
| | </div> |
| | <div class="example-box example-katex"> |
| | <h4>KaTeX</h4> |
| | <div class="example-content katex-zone" style="font-size: 1.5em;"> |
| | </html> |
| | |
| | $1$ to $100\,\mathrm{L}^{-1}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Clean unit formatting</div> |
| | </div> |
| | <div class="example-box example-unicode"> |
| | <h4>Unicode/HTML</h4> |
| | <div class="example-content" style="font-size: 1.5em;"> |
| | </html> |
| | |
| | 1 to 100 L⁻¹ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption bad">Cramped superscript</div> |
| | </div> |
| | </div> |
| | |
| | <h3 style="margin: 2em 0 1em 0;">Example 8: Decibel Range</h3> |
| | <div class="example-grid"> |
| | <div class="example-box example-mathjax2"> |
| | <h4>MathJax 2.7</h4> |
| | <div class="example-content" style="font-size: 1.7em;"> |
| | </html> |
| | |
| | $2$–$4\,\mathrm{dB}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Proper en dash, spacing</div> |
| | </div> |
| | <div class="example-box example-mathjax4"> |
| | <h4>MathJax 4</h4> |
| | <div class="example-content mathjax4-zone" style="font-size: 1.7em;"> |
| | </html> |
| | |
| | $2$–$4\,\mathrm{dB}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Proper en dash, spacing</div> |
| | </div> |
| | <div class="example-box example-katex"> |
| | <h4>KaTeX</h4> |
| | <div class="example-content katex-zone" style="font-size: 1.7em;"> |
| | </html> |
| | |
| | $2$–$4\,\mathrm{dB}$ |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption good">Proper en dash, spacing</div> |
| | </div> |
| | <div class="example-box example-unicode"> |
| | <h4>Unicode/HTML</h4> |
| | <div class="example-content" style="font-size: 1.7em;"> |
| | </html> |
| | |
| | 2-4 dB |
| | |
| | <html> |
| | </div> |
| | <div class="example-caption bad">Wrong hyphen, no space</div> |
| | </div> |
| | </div> |
| | |
| | </html> |
| | |
| | ---- |
| | |
| | ===== Technical Comparison Summary ===== |
| | |
| | ^ Criterion ^ MathJax 2.7 (Plugin) ^ MathJax 4 (Manual) ^ KaTeX (Manual) ^ Unicode/HTML ^ |
| | | **Visual Quality** | ★★★★★ Excellent | ★★★★★ Excellent | ★★★★★ Excellent | ★★☆☆☆ Poor | |
| | | **Rendering Speed** | ★★★☆☆ (100-200ms) | ★★★★☆ (50-100ms) | ★★★★★ (<5ms) | ★★★★★ Instant | |
| | | **File Size** | ★★☆☆☆ (~500KB) | ★★★☆☆ (~350KB) | ★★★★☆ (~150KB) | ★★★★★ None | |
| | | **Font Used** | Computer Modern (LaTeX standard) | Computer Modern (LaTeX standard) | Cambria Math (modern) | Browser default (inconsistent) | |
| | | **DokuWiki Integration** | ★★★★★ Native plugin | ★★☆☆☆ Manual HTML blocks | ★★☆☆☆ Manual HTML blocks | ★★★★★ Native HTML | |
| | | **Maintenance** | ★★★★★ Auto-updates | ★★☆☆☆ Manual CDN updates | ★★☆☆☆ Manual CDN updates | ★★★★★ No dependencies | |
| | | **LaTeX Support** | ★★★★★ Full (includes old packages) | ★★★★★ Full (modern syntax) | ★★★★☆ ~90% (no obscure commands) | ★☆☆☆☆ Not LaTeX | |
| | | **Cross-Project Consistency** | ★★★★★ Same plugin everywhere | ★★★☆☆ Copy/paste config | ★★★☆☆ Copy/paste config | ★★★☆☆ Manual conversion | |
| | | **Scientific Standard** | ✓ Yes | ✓ Yes | ✓ Yes | ✗ No | |
| | | **Publication Quality** | ✓ Yes | ✓ Yes | ✓ Yes | ✗ No | |
| | |
| | ---- |
| | |
| | ===== Visual Quality Breakdown ===== |
| | |
| | <html> |
| | <style> |
| | .quality-table { |
| | width: 100%; |
| | margin: 2em 0; |
| | border-collapse: collapse; |
| | font-size: 1.05em; |
| | } |
| | .quality-table thead { |
| | background: #37474f; |
| | color: white; |
| | } |
| | .quality-table th { |
| | padding: 1em; |
| | text-align: left; |
| | font-weight: 600; |
| | } |
| | .quality-table td { |
| | padding: 0.9em; |
| | border: 1px solid #ddd; |
| | vertical-align: top; |
| | } |
| | .quality-table tbody tr:nth-child(even) { |
| | background: #f5f5f5; |
| | } |
| | .check-green { color: #2e7d32; font-weight: 600; font-size: 1.2em; } |
| | .cross-red { color: #c62828; font-weight: 600; font-size: 1.2em; } |
| | </style> |
| | |
| | <table class="quality-table"> |
| | <thead> |
| | <tr> |
| | <th>Visual Aspect</th> |
| | <th>MathJax 2.7</th> |
| | <th>MathJax 4</th> |
| | <th>KaTeX</th> |
| | <th>Unicode/HTML</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | <tr> |
| | <td><strong>Subscript positioning</strong></td> |
| | <td><span class="check-green">✓</span> Perfect height, aligned with baseline</td> |
| | <td><span class="check-green">✓</span> Perfect height, aligned with baseline</td> |
| | <td><span class="check-green">✓</span> Perfect height, aligned with baseline</td> |
| | <td><span class="cross-red">✗</span> Too low, disrupts line spacing</td> |
| | </tr> |
| | <tr> |
| | <td><strong>Superscript positioning</strong></td> |
| | <td><span class="check-green">✓</span> Proper height, readable size</td> |
| | <td><span class="check-green">✓</span> Proper height, readable size</td> |
| | <td><span class="check-green">✓</span> Proper height, readable size</td> |
| | <td><span class="cross-red">✗</span> Often cramped, too small</td> |
| | </tr> |
| | <tr> |
| | <td><strong>Greek letters (ρ, θ, φ)</strong></td> |
| | <td><span class="check-green">✓</span> Proper italic mathematics font</td> |
| | <td><span class="check-green">✓</span> Proper italic mathematics font</td> |
| | <td><span class="check-green">✓</span> Proper italic mathematics font</td> |
| | <td><span class="cross-red">✗</span> Upright, wrong font, inconsistent</td> |
| | </tr> |
| | <tr> |
| | <td><strong>Mathematical spacing</strong></td> |
| | <td><span class="check-green">✓</span> Professional thin spaces (\,)</td> |
| | <td><span class="check-green">✓</span> Professional thin spaces (\,)</td> |
| | <td><span class="check-green">✓</span> Professional thin spaces (\,)</td> |
| | <td><span class="cross-red">✗</span> No thin space control</td> |
| | </tr> |
| | <tr> |
| | <td><strong>Units formatting</strong></td> |
| | <td><span class="check-green">✓</span> Upright (\mathrm), correct spacing</td> |
| | <td><span class="check-green">✓</span> Upright (\mathrm), correct spacing</td> |
| | <td><span class="check-green">✓</span> Upright (\mathrm), correct spacing</td> |
| | <td><span class="cross-red">✗</span> Inconsistent, often wrong</td> |
| | </tr> |
| | <tr> |
| | <td><strong>Operator spacing</strong></td> |
| | <td><span class="check-green">✓</span> Proper space around >, <, =</td> |
| | <td><span class="check-green">✓</span> Proper space around >, <, =</td> |
| | <td><span class="check-green">✓</span> Proper space around >, <, =</td> |
| | <td><span class="cross-red">✗</span> No mathematical spacing rules</td> |
| | </tr> |
| | <tr> |
| | <td><strong>Font consistency</strong></td> |
| | <td><span class="check-green">✓</span> Uniform Computer Modern</td> |
| | <td><span class="check-green">✓</span> Uniform Computer Modern</td> |
| | <td><span class="check-green">✓</span> Uniform Cambria Math</td> |
| | <td><span class="cross-red">✗</span> Mixed browser defaults</td> |
| | </tr> |
| | <tr> |
| | <td><strong>Overall professionalism</strong></td> |
| | <td><span class="check-green">✓</span> Publication-grade</td> |
| | <td><span class="check-green">✓</span> Publication-grade</td> |
| | <td><span class="check-green">✓</span> Publication-grade</td> |
| | <td><span class="cross-red">✗</span> Amateur appearance</td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </html> |
| | |
| | ---- |
| | |
| | ===== Key Visual Facts ===== |
| | |
| | <html> |
| | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; margin: 2em 0;"> |
| | |
| | <div style="padding: 1.5em; background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border-radius: 8px; border-left: 5px solid #2e7d32;"> |
| | <h4 style="margin-top: 0; color: #1b5e20; font-size: 1.2em;">✓ LaTeX Methods (Options 1-3)</h4> |
| | <ul style="margin: 0; padding-left: 1.5em; line-height: 1.7;"> |
| | <li>Subscripts perfectly sized and positioned</li> |
| | <li>Greek letters use proper italic mathematics font</li> |
| | <li>Professional spacing around operators and units</li> |
| | <li>Meets scientific journal standards</li> |
| | <li>Content can be copied to publications</li> |
| | <li>Consistent across all documents</li> |
| | </ul> |
| | </div> |
| | |
| | <div style="padding: 1.5em; background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); border-radius: 8px; border-left: 5px solid #c62828;"> |
| | <h4 style="margin-top: 0; color: #b71c1c; font-size: 1.2em;">✗ Unicode/HTML (Option 4)</h4> |
| | <ul style="margin: 0; padding-left: 1.5em; line-height: 1.7;"> |
| | <li>Subscripts drop too far below baseline</li> |
| | <li>Greek letters in wrong font (upright instead of italic)</li> |
| | <li>No control over mathematical spacing</li> |
| | <li>Does not meet scientific standards</li> |
| | <li>Cannot be used in publications</li> |
| | <li>Looks unprofessional compared to published work</li> |
| | </ul> |
| | </div> |
| | |
| | </div> |
| | </html> |
| | |
| | ---- |
| | |
| | ===== Differences Between LaTeX Options ===== |
| | |
| | All three LaTeX options (MathJax 2.7, MathJax 4, KaTeX) produce **visually identical or nearly identical** output. The differences are technical, not visual: |
| | |
| | <html> |
| | <div style="padding: 1.5em; background: #f5f5f5; border-radius: 8px; margin: 1.5em 0;"> |
| | <h4 style="margin-top: 0;">MathJax 2.7 (Current CORSIPP Plugin)</h4> |
| | <ul style="line-height: 1.7; margin-bottom: 0;"> |
| | <li><strong>Pro:</strong> Already installed and working on CORSIPP</li> |
| | <li><strong>Pro:</strong> Native DokuWiki plugin (no manual configuration)</li> |
| | <li><strong>Pro:</strong> Auto-updates via plugin system</li> |
| | <li><strong>Pro:</strong> Most comprehensive LaTeX support (includes legacy commands)</li> |
| | <li><strong>Con:</strong> Older version (maintenance mode, no new features)</li> |
| | <li><strong>Con:</strong> Slower rendering (100-200ms per page)</li> |
| | <li><strong>Con:</strong> Larger file size (~500KB)</li> |
| | </ul> |
| | </div> |
| | |
| | <div style="padding: 1.5em; background: #e3f2fd; border-radius: 8px; margin: 1.5em 0;"> |
| | <h4 style="margin-top: 0;">MathJax 4 (Manual Implementation)</h4> |
| | <ul style="line-height: 1.7; margin-bottom: 0;"> |
| | <li><strong>Pro:</strong> Modern, actively developed version</li> |
| | <li><strong>Pro:</strong> Faster than v2.7 (50-100ms per page)</li> |
| | <li><strong>Pro:</strong> Smaller file size (~350KB)</li> |
| | <li><strong>Pro:</strong> Better rendering on high-DPI screens (SVG output)</li> |
| | <li><strong>Pro:</strong> Full LaTeX support with modern syntax</li> |
| | <li><strong>Con:</strong> Requires manual HTML blocks on each page</li> |
| | <li><strong>Con:</strong> Need to manually update CDN links for new versions</li> |
| | <li><strong>Con:</strong> Different implementation from CORSIPP's plugin</li> |
| | </ul> |
| | </div> |
| | |
| | <div style="padding: 1.5em; background: #f3e5f5; border-radius: 8px; margin: 1.5em 0;"> |
| | <h4 style="margin-top: 0;">KaTeX (Manual Implementation)</h4> |
| | <ul style="line-height: 1.7; margin-bottom: 0;"> |
| | <li><strong>Pro:</strong> Extremely fast (renders instantly, <5ms)</li> |
| | <li><strong>Pro:</strong> Smallest file size (~150KB)</li> |
| | <li><strong>Pro:</strong> No perceptible rendering delay</li> |
| | <li><strong>Pro:</strong> Modern Cambria Math font (clean on all screens)</li> |
| | <li><strong>Pro:</strong> Actively developed by Khan Academy</li> |
| | <li><strong>Con:</strong> Requires manual HTML blocks on each page</li> |
| | <li><strong>Con:</strong> Need to manually update CDN links for new versions</li> |
| | <li><strong>Con:</strong> ~90% LaTeX coverage (missing some obscure commands)</li> |
| | <li><strong>Con:</strong> Different implementation from CORSIPP's plugin</li> |
| | </ul> |
| | </div> |
| | </html> |
| | |
| | ---- |
| | |
| | ===== Recommendation Summary ===== |
| | |
| | <html> |
| | <div style="padding: 2em; background: linear-gradient(135deg, #1e3a5f 0%, #2e5c8a 100%); color: white; border-radius: 12px; margin: 2em 0;"> |
| | |
| | <div style="background: rgba(255,255,255,0.1); padding: 1.5em; border-radius: 8px; margin-bottom: 1.5em;"> |
| | <h3 style="margin: 0; color: white; font-size: 1.4em;">Visual Verdict</h3> |
| | <p style="font-size: 1.15em; line-height: 1.7; margin: 0.8em 0 0 0;"> |
| | All three LaTeX options (MathJax 2.7, MathJax 4, KaTeX) produce <strong>publication-quality output</strong> that meets scientific standards. Unicode/HTML produces <strong>visibly inferior output</strong> that does not meet professional standards for scientific documentation. |
| | </p> |
| | </div> |
| | |
| | <h3 style="color: white; font-size: 1.3em;">Choosing Between LaTeX Options:</h3> |
| | |
| | <div style="padding: 1em; background: rgba(46, 125, 50, 0.3); border-radius: 6px; margin: 1em 0;"> |
| | <p style="font-size: 1.1em; font-weight: 600; margin: 0.5em 0;"><strong>Option A:</strong> If you can install MathJax plugin on POLICE</p> |
| | <p style="font-size: 1.05em; margin: 0.5em 0 0 0;">→ Use <strong>MathJax 2.7 plugin</strong> on both projects. Identical implementation, zero manual work, auto-updates.</p> |
| | </div> |
| | |
| | <div style="padding: 1em; background: rgba(25, 118, 210, 0.3); border-radius: 6px; margin: 1em 0;"> |
| | <p style="font-size: 1.1em; font-weight: 600; margin: 0.5em 0;"><strong>Option B:</strong> If MathJax plugin cannot be installed</p> |
| | <p style="font-size: 1.05em; margin: 0.5em 0 0 0;">→ Use <strong>KaTeX manual implementation</strong> for speed. Requires HTML blocks but renders instantly. Best performance.</p> |
| | </div> |
| | |
| | <div style="padding: 1em; background: rgba(25, 118, 210, 0.3); border-radius: 6px; margin: 1em 0;"> |
| | <p style="font-size: 1.1em; font-weight: 600; margin: 0.5em 0;"><strong>Option C:</strong> Alternative if plugin unavailable</p> |
| | <p style="font-size: 1.05em; margin: 0.5em 0 0 0;">→ Use <strong>MathJax 4 manual implementation</strong>. Modern version with full LaTeX support. Slightly slower than KaTeX but more feature-complete.</p> |
| | </div> |
| | |
| | <div style="padding: 1em; background: rgba(198, 40, 40, 0.3); border-radius: 6px; margin: 1em 0;"> |
| | <p style="font-size: 1.1em; font-weight: 600; margin: 0.5em 0;"><strong>Reject:</strong> Unicode/HTML</p> |
| | <p style="font-size: 1.05em; margin: 0.5em 0 0 0;">→ Does not meet visual quality standards for professional scientific documentation.</p> |
| | </div> |
| | |
| | <div style="background: rgba(255,255,255,0.95); color: #1b5e20; padding: 1.5em; border-radius: 8px; margin: 1.5em 0 0 0;"> |
| | <p style="font-size: 1.15em; font-weight: 600; margin: 0; line-height: 1.7;"> |
| | <strong>Bottom Line:</strong> Any LaTeX option produces acceptable quality. Unicode/HTML does not. The choice between LaTeX options is a technical decision about implementation convenience, not visual quality. |
| | </p> |
| | </div> |
| | |
| | </div> |
| | </html> |