Interactivity on LaTeX2Web: part 1

We give some insight on the JavaScript libraries which are used in LaTeX2Web to offer you a rich, interactive experience when reading the documents.

The LaTeX2Web modules

LaTeX2Web has its own library which provides the following functionalities:

• The section controller is responsible for the implementation of the outline behavior of the LaTeX2Web pages. Specifically, this controller handles the click events that are sent when you click on the title of a section. Depending on the state of the section, it will expand its content, or collapse it.
• The ref and bibref controllers are responsible for the display of cross-references. If the reference is not displayed, they fetch the reference content from the document and display it just below the active LaTeX2Web object (usually a paragraph). They delete this reference content when you have clicked on it for that purpose.
• The footnote controller does the same for footnotes.
• The TOC controller generates a table of contents on the fly.

Beyond this, there are quite a few controllers that are responsible to manage the requests and responses from the server. More on this in a future post.

Third party libraries

Equations

MathJax renders equations in the browser, with support for AMSmath. The stable version (which is used by default) is version 3. Version 4 in currently in beta, but it supports line breaking in equations, which can be very useful on mobile.

Images

When you click on an image, a bar of control icons are displayed. The use of these buttons are the following:

• The first three buttons use the Panzoom library to enable pan and zoom on images.
• The last one opens a lightbox for the image, using the GLightbox library. Within the lightbox, you can navigate across the whole set of images which are present in the document. Each image has a caption, which is a plain text translation of the image caption in the document.

Code editor

All the code editing tasks in LaTeX2Web use the Ace library.

Syntax coloring

The popular highlight.js library is responsible for the syntax coloring of the code blocks in your document.

Notifications

Notifications (which appear notably after LaTeX2Web operations) are managed by the Simple Notify library.

Algorithms

Instead of implementing the various LaTeX algorithm packages by ourselves, we rely on the pseudocode.js library to render the algorithms.

Client-server interactions

This will be the subject of future posts.