Render Math Equations with Pure HTML & CSS – PureTex.css

PureTex is a lightweight CSS library that renders mathematical equations using pure HTML and CSS markup.

It’s designed to help you create properly formatted mathematical notation for fractions, integrals, summation symbols, matrices, and superscripts without any JavaScript execution or external rendering engines.

Features:

• Fraction notation: Displays numerators and denominators with a horizontal dividing line using CSS Grid layout.
• Subscripts and superscripts: Positions characters above or below the baseline with appropriate sizing and vertical offset.
• Integral symbols: Renders integral notation with upper and lower limits positioned correctly relative to the symbol.
• Sigma summation: Displays summation notation with limits above and below the sigma symbol.
• Matrix representation: Creates bracketed matrices using HTML tables with configurable bracket styles.
• System of equations: Formats multiple equations with a single left bracket using specialized bracket variants.
• Nested expressions: Supports combining different notation types within a single mathematical expression.

Installation:

Download the package and load the stylesheet PureTex.css in the document. Note that the library requires SVG symbol files for integral, sigma, and bracket notation. These must be located in ../img/math-symbols/ relative to the CSS file, or you’ll need to update the background-image URLs in the stylesheet.

<link rel="stylesheet" href="styles/puretex.css">

Rendering Fractions

Fractions use a three-row grid structure with the numerator, dividing line, and denominator:

<div class="pt-fraction">
    <div class="pt-fraction__upper">1</div>
    <div class="pt-fraction__lower">x + y</div>
</div>

The pt-fraction container creates an inline-grid with max-content width, so the fraction only takes up as much horizontal space as its widest element. The dividing line is generated with a ::before pseudo-element at 0.06em height.

Subscripts and Superscripts

These use vertical transformation to shift text above or below the baseline:

x<div class="pt-sup">2</div> + y<div class="pt-sub">i</div>

The pt-sup class applies transform: translateY(-0.5em) with font-size reduced to 0.7em. This keeps the vertical positioning consistent across different base font sizes. Subscripts use positive translation to shift downward.

Integral Notation

Integrals require a container with the symbol and limit elements:

<div class="pt-integral">
    <div class="pt-integral__upper-limit">b</div>
    <div class="pt-integral__lower-limit">a</div>
    <div class="pt-integral__symbol"></div>
</div>
f(x) dx

The grid template creates a 0.8em column for the symbol and auto-width column for limits. The symbol itself is a background SVG image that spans all three rows. The integrand expression (f(x) dx) goes after the closing div and displays inline with the notation.

Sigma Summation

Summation notation uses a similar structure to integrals:

<div class="pt-sigma">
    <div class="pt-sigma__upper-limit">n</div>
    <div class="pt-sigma__lower-limit">i = 1</div>
    <div class="pt-sigma__symbol"></div>
</div>
i<div class="pt-sup">2</div>

The sigma symbol is a 2.5em by 2.5em SVG background image. Limits are centered horizontally within the column using text-align: center at 0.8em font size.

Matrix Display

Matrices combine HTML tables with bracket pseudo-elements:

<div class="pt-bracket pt-bracket--round">
  <table class="pt-matrix">
    <tbody>
      <tr>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="pt-bracket pt-bracket--array">
  <table class="pt-matrix">
    <tbody>
      <tr>
        <td>1</td>
        <td><div class="cdots"></div></td>
        <td>n</td>
      </tr>
      <tr>
        <td><div class="vdots"></div></td>
        <td><div class="ddots"></div></td>
        <td>3</td>
      </tr>
      <tr>
        <td>m</td>
        <td>3</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
  <div class="pt-bracket__exponent pt-bracket__exponent--right">T</div>
</div>

The pt-bracket wrapper adds 1em padding and positions brackets using ::before and ::after pseudo-elements with SVG backgrounds. The pt-bracket--round modifier applies rounded bracket images. Table cells get 0.25em vertical and 0.5em horizontal padding with center alignment.

System of Equations

Systems use a specialized bracket that only appears on the left side:

<div class="pt-bracket pt-bracket--system">
    x + 2y = 5<br>
    3x + y = 7
</div>

The pt-bracket--system modifier changes the left bracket image and sets display: none on the ::after pseudo-element. Line breaks create vertical separation between equations.

Complex Expression Example

Here’s the quadratic formula combining multiple notation types:

x = 
<div class="pt-fraction">
    <div class="pt-fraction__upper">
        -b &pm; &radic;(b<div class="pt-sup">2</div> - 4ac)
    </div>
    <div class="pt-fraction__lower">2a</div>
</div>

The superscript notation nests inside the fraction’s numerator. HTML entities like ± (±) and √ (√) work directly in the markup.

Alternatives:

• MathJax: This is the established solution for rendering LaTeX-style mathematical notation in browsers.
• KaTeX: This library renders LaTeX math notation faster than MathJax by using a different parsing approach and limiting scope. KaTeX is smaller than MathJax (around 100KB including fonts) and renders synchronously.
• Unicode and HTML entities: For very simple mathematical notation, you can use Unicode characters (×, ÷, ∫, Σ) and HTML entities directly without any library. This works for basic inline formulas but breaks down quickly for anything requiring vertical alignment like fractions or limits.

FAQs:

Q: Can I customize the appearance of the mathematical notation?
A: Yes, you can override the CSS classes to adjust colors, sizes, and spacing. The dividing line color in fractions is controlled by background-color on the .pt-fraction::before selector. Font sizes throughout use relative em units, so changing the base font size on the container will scale everything proportionally. The SVG symbol files can be replaced with custom graphics if you want different visual styles for integrals, sigma, or brackets.

Q: Does this work in all browsers?
A: PureTex relies on CSS Grid, flexbox, and CSS transforms, which have full support in all modern browsers.

Q: How do I handle very complex nested expressions?
A: Nesting works by placing complete notation structures inside the content divs of parent structures. You can put a fraction inside a fraction’s numerator, or a superscript inside an integral’s upper limit. The inline-grid and inline-block display properties let these elements flow together. Watch out for font size cascading when you nest multiple levels deep, since many elements apply 0.7em or 0.8em font size. You might need to adjust sizing manually for three or more nesting levels.

Changelog:

11/01/2025

• Added Another style of matrix