Customizing a mathfield
The appearance and behavior of the mathfield is highly customizable. Here are a few common examples.
The mathfield can be styled using the
style attribute on the
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: #dde; background: #256291;.
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
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.
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
--smart-fence-opacity: opacity of a smart gence (default is 50%)
--smart-fence-color: color of a smart fence (default is current color)
--text-font-family: the font stack used in text mode
The appearance of a formula, in an editable mathfield or as a static representation, can be controlled with some of the following options:
To change the foreground (“ink”) and background (“paper”) colors of a formula
programmatically, use the
To modify the foreground color you can also use the
To change the background, use the
The first argument of these commands is a color specified as:
- a RGB color using the standard CSS format (
- a CSS color name (
- one of the 68 colors from dvips color name (
- one of the 10 Mathematica color from
- a color defined using the syntax from the
xcolorpackage, for example:
The following color names are recommended. They can be applied using the color keys in the virtual keyboard:
These colors have been carefully selected for a balanced representation of the range of
hues on the color circle, with similar lightness and intensity. They will map to different color values than the
dvips colors of the same name.
To have proper legibility based on usage, these color names will map to different values when used as a foreground color and a background color. To use a specific color value, use a RGB color instead.
To customize how the color names are interpreted provide a
To change the base font size, set the
font-size CSS property to the desired
value on the
mathfield or static element.
Within a formula, the size can be specified from a font scale with 10 values, where 1 em is the base font size.
In TeX, the sizing commands behave inconsistently when applied to math. Other implementations of TeX may also interpret the sizing commands differently.
Some configuration options can be specified when creating a mathfield as
the argument of
new MathfieldElement() or as an attribute to the
as we’ve see above with the
The configuration options can also be changed programmatically using the
Several of these configuration options affect the behavior while editing a formula:
inline-maththe math field is using inline math mode by default. If set to
math, it will use the display math mode. If set to
textit will use the text mode.
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
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 try to type “x^2” in the mathfield.
See EditingOptions for more details about these and other available options.
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 overridden by
locale option or the
await for the
<math-field> definition to be loaded before
getOptions() method, otherwise it would not be found.
- Executing commands
- Send editing commands to a mathfield