Math

Renders LaTeX mathematical expressions using MathML.

Expressions are rendered using Temml, which outputs native MathML. The component automatically loads the appropriate stylesheets to ensure expressions are rendered consistently across browsers, but custom math fonts are also supported.

<quiet-math
  id="math__editable"
  display-mode
  expression="x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}"
  style="font-size: 1.25rem;"
></quiet-math>

<br>

<quiet-text-field
  id="math__editable-input"
  label="Expression"
  value="x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}"
></quiet-text-field>

<script>
  const math = document.getElementById('math__editable');
  const input = document.getElementById('math__editable-input');

  input.addEventListener('quiet-input', () => {
    math.expression = input.value;
  });
</script>

Examples Jump to heading #

Providing expressions Jump to heading #

Set the expression attribute to a valid LaTeX string to render a mathematical expression. By default, math renders inline and flows with surrounding text.

<p>
  The Pythagorean theorem states that <quiet-math expression="a^2 + b^2 = c^2"></quiet-math> for a right triangle
  with legs <quiet-math expression="a"></quiet-math> and <quiet-math expression="b"></quiet-math> and hypotenuse <quiet-math expression="c"></quiet-math>.
</p>

Changing the size Jump to heading #

The rendered math scales with font-size, so you can use CSS to make expressions larger or smaller.

<quiet-math display-mode expression="E = mc^2" style="font-size: 0.875rem;"></quiet-math>
<quiet-math display-mode expression="E = mc^2" style="font-size: 1.25rem;"></quiet-math>
<quiet-math display-mode expression="E = mc^2" style="font-size: 2rem;"></quiet-math>

Display mode Jump to heading #

The display-mode attribute renders math with larger operators and stacks limits above/below symbols like sums and integrals. This is the style typically used for standalone equations.

Inline style:
<quiet-math 
  expression="\sum_{i=1}^{n} i = \frac{n(n+1)}{2}"
  style="font-size: 1.25rem;" 
></quiet-math>

<br><br>

Display mode:
<quiet-math 
  display-mode 
  expression="\sum_{i=1}^{n} i = \frac{n(n+1)}{2}"
  style="font-size: 1.25rem;"
></quiet-math>

Equation numbers Jump to heading #

Use the leqno attribute to position equation numbers on the left side instead of the right.

<quiet-math 
  leqno
  display-mode
  expression="E = mc^2 \tag{1}"
  style="font-size: 1.25rem;"
></quiet-math>

<br>

<quiet-math 
  display-mode
  expression="F = ma \tag{2}"
  style="font-size: 1.25rem;"
></quiet-math>

Integrals and calculus Jump to heading #

Standard LaTeX commands for integrals, derivatives, and limits are fully supported.

<quiet-math
  display-mode
  expression="\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}"
  style="font-size: 1.25rem;"
></quiet-math>

Matrices Jump to heading #

Matrix environments such as pmatrix, bmatrix, and vmatrix work as expected.

<quiet-math
  display-mode
  expression="
    \begin{pmatrix} a & b \\ c & d \end{pmatrix}
    \begin{pmatrix} x \\ y \end{pmatrix} =
    \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}
  "
  style="font-size: 1.25rem;"
></quiet-math>

Greek letters and symbols Jump to heading #

Greek letters, logical quantifiers, and other mathematical symbols can be used with standard LaTeX commands.

<quiet-math
  display-mode
  expression="
    \alpha, \beta, \gamma, \delta, \epsilon, \zeta,
    \eta, \theta, \iota, \kappa, \lambda, \mu
  "
  style="font-size: 1.25rem;"
></quiet-math>

<br>

<quiet-math
  display-mode
  expression="
    \forall x \in \mathbb{R},
    \exists y \in \mathbb{Z} : |x - y| < 1
  "
  style="font-size: 1.25rem;"
></quiet-math>

Custom macros Jump to heading #

Use the macros property to define custom LaTeX commands. This is useful for frequently used notation or to maintain consistency across your content.

<quiet-math
  id="math__macros"
  display-mode
  expression="f: \RR \to \RR, \quad g: \NN \to \ZZ"
  style="font-size: 1.25rem;"
></quiet-math>

<script>
  const mathWithMacros = document.getElementById('math__macros');
  mathWithMacros.macros = {
    '\\RR': '\\mathbb{R}',
    '\\NN': '\\mathbb{N}',
    '\\ZZ': '\\mathbb{Z}'
  };
</script>

Trusted commands Jump to heading #

By default, potentially unsafe LaTeX commands such as \class and \includegraphics are ignored. Use the trust attribute to allow them.

<quiet-math
  trust
  display-mode
  expression="\includegraphics[width=3em,height=3em]{/assets/images/app-icon.png}"
></quiet-math>

Using a different font Jump to heading #

By default, the component loads Latin Modern Math (~380 KB), a clone of Computer Modern, the classic font used by LaTeX. This gives your math expressions a polished, professional appearance with no additional setup.

If you'd like to use a different math font, add the without-font attribute to prevent the default font from loading.

<quiet-math
  expression="\sum_{i=1}^{n} i = \frac{n(n+1)}{2}"
  without-font
></quiet-math>

Then declare your own @font-face and apply it to math elements inside quiet-math.

/* Example: Using STIX Two Math instead of Latin Modern Math */
@font-face {
  font-family: 'STIX Two Math';
  src: url('/path/to/STIXTwoMath-Regular.woff2') format('woff2');
  font-display: swap;
}

quiet-math math {
  font-family: 'STIX Two Math', math;
}

Error handling Jump to heading #

When a formula contains invalid LaTeX, the component shows the raw expression text instead. You can target the formula part and the error state to style the error display.

<style>
  #math__error:state(error)::part(formula) {
    font-family: monospace;
    color: firebrick;
  }
</style>

<quiet-math id="math__error" expression="\frac{1}{"></quiet-math>

API Jump to heading #

Importing Jump to heading #

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

import 'https://cdn.quietui.org/v4.0.0/components/math/math.js';

import '/path/to/quiet/components/math/math.js';

Properties Jump to heading #

Math has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

CSS parts Jump to heading #

Math exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Custom States Jump to heading #

Math has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states