Embedding and customization
Editor
This page explains how to embed the MathType in a Web page. If you're using the MathType editor with an HTML rich text editor, please see the section on MathType Integrations.
The embedding is compound by two steps. The first one is displaying the editor itself and the second one is calling the editor API to set and retrieve the MathML.
Inserting an editor in a Web page
You can create a new page with the following content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="https://www.wiris.net/demo/editor/editor"></script>
<script>
var editor;
window.onload = function () {
editor = com.wiris.jsEditor.JsEditor.newInstance({'language': 'en'});
editor.insertInto(document.getElementById('editorContainer'));
}
</script>
</head>
<body>
<div id="editorContainer"></div>
</body>
</html>
In the above code, the MathType is added into the container in the body. The actual insertion is done in the onload event. The variable editor is a global variable that will be used later to access the API. Setting and getting the MathML
Calling the editor API to get the MathML:
alert(editor.getMathML());
To set the MathML:
editor.setMathML("<html><math><mfrac><mn>1</mn><mi>x</mi></mfrac></math></html>");
Controlling the editor size
MathType will be resized to the same dimensions of the container. Following the example, to set a 500x300 editor you can define the container as
<div style="width:500px;height:300px" id="editorContainer"></div>
In any case, there is a minimal height of 200 pixels. You can also use relative dimensions:
<div style="width:100%;height:300px" id="editorContainer"></div>
Initialization parameters
Choosing the language
In the previous example, we passed the following parameter
{'language': 'en'}
which specifies to use English for the text in the user interface.
Hand
This page explains how to embed MathType hand, for recognition of handwritten math expressions, in a Web page.
The embedding process is compound by two steps. The first one is displaying the MathType hand canvas itself. The second one is the communication with MathType hand in order to retrieve the MathML of the handwriting recognition.
Inserting MathType hand in a Web page.
You can create a new page with the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="https://www.wiris.net/demo/hand/hand.js"></script>
<script>
var hand;
window.onload = function () {
hand = com.wiris.js.JsHand.newInstance();
hand.insertInto(document.getElementById('handContainer'));}
</script>
</head>
<body>
<div id="handContainer" class="editor-container"></div>
</body>
</html>
In the above code, MathType 7 hand is added into the container inside the body of the page. The actual insertion is done in the onload event. The variable hand is a global variable that will be used later to access the API. Getting the MathML of the handwriting recognition
Get MathML methods
The handwriting API has methods to get the MathML:
alert( hand.getMathML() );
And to set the MathML:
hand.setMathML("<math><msup><mfenced open='(' close=')'><mrow><mi>a</mi> <mo>+</mo><mi>b</mi></mrow></mfenced><mn>3</mn></msup></math>");
Hand defines an interface for listeners in order to manage the events of handwritten input and recognition. Using this simple interface we can fully interact with MathType hand. Below we can see the previous code for inserting MathType hand in a Web page extended to listen to the hand events and display the recognized MathML.
This code below includes a text area that displays the recognized MathML anytime the input changes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="https://www.wiris.net/demo/hand/hand.js"></script>
<script>
var hand;
window.onload = function () {
hand = com.wiris.js.JsHand.newInstance();
hand.insertInto(document.getElementById('handContainer'));
hand.addHandListener({
contentChanged: function (instance) {
document.getElementById('result').value = hand.getMathML();
},
recognitionError: function (instance, msg) {
document.getElementById('result').value = "Error: " + msg;
},
strokesChanged: function(instance) {}
});
}
</script>
</head>
<body>
<div id="handContainer"></div>
<textarea id="result" rows="8" cols="80"></textarea>
</body>
</html>
Getting and setting the MathType handwriting content
MathType HAND manages two different fields of information:
the handwritten input strokes
the recognized MathML.
In addition to the methods getMathML and setMathML previously shown, the API also defines the methods getMathMLwithStrokes and setStrokes.
getMathMLwithStrokes returns the current MathML containing the input strokes as a semantic annotation node.
var mml = hand.getMathMLwithStrokes();
The variable mml could have the following value:
<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics> <msup><mi>x</mi><mn>2</mn></msup><annotation encoding="application/json">{"version":"2.0.0","x":[[223,223,230,238,249,264,273,284,291,296,296],[290,289,287,284,278,271,256,246,243,242,240,240],[320,320,323,327,333,340,348,353,354,354,354,354,354,354,353,348,345,338,332,325,320,314,313,314,316,322,327,335,341,348,352,357,360,366,371,377,381,381,380]],"y":[[217,218,221,231,238,251,260,268,273,276,274],[215,216,222,229,236,245,262,272,278,281,284,286],[162,161,158,155,152,151,151,151,151,152,154,157,163,170,177,183,188,193,195,198,198,198,198,198,200,201,204,207,211,212,214,214,214,214,212,208,205,204,204]],"t":[[0,21,37,54,70,88,104,120,138,154,215],[552,570,588,604,621,638,655,671,688,705,722,738],[1623,1671,1689,1705,1722,1738,1756,1773,1789,1815,1832,1839,1856,1871,1888,1906,1921,1938,1954,1973,1988,2005,2023,2160,2174,2190,2205,2223,2240,2255,2272,2289,2307,2322,2339,2357,2373,2391,2440]]}</annotation></semantics></math>
This MathML including the input strokes can be set using the regular setMathML method such that the handwritten input will also be loaded.
hand.setMathML( mml );
We can also set only the strokes (without MathML) and MathType HAND will recognize them:
hand.setStrokes('{"version":"2.0.0","x":[[223,223,230,238,249,264,273,284,291,296,296],[290,289,287,284,278,271,256,246,243,242,240,240],[320,320,323,327,333,340,348,353,354,354,354,354,354,354,353,348,345,338,332,325,320,314,313,314,316,322,327,335,341,348,352,357,360,366,371,377,381,381,380]],"y":[[217,218,221,231,238,251,260,268,273,276,274],[215,216,222,229,236,245,262,272,278,281,284,286],[162,161,158,155,152,151,151,151,151,152,154,157,163,170,177,183,188,193,195,198,198,198,198,198,200,201,204,207,211,212,214,214,214,214,212,208,205,204,204]],"t":[[0,21,37,54,70,88,104,120,138,154,215],[552,570,588,604,621,638,655,671,688,705,722,738],[1623,1671,1689,1705,1722,1738,1756,1773,1789,1815,1832,1839,1856,1871,1888,1906,1921,1938,1954,1973,1988,2005,2023,2160,2174,2190,2205,2223,2240,2255,2272,2289,2307,2322,2339,2357,2373,2391,2440]]}');
Controlling the canvas size
MathType hand will be resized to the same dimensions of its parent container. Following the example, to set a 500x300 canvas you can define the container as
<div style="width:500px;height:300px" id="handContainer"></div>
You can also use percentual dimensions:
<div style="width:100%;height:300px" id="handContainer"></div>
MathType HAND customization
It is possible to define the style of MathType hand, such as the handwriting width and color:
{'lineWidth':5, 'lineColor':'#ABCDEF'}
or the size of the recognized math expression
{'previewZoom':2.0}
These parameters can be set when a new instance is created
hand = com.wiris.js.JsHand.newInstance({'previewZoom':2.0});
or using the function setParams
hand.setParams({'previewZoom':2.0});
Any other style customization can be achieved by modifying the CSS.
Displaying handwritten equations
MathType hand has a read-only mode such that input and recognition are disabled but MathML and strokes can be displayed, for instance:
hand = com.wiris.js.JsHand.newInstance({'readOnly':true});
hand.setMathML( mml );