Fork me on GitHub



new MathField()

element : HTMLElement

The DOM element this mathfield is attached to.

config : [string]:any

A set of key/value pairs that can be used to customize the behavior of the mathfield

id : string

A unique ID identifying this mathfield

keystrokeCaptionVisible : boolean

True if the keystroke caption panel is visible

virtualKeyboardVisible : boolean

True if the virtual keyboard is visible

keystrokeBuffer : string

The last few keystrokes, to look out for inline shortcuts

keystrokeBufferStates : object[]

The saved state for each of the past keystrokes


$applyStyle(style: object)

Apply a style (color, bold, italic, etc...).

If there is a selection, the style is applied to the selection

If the selection already has this style, remove it. If the selection has the style partially applied (i.e. only some sections), remove it from those sections, and apply it to the entire selection.

If there is no selection, the style will apply to the next character typed.

style : object

an object with the following properties. All the properties are optional, but they can be combined.

style.mode : string = ''

Either 'math', 'text' or 'command'

style.color : string = ''

The text/fill color, as a CSS RGB value or a string for some 'well-known' colors, e.g. 'red', '#f00', etc...

style.backgroundColor : string = ''

The background color.

style.fontFamily : string = ''

The font family used to render text. This value can the name of a locally available font, or a CSS font stack, e.g. "Avenir", "Georgia, serif", etc... This can also be one of the following TeX-specific values:

  • 'cmr': Computer Modern Roman, serif
  • 'cmss': Computer Modern Sans-serif, latin characters only
  • 'cmtt': Typewriter, slab, latin characters only
  • 'cal': Calligraphic style, uppercase latin letters and digits only
  • 'frak': Fraktur, gothic, uppercase, lowercase and digits
  • 'bb': Blackboard bold, uppercase only
  • 'scr': Script style, uppercase only

style.series : string = ''

The font 'series', i.e. weight and stretch. The following values can be combined, for example: "ebc": extra-bold, condensed. Aside from 'b', these attributes may not have visible effect if the font family does not support this attribute:

  • 'ul' ultra-light weight
  • 'el': extra-light
  • 'l': light
  • 'sl': semi-light
  • 'm': medium (default)
  • 'sb': semi-bold
  • 'b': bold
  • 'eb': extra-bold
  • 'ub': ultra-bold
  • 'uc': ultra-condensed
  • 'ec': extra-condensed
  • 'c': condensed
  • 'sc': semi-condensed
  • 'n': normal (default)
  • 'sx': semi-expanded
  • 'x': expanded
  • 'ex': extra-expanded
  • 'ux': ultra-expanded

style.shape : string = ''

The font 'shape', i.e. italic.

  • 'auto': italic or upright, depending on mode and letter (single letters are italic in math mode)
  • 'up': upright
  • 'it': italic
  • 'sl': slanted or oblique (often the same as italic)
  • 'sc': small caps
  • 'ol': outline

style.size : string = ''

The font size: 'size1'...'size10' 'size5' is the default size

$el(): HTMLElement

Return the DOM element associated with this mathfield.

Note that this.$el().mathfield = this

: HTMLElement   

$insert(s: string, options?: [string]:any)

This method can be invoked as a selector with $perform("insert") or called explicitly.

It will insert the specified block of text at the current insertion point, according to the insertion mode specified.

After the insertion, the selection will be set according to the selectionMode.

s : string

The text to be inserted

options : [string]:any = {}
options.selectionMode : 'placeholder' | 'after' | 'before' | 'item'

Describes where the selection will be after the insertion:

  • 'placeholder': the selection will be the first available placeholder in the item that has been inserted (default)
  • 'after': the selection will be an insertion point after the item that has been inserted,
  • 'before': the selection will be an insertion point before the item that has been inserted
  • 'item': the item that was inserted will be selected

options.format : 'auto' | 'latex'

The format of the string s:

  • 'auto': the string is interpreted as a latex fragment or command) (default)
  • 'latex': the string is interpreted strictly as a latex fragment

options.focus : boolean

If true, the mathfield will be focused after the insertion : boolean

If true, provide audio and haptic feedback

options.mode : 'text' | 'math' | ''

'text' or 'math'. If empty, the current mode is used (default)

options.resetStyle : boolean

If true, the style after the insertion is the same as the style before (if false, the style after the insertion is the style of the last inserted atom).

$keystroke(keys: string, evt: Event): boolean

keys : string

A string representation of a key combination.

For example 'Alt-KeyU'.

See W3C UIEvents

evt : Event
: boolean   

$latex(text: string, options: [string]:any): string

If text is not empty, sets the content of the mathfield to the text interpreted as a LaTeX expression. If text is empty (or omitted), return the content of the mahtfield as a LaTeX expression.

text : string
options : [string]:any
options.suppressChangeNotifications : boolean

If true, the handlers for the contentWillChange and contentDidChange notifications will not be invoked. Default false.

: string   

$perform(command: string | string[])

command : string | string[]

A selector, or an array whose first element is a selector, and whose subsequent elements are arguments to the selector. Note that selectors do not include a final "_". They can be passed either in camelCase or kebab-case. So:


both calls are valid and invoke the same selector.


Revert this math field to its original content. After this method has been called, no other methods can be called on the MathField object. To turn the element back into a MathField, call MathLive.makeMathField() on the element again to get a new math field object.

$selectedText(format?: string): string

Return a textual representation of the selection in the mathfield.

format : string = 'latex'

One of

  • 'latex'
  • 'latex-expanded' : all macros are recursively expanded to their definition
  • 'spoken'
  • 'spoken-text'
  • 'spoken-ssml'
  • spoken-ssml-withHighlighting
  • 'mathML'
  • 'json'

: string   

$selectionAtEnd(): boolean

Return true if the selection extends to the end of the selection group.

: boolean   

$selectionAtStart(): boolean

Return true if the selection starts at the beginning of the selection group.

: boolean   

$selectionDepth(): number

Return the depth of the selection group. If the selection is at the root level, returns 0. If the selection is a portion of the numerator of a fraction which is at the root level, return 1. Note that in that case, the numerator would be the "selection group".

: number   

$selectionIsCollapsed(): boolean

Return true if the length of the selection is 0, that is, if it is a single insertion point.

: boolean   

$setConfig(config?: MathFieldConfig)

Update the configuration options for this mathfield.

config : MathFieldConfig = {}

See Configuration options for details.

$text(format?: string): string

Return a textual representation of the mathfield.

format : string = 'latex'

One of

  • 'latex'
  • 'latex-expanded' : all macros are recursively expanded to their definition
  • 'spoken'
  • 'spoken-text'
  • 'spoken-ssml'
  • spoken-ssml-withHighlighting
  • 'mathML'
  • 'json'

: string   

$typedText(text: string)

Simulate a user typing the keys indicated by text.

text : string

A sequence of one or more characters.


Return the (x,y) client coordinates of the caret

_onAnnounce(target: object, command: string, oldMathlist?: Atom[], atomsToSpeak?: Atom[])private

Announce a change in selection or content via the aria-live region. This is the default implementation for this function. It can be overridden via config.onAnnounce

target : object

typically, a MathField

command : string

the command that invoked the change

oldMathlist : Atom[] = []

the previous value of mathlist before the change

atomsToSpeak : Atom[] = []

_onKeystroke(keystroke: string, evt: Event)private

keystroke : string
evt : Event

optional, an Event corresponding to the keystroke

complete_(options: object)private

When in command mode, insert the select command and return to math mode If escape is true, the command is discared.

options : object
options.discard : boolean

if true, the command is discarded and the mode switched back to math

options.acceptSuggestion : boolean

if true, accept the suggestion to complete the command. Otherwise, only use what has been entered so far.

constructor(element: HTMLElement, config: MathFieldConfig)private

To create a mathfield, you would typically use MathLive.makeMathField() instead of invoking directly this constructor.

element : HTMLElement

The DOM element that this mathfield is attached to. Note that element.mathfield is this object.

config : MathFieldConfig

See Configuration options for details


getTextBeforeAnchor_(): stringprivate

Return the characters before anchor that could potentially be turned into text mode. This excludes things like 'mop' (e.g. \sin)

: string   


Lay-out the math field and generate the DOM.

This is usually done automatically, but if the font-size, or other geometric attributes are modified, outside of MathLive, this function may need to be called explicitly.

smartMode_(keystroke: string, evt: Event): booleanprivate

Consider whether to switch mode give the content before the anchor and the character being input

keystroke : string
evt : Event

a Event corresponding to the keystroke

: boolean   

true if the mode should change

speak_(amount: string, speakOptions: object)

Speak some part of the expression, either with or without synchronized highlighting.

amount : string

(all, selection, left, right, group, parent)

speakOptions : object
speakOptions.withHighlighting : boolean

If true, synchronized highlighting of speech will happen (if possible). Default is false.