Full MathML mode - WIRISplugins.js

The full MathML mode is the default mode of MathType Integrations from version 3.50.x. Using this mode, all formulas are saved as MathML and sent also as MathML to the browser at presentation time.

Because you can edit more formulas with MathType than the native MathML capabilities of some current browsers, you need to include a JavaScript command in the header of your page to convert the MathML into quality formula images:

<script src="<your-plugin>/integration/WIRISplugins.js?viewer=image"></script>

For Java plugins:

<script src="<pluginwiris-engine-path>/app/WIRISplugins.js?viewer=image"></script>

Note: From versions 3.50.0 to 3.52.x this file location was <your-plugin>/core/WIRISplugins.js

Another benefit of the above script is that provides accessibility to the formulas because it adds a textual representation of the formula in the ALT attribute of the image.

Image mode / Upgrading from versions older than 3.5x.x

In versions older than 3.5x.x the default mode was the image mode (formulas were saved as img tags). You can enable the image mode in newer versions if you need it adding this variable in your configuration.ini file:

wiriseditorsavemode=image wirisimageformat=png

If you use the image mode in versions higher than 4.0 you should disable the performance mode: wirispluginperformance=false

Please note that you only need to include WIRISplugin.js script if you use the full MathML mode.

For integration versions 3.50 and higher

Full MathML mode is the default mode for 3.50.x and higher plugins. You don't need any additional configuration. You only need to include the WIRISplugins.js script.

For integration versions previous to 3.50

To enable full MathML mode, edit the following file according to your Wiris integration:

Integration File
CKEditor ckeditor/plugins/ckeditor_wiris/plugin.js
FCKEditor fckeditor/editor/plugins/fckeditor_wiris/fckplugin.js
Radeditor radeditor_wiris/radeditor.js
TinyMCE tiny_mce/plugins/tiny_mce_wiris/editor_plugin.js
Xinha xinha/plugins/xinha_wiris/xinha_wiris.js
Generic pluginwiris/integration/integration.js

And set the variable _wrs_conf_saveMode with value "xml". Then, do not forget to include the WIRISplugins.js script.

Note. This script only works for MathType Integrations from version 3.50 and higher.

The WIRISplugins.js is the responsible of converting the MathML into images. It admits the following parameters:

Parameter name Description Values Default value
viewer Sets the viewer mode for the MathML. "image” means display as image. image, none none
lang Sets the language for the accesible text. "inherit" means that the language is selected from the lang attribute of the top html tag. en, es, inherit inherit
dpi Sets the dpi of the images. Used to get better quality for printing but formulas might appear blur in the screen. number 96
async Specifies if the viewer should render the formulas asynchronously true/false false

You can apply WIRISplugins script to a particular DOM element:

  com.wiris.js.JsPluginViewer.parseElement(domElement, true, function(){})

All MathType formulas contain MathML. Hence there's really no conversion involved from images into MathML, but there is a way to retrieve the MathML that's already there. As an example, consider this img tag from a MathType formula published to WordPress. The code from other integrations will vary, but all will contain the attributes mentioned below. This is the formula f left parenthesis x right parenthesis equals x squared:

<html><math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle mathsize="18px"><mi>f</mi><mfenced><mi>x</mi></mfenced><mo>=</mo><msup><mi>x</mi><mn>2</mn></msup></mstyle></math></html>

To migrate your content from img tags to MathML, follow these steps:

  1. Find all your img tags with Wirisformula class (i.e. with a regular expression).
  2. Use the value of their data-mathml attribute and make these replacements:
    Replace             With
   «     (#AB)     <    (#3C)  
   »     (#BB)     >    (#3E)  
   §     (#A7)     &    (#26)  
   ¨     (#A8)     "    (#22)  
   `     (#60)     '    (#27)  

  1. Replace the img tags with the re-encoded MathML from step 2. You can see in the img tag above, MathType has used «mi», mathsize=¨18px¨, etc., so that's why it's necessary change these back to <mi>, mathsize="18px", etc.