Customizing a mathfield

The appearance and behavior of the mathfield is highly customizable. Here are a few common examples.

Styling

The mathfield can be styled using the style attribute on the <math-field> tag, for example to change the base font size or add a border.

Change line 2-6 of the HTML in the playground below with color: white;background: #256291; and press the Run button.

<math-field style=" font-size: 32px; margin: 3em; padding: 8px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .3); box-shadow: 0 0 8px rgba(0, 0, 0, .2)" >x=\frac{-b\pm \sqrt{b^2-4ac}}{2a} </math-field>

The content of the mathfield is displayed using a family of high-quality fonts based on the original Computer Modern font from TeX. The mathfield will not display correctly using another font. By default, the directory containing the fonts is located next to the file containing the mathlive library. If your bundler or asset management system require a different configuration you can specify where the fonts can be located using the fontsDirectory option or the fonts-directory attribute.

<math-field fonts-directory="//unpkg.com/mathlive/dist/fonts/"> x=\frac{-b\pm \sqrt{b^2-4ac}}{2a} </math-field>

Note that changing the fonts directory for one mathfield will change the fonts used by all the mathfields in the page.

Learn more about configuring the MathLive library to your environment, including using custom asset pipelines and bundlers in the Getting Started Guide.

CSS variables

Some CSS variables can be used to modify the appearance of the mathfield:

  • --hue: (0…360) default is 212 (light blue). The default colors below are derived from this variable
  • --highlight: color of the selected fragment of the expression, when the mathfield is active
  • --highlight-inactive: selection color when the mathfield is not focused
  • --caret: color of the caret (insertion point)
  • --primary: accent color for some UI elements, such as the virtual keyboard toggle
<math-field style=" --hue: 53 !important; --caret: red !important; ">x=\frac{-b\pm \sqrt{b^2-4ac}}{2a} </math-field>

Editing options

Some configuration options can be specified when creating a mathfield as the second argument of makeMathField() as we’ve see above with the fontsDirectory option.

The configuration options can also be changed programmatically using the setConfig() method.

Several of these configuration options affect the behavior while editing a formula:

  • ignoreSpaceabrInMathMode: if false, insert a space when the spacebar is pressed, even in math mode (spaces are usually ignored in math mode)
  • removeExtraneousParentheses: automatically remove extra parentheses around a numerator or denominator
  • scriptDepth: maximum levels of subscript or superscript. Set it to 0 to prevent the input of superscript and subscripts
  • smartFence: automatically convert parentheses to \left...\right markup.
  • smartMode: switch to text mode when text input is detected, for example when typing “if x > 0”
  • smartSuperscript: automatically move out of a superscript when a digit is typed

In the code playground below, try some of these options. For example, change line 3 to scriptDepth: 0, then press the Run button and try to type “x^2” in the mathfield.

import MathLive from 'mathlive'; MathLive.makeMathField(document.getElementById('mathfield'), { smartMode: true });
<div id="mathfield"> x=\frac{-b\pm \sqrt{b^2-4ac}}{2a} </div>

See EditingOptions for more details about these and other available options.

Localization

The user interface of the mathfield is provided in english, arabic, german, greek, spanish, farsi, french, italian, japanese, polish and russian.

The language to use is detected automatically, but it can be overriden by using the locale option or the locale attribute.

console.log(document.getElementById('formula'));
<math-field id='formula' virtual-keyboard-mode="manual" locale="fr" >x=\frac{-b\pm \sqrt{b^2-4ac}}{2a} </math-field>

Next

Macros
How to define new Latex commands