Interface MathfieldWithKeyboard

The MathfieldElement class represent a DOM element that displays math equations. It is a subclass of the standard HTMLElement class and as such inherits all of its properties and methods.

It inherits many useful properties and methods from [[HTMLElement]] such as style, tabIndex, addEventListener(), getAttribute(), etc...

It is the main entry point to the MathLive library.

It is typically used to render a single equation. To render multiple equations, use multiple instances of MathfieldElement. The MathfieldElement class provides special properties and methods to control the display and behavior of <math-field> elements.

To create a new MathfieldElement:

// 1. Create a new MathfieldElement
const mf = new MathfieldElement();

// 2. Attach it to the DOM
document.body.appendChild(mf);
Copy

The MathfieldElement constructor has an optional argument of [[MathfieldOptions]] to configure the element. The options can also be modified later:

// Setting options during construction
const mf = new MathfieldElement({ smartFence: false });

// Modifying options after construction
mf.smartFence = true;
Copy

MathfieldElement CSS Variables

To customize the appearance of the mathfield, declare the following CSS variables (custom properties) in a ruleset that applies to the mathfield.

math-field {
 --hue: 10       // Set the highlight color and caret to a reddish hue
}
Copy

Alternatively you can set these CSS variables programatically:

document.body.style.setProperty("--hue", "10");
Copy

You can customize the appearance and zindex of the virtual keyboard panel with some CSS variables associated with a selector that applies to the virtual keyboard panel container.

Read more about customizing the virtual keyboard appearance

MathfieldElement CSS Parts

To style the virtual keyboard toggle, use the virtual-keyboard-toggle CSS part. To use it, define a CSS rule with a ::part() selector for example:

math-field::part(virtual-keyboard-toggle) {
 color: red;
}
Copy

MathfieldElement Attributes

An attribute is a key-value pair set as part of the tag:

<math-field letter-shape-style="tex"></math-field>
Copy

The supported attributes are listed in the table below with their corresponding property.

The property can also be changed directly on the MathfieldElement object:

 getElementById('mf').value = "\\sin x";
 getElementById('mf').letterShapeStyle = "text";
Copy

The values of attributes and properties are reflected, which means you can change one or the other, for example:

getElementById('mf').setAttribute('letter-shape-style',  'french');
console.log(getElementById('mf').letterShapeStyle);
// Result: "french"
getElementById('mf').letterShapeStyle ='tex;
console.log(getElementById('mf').getAttribute('letter-shape-style');
// Result: 'tex'
Copy

An exception is the value property, which is not reflected on the value attribute: for consistency with other DOM elements, the value attribute remains at its initial value.

See [[MathfieldOptions]] for more details about these options.

In addition, the following global attributes can also be used:

• class
• data-*
• hidden
• id
• item*
• style
• tabindex

MathfieldElement Events

Listen to these events by using addEventListener(). For events with additional arguments, the arguments are available in event.detail.