-
MathType
-
Wiris Quizzes
-
Learning Lemur
-
CalcMe
-
MathPlayer
-
Store FAQ
-
VPAT for the electronic documentation
-
MathFlow
-
BF FAQ
-
Miscellaneous
Full MathML mode - WIRISplugins.js
Reading time: 3minThe 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 |
« (#BB) |
< (#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.