HTML & LaTeX Guide for Technical Writing

HTML & LaTeX Guide for Technical Writing

Engineering documentation requires displaying mathematical equations, material properties, chemical reactions, structural schematics, and workflow routines. This guide demonstrates how to present technical data across web platforms using standard HTML5 entities, optimized CSS, MathJax (LaTeX), and dynamic Mermaid.js graphics.

1) Roots (HTML Entities)

When external rendering engines cannot be loaded or lightweight web rendering is required, standard numeric HTML entities display radicals natively without external network requests or performance overhead.

Code Syntax
Browser Output
√ 4 = 2
√4 = 2
∛ 27 = 3
∛27 = 3
∜ 256 = 4
∜256 = 4
&#8730;(a<sup>2</sup> + b<sup>2</sup>)
√(a2 + b2)
&#8730;(&#963;<sub>x</sub><sup>2</sup> + &#964;<sub>xy</sub><sup>2</sup>)
√(σx2 + Ï„xy2)

2) Superscript and Subscript (Chemical & Structural Notation)

The native HTML <sup> and <sub> tags preserve baseline layout flow while formatting exponents, structural indices, and chemical formulas.

2<sup>10</sup> = 1024
210 = 1024
H<sub>2</sub>O
H2O
3Ca.SiO<sub>2</sub> &middot; 2H<sub>2</sub>O (C-S-H Gel)
3Ca.SiO2 · 2H2O (C-S-H Gel)
f<sub>ck</sub> = 35 N/mm<sup>2</sup>
fck = 35 N/mm2
E<sub>s</sub> = 2.0 &times; 10<sup>5</sup> N/mm<sup>2</sup>
Es = 2.0 × 105 N/mm2

3) Accessible Fractions (CSS Flexbox Method)

To render inline fractions without external mathematical engines while retaining screen reader accessibility, use Flexbox alongside hidden accessibility tags (.sr-only):

HTML Markup Rendered Visual Result
7 <span class="sr-only">42 over 73</span><div class="frac" aria-hidden="true">42<span>73</span></div> 7 42 over 73
&sigma; = <span class="sr-only">P over A</span><div class="frac" aria-hidden="true">P<span>A</span></div> σ = P over A
M<sub>max</sub> = <span class="sr-only">w L squared over 8</span><div class="frac" aria-hidden="true">w &middot; L<sup>2</sup><span>8</span></div> Mmax = w L squared over 8
&tau; = <span class="sr-only">V Q over I b</span><div class="frac" aria-hidden="true">V &middot; Q<span>I &middot; b</span></div> Ï„ = V Q over I b

4) Complex Equations (MathJax 3 / LaTeX)

Implementation Note: Use single dollar signs $ ... $ for inline expressions and double dollar signs $$ ... $$ for centered block-level equations.

Engineering principles—such as beam deflection equations, fluid dynamics formulas, structural matrix systems, and concrete stress blocks—are rendered cleanly with MathJax:

LaTeX Code Rendered Output (MathJax)
x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$
\delta_{max} = \frac{5 \cdot w \cdot L^4}{384 \cdot E \cdot I} $$\delta_{max} = \frac{5 \cdot w \cdot L^4}{384 \cdot E \cdot I}$$
\sigma_{1,2} = \frac{\sigma_x + \sigma_y}{2} \pm \sqrt{\left(\frac{\sigma_x - \sigma_y}{2}\right)^2 + \tau_{xy}^2} $$\sigma_{1,2} = \frac{\sigma_x + \sigma_y}{2} \pm \sqrt{\left(\frac{\sigma_x - \sigma_y}{2}\right)^2 + \tau_{xy}^2}$$
\beta = \sqrt[4]{\frac{k \cdot b}{4EI}} $$\beta = \sqrt[4]{\frac{k \cdot b}{4EI}}$$
\mathbf{K} = \int_{V} \mathbf{B}^T \mathbf{D} \mathbf{B} \, dV $$\mathbf{K} = \int_{V} \mathbf{B}^T \mathbf{D} \mathbf{B} \, dV$$

Matrix Structural Analysis Example

To write structural stiffness matrices in LaTeX, use the bmatrix environment:

$$\begin{bmatrix} F_1 \\ M_1 \\ F_2 \\ M_2 \end{bmatrix} = \frac{EI}{L^3} \begin{bmatrix} 12 & 6L & -12 & 6L \\ 6L & 4L^2 & -6L & 2L^2 \\ -12 & -6L & 12 & -6L \\ 6L & 2L^2 & -6L & 4L^2 \end{bmatrix} \begin{bmatrix} v_1 \\ \theta_1 \\ v_2 \\ \theta_2 \end{bmatrix}$$

5) Advanced Data Tables: Merging & Formatting

Multi-field field survey logs and structural testing reports require complex tables with combined headers (using rowspan and colspan) alongside vertical orientation styles:

Section Chainage Location (m) Compressive Strength (MPa) Flexural Modulus (GPa) Compliance Status
Start End 7 Days 28 Days
Reach A 10+000 12+500 24.5 36.8 31.2 Approved
Reach B 12+500 15+000 19.2 29.4 27.8 Core Testing Required
Reach C 15+000 17+300 26.1 38.5 32.5 Approved

6) Process Workflows (Mermaid.js)

Client-side diagrams drawn from plain-text definitions eliminate the maintenance overhead of static raster images, keeping technical documentation easily editable.

graph TD A[Raw Material Testing: Cement, Aggregates & Water] --> B{Determine Design Parameters} B -->|Target Strength| C[Calculate Water-Cement Ratio] B -->|Workability Requirements| D[Select Aggregate Proportions & Admixtures] C --> E[Trial Mix Batching - Batch 1] D --> E E --> F[Conduct Slump & Air Content Tests] F --> G{Fresh Properties Acceptable?} G -->|No| H[Adjust Superplasticizer / Water Content] H --> E G -->|Yes| I[Cast 150mm Cube Specimens] I --> J[Water Curing at 27°C ± 2°C] J --> K[28-Day Compressive Strength Testing] K --> L{Meets f_ck + 1.65 s?} L -->|No| C L -->|Yes| M[Final Mix Proportions Approved] style A fill:#e3f2fd,stroke:#1565c0 style G fill:#fff3e0,stroke:#ef6c00 style L fill:#fff3e0,stroke:#ef6c00 style M fill:#e8f5e9,stroke:#2e7d32
Figure 1: Standard Concrete Mix Design Workflow (IS 10262 / ACI 211).

7) Utility Links & Cloud File Distribution

To share calculations, datasets, or CAD drawings via cloud storage services (such as Google Drive), convert standard preview share URLs into direct download or asset-embed links:

1) Standard View Link Syntax:

https://drive.google.com/file/d/1A2b3C4d5E6f7G8h9I0j/view?usp=sharing

2) Direct File Download URL Conversion:

https://drive.google.com/uc?export=download&id=1A2b3C4d5E6f7G8h9I0j

3) Direct Image Embedding inside HTML Documents:

<figure class="center">
  <img src="https://drive.google.com/uc?export=view&id=1A2b3C4d5E6f7G8h9I0j" alt="Finite Element Mesh Diagram" />
  <figcaption>Figure 2: Finite Element Mesh of the Reinforced Concrete Slab.</figcaption>
</figure>
Security & CORS Warning: Ensure file permissions on Google Drive are explicitly set to "Anyone with the link can view". Otherwise, cross-origin resource sharing (CORS) security policies will block embedded images and file downloads.