Skip to main content

MathType integrations architecture

In this article, we explain the architecture of the MathType integrations so you can choose the appropriate integration package for your development.

Caution

MathType Integrations deployments are available for HTML and XML editors. For other environments please check the deployments for MathType for Office Tools or MathType for LMS.

Note

A MathType integration deployment connects the customer's web-environment (web-based HTML or XML editors) and the MathType services (API/SDK), reponsible for MathType's functionalities ( i.e. render, accesibility, etc.).

Architecture

The architecture of a MathType integration deployments has the following three elements:

  • MathType integration frontend

  • MathType integration services

  • MathType editor services

Caution

Note that, although MathType editor services are a part of the architecture, they are not included in the MathType integrations downloadable packages.

integration_parts_2.png

This image describes a use case of a MathType integration in an HTML editor. See a detailed description in the Use case example section, below

MathType integration frontend

The frontend is a collection of static resources (Javascript, CSS) containing the logic that controls the integration of the HTML editor buttons. It calls the integration services and processes the response, all of these operations are performed by the Javascript API functions.

The frontend is available in all npm packages, here, and in the packages served here along with the MathType integration services.

MathType integration services

The integration services handle the requests coming from the frontend, calls the MathType editor services and process the responses. They are available in several server technology languages (PHP, Java, .NET, and Ruby On Rails).

The default configuration for npm packages installations uses the MathType integration services hosted in our servers in wiris.net.

However, MathType integration services can be hosted on your server. They are available in the downloadable packages here along with the frontend and they include the main configuration file that allows all the customizations described here.

Caution

We recommend installing these services if you require a fine-tuning or customization (i.e. cache storage location, proxy, image format, etc.). See below for further details on the functionalities available.

MathType editor services

The MathType editor services handle the MathType integration services requests processing the received MathML and returning the appropriate response depending on the service from MathType services (API/SDK).

MathType integration services by default use the services hosted on our servers in wiris.net.

However, they can be hosted on the customer server with the appropriate server components license. This will allow you the configure the properties described here.

Use case example

In the following steps, we detail a basic use case of a MathType integration deployment to exemplify the function of its main agents. You can refer to the schematic above to illustrate each of the steps.

  1. Once installed, the MathType integration frontend includes the MathType buttons in the HTML toolbar.

  2. When the MathType icon in the HTML editor toolbar is clicked,

  3. MathType integration frontend calls MathType integration services requesting them to open the editor.

  4. After that, MathType integration services call MathType services (API/SDK) and load the MathType editor interface.

  5. Once the user creates a formula in MathType editor interface and hits “Insert”,

  6. the MathML is converted into an image by the MathType editor render service.

  7. After that, the MathML is also converted into accessible text by the MathType editor services.

  8. An image and its accessible text are returned to the MathType integration services.

  9. The MathType integration services return the formula to the MathType integration frontend along with the accessible text.

  10. A formula is shown in the HTML editor as a formula image including accessible text.