PureTex.css Library Examples

Download Back To CSSScript.Com

A lightweight, JavaScript-free library for rendering mathematical equations with pure HTML & CSS.

Installation

Using CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mtugb/[email protected]/styles/puretex.css">

Component Showcase

Fractions
1
x + y
<div class="pt-fraction">
    <div class="pt-fraction__upper">1</div>
    <div class="pt-fraction__lower">x + y</div>
</div>
Subscripts & Superscripts
x
2
+ y
i
x<div class="pt-sup">2</div> + y<div class="pt-sub"gt;i</div>
Integrals
b
a
f(x) dx 
<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
Sigma (Summation)
n
i = 1
i
2
<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>
Matrix
a b
c d 
<div class="pt-bracket pt-bracket--round">
    <table class="pt-matrix">
        <tr> <td>a</td> <td>b</td> </tr>
        <tr> <td>c</td> <td>d</td> </tr>
    </table>
</div>
System of Equations
x + 2y = 5
3x + y = 7 
<div class="pt-bracket pt-bracket--system">
    x + 2y = 5<br>
    3x + y = 7
</div>
Complex Example: The Quadratic Formula
x =
-b ± √(b
2
- 4ac)
2a
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>