Paginating Math

Paged.js can work with other JavaScripts to extend the type of content you are trying to produce. Today we will look at a very simple use case: the addition of an external script transforming Math content.

A math paper may contain many mathematical equations that must be rendered correctly like this:

To do this with paged.js we can use MathJax, a JavaScript engine to display mathematics equations in browsers. It can translate expressions written in AsciiMath,  LaTeX or MathML.

To use Mathjax with paged.js, we need to run it before the content is fragmented into pages.

By default, paged.js will run as soon as the DOM is ready. However, you can add an async before function or return a promise to delay parsing the content until other libraries have finished with it.

    window.PagedConfig = {
        before: () => {
            return new Promise(resolve, reject) {
                var mjAPI = require("./lib/main.js");
            }
        },
        after: (flow) => { console.log("after", flow) },
    };

MathJax lets you add a function to their queue to run when all the typesetting has finished, rather than returning a promise. So we can disable the auto run of the previewer and call window.PagedPolyfill.preview(); when it has finished typesetting the math.

   window.PagedConfig = {
        auto: false
    };

    MathJax.Hub.Queue(function () {
      window.PagedPolyfill.preview();
    });

By using the first method with MathJax, it is very easy to transform HTML with math into a PDF. The below is an example of this done with a math paper.

You can download the pdf here.

The source code for this example is available on the paged media gitlab, in a repo with several other little experiments you can explore.

This post was written by Julie Blanc

Julie Blanc is a graphic designer and student-researcher at EnsadLab-Paris. She works on the PagedMedia initiative and is an active participant in PrePostPrint (a group of people who meets at events for discuss on alternative free publishing). Her work and research focuses on the design of multi-media, multimodal and / or hybrid editorial objects and the development of publishing chains through design practice. She uses the concepts of programming through web technologies (HTML5, CSS3, javascript, epub) for both digital and printed objects."

Leave a Reply

Your email address will not be published.