Documentation / MathType

  • Demos
  • Visit our website
  • Downloads
  • Contact us
  • MathType

    • Wiris Quizzes

      • Learning Lemur

        • CalcMe

          • MathPlayer

            • Store FAQ

              • VPAT for the electronic documentation

                • MathFlow

                  • BF FAQ

                    • Miscellaneous

                      • Home
                      • MathType
                      • MathType Integrations
                      • Technical configurations
                      • Technical configurations

                      Embedding and customization

                      Reading time: 5min

                      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

                      See full table of the 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 );

                      Was this article helpful?

                      Yes
                      No
                      Give feedback about this article

                      Related Articles

                      • Using MathType with WordPress
                      • MathType API documentation
                      • MathType MTEF v.5 (MathType 4.0 and later)

                      Embedding and customization

                      Editor Inserting an editor in a Web page Calling the editor API to get the MathML: Controlling the editor size Initialization parameters Choosing the language Hand Inserting MathType hand in a Web page. Get MathML methods Getting and setting the MathType handwriting content Controlling the canvas size MathType HAND customization Displaying handwritten equations

                      Making people’s STEM work more meaningful

                      MathType

                      • MathType for Office Tools
                      • MathType for Mac
                      • MathType for Microsoft 365
                      • MathType for Google Workspace
                      • MathType for LMS
                      • MathType for XML Editors
                      • Arabic notation
                      • Our products accessibility
                      • MathType is online

                      WirisQuizzes

                      Learning Lemur

                      Solutions for Education

                      • Blackboard Learn
                      • Brightspace by D2L
                      • Canvas
                      • Google Classroom
                      • Moodle
                      • Schoology

                      Solutions for Publishing Houses

                      Solutions for Technical Writers

                      Solutions for Chemistry

                      Integrations

                      • HTML Editors
                      • MathType in WordPress

                      Pricing

                      Company

                      Careers

                      Blog

                      Contact Us

                      Buy Now

                      Plugin Downloads

                      © Wiris 2025

                      • Cookie Settings
                      • Cookie Policy
                      • Terms of Use
                      • Privacy Policy / GDPR
                      • Student Data Privacy
                      • Compliance
                      • Powered by Helpjuice
                      Expand