Render Math Properly

Goal State

Code renders math properly.

Simple Test with $ syntax

Inline math \(x=10\)

Display math \[F = ma\]

Simple Test with \[ and \( Syntax

2025-07-08.

Here is the law inline [ F = G ]

Again, using $ syntax. \[ F = G \frac{m_1 m_2}{r^2} \]

Here is some more testing

The well known Pythagorean theorem (x^2 + y^2 = z^2) was proved to be invalid for other exponents. Meaning the next equation has no integer solutions:

[ x^n + y^n = z^n ]

Test Failed → Likely caused by how [ and ( syntaxes are rendered. Can trouble shoot, but better to just use $ syntax in source docs.

Rendering Units

2025-07-09

Work on fundamentals!

LaTeX → SVG → HTML

2025-07-09

Works: Here is the process

  1. build latex file with standalone
  2. compile to a dvi file
  3. convert to a svg using dvisvgm

next step: test html with svg equation, inline and block. 1. python to svg

Inline Equations

2025-07-15

To insert an inline SVG image that aligns well with surrounding text in HTML, use the following pattern:

<img src="equation.svg" style="height:1em; vertical-align:middle;" alt="equation">

If vertical-align: middle doesn’t align perfectly, try small adjustments:

style=“height:1em; vertical-align:-0.1em;”

Or:

style=“height:1em; vertical-align:text-bottom;”

Adjust -0.1em as needed until it looks right with your font and SVG size.

Make Equation