Skip to main content

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.

Add a <script> to <head>

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.

If you are using just a JS frontend without plugin services, you might link WIRISplugins.js directly from our servers, like so:

<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>

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.

Enable 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.

WIRISplugins.js parameters

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

MathML to images asynchronously

You can apply WIRISplugins script to a particular DOM element:

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

Convert MathType <img> tags to MathML

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.

<img class="Wirisformula" style="max-width: none; vertical-align: -3px;" role="math" src="/.../tiny_mce_wiris/integration/showimage.php?formula=2da5bc116dd2d3d32c5726903aa31404&cw=74&ch=23&cb=20" alt="size 18px f begin mathsize 18px style stretchy left parenthesis x stretchy right parenthesis end style size 18px equals size 18px x to the power of size 18px 2" width="74" height="23" align="middle" data-mathml="«math xmlns=¨http://www.w3.org/1998/Math/MathML¨»«mi mathsize=¨18px¨»f«/mi»«mstyle mathsize=¨18px¨»«mo stretchy=¨true¨»(«/mo»«mi»x«/mi»«mo stretchy=¨true¨»)«/mo»«/mstyle»«mo mathsize=¨18px¨»=«/mo»«msup»«mi mathsize=¨18px¨»x«/mi»«mn mathsize=¨18px¨»2«/mn»«/msup»«/math»">

This is the formula 𝑓(𝑥)=𝑥2, in MathML:

<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)

  3. 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.

In this section: