The main language is HTML5, which allows to create pages with headers, paragraphs, tables, hyperlinks, etc. The well-known CSS language is used to apply specific style to HTML5 and is powerful enough to produce advanced designs. Finally, DOM/Javascript provides a programming language and enables interactive documents and complex user interfaces. New HTML5 elements gives other possibilities. For example the document pendulum-20131125 of [Wang1] uses the the <video> tag to insert some sequences of a physics lecture.
For scientific documents, we need two other features: creating graphs, schemas, diagrams, etc. and writing mathematical formulas. For the former, simple PNG images might be enough. However, Web rendering engines also support the SVG language to let authors write scalable images using some simple drawing primitives. Many programs are available to generate scientific schemas in SVG formats. Mathematical equations can be viewed as an extension of text layout and thus requires a good integration within HTML as done by Gecko’s native MathML. The document demos/1-mathml-in-html.html shows how various font properties apply to MathML text via CSS, the good alignment of inline equations and its scalability.
One of the nice feature introduced some years ago in Gecko is the possibility to integrate MathML equations inside SVG images via the <foreignObject> element. People can then create scientific schemas with mathematical equations. We will also use this property in section 1.5 when we introduce <canvas>. See demos/2-mathml-in-svg.svg for an example of a SVG schema with MathML equations inside. Again, some authoring tools exist to help generating such schemas such as LaTeXML [LaTeXML].
demos/3-mathml-javascript.html is a small example of an interactive MathML formula. Javascript is used to allow the user to highlight parts of a 3-dimensional determinant and understand each term of the Sarrus’ rule. Note that no particular Javascript API is needed, one only modifies the MathML tree via the standard DOM interface and the rendering is automatically updated. This example is taken from [Wang1] which contains many other examples of this type.
To conclude this review, we briefly mention classical Web features like Unicode characters, advanced typographic features (e.g. kerning, ligatures), right-to-left directionality, copy and paste, automatic line breaking and accessibility to users with disabilities. In general, all these features are well handled by Web languages and rendering engines. The two first works well in Gecko’s MathML too and right-to-left MathML was also implemented four years ago [Bugzilla534963]. For the fourth one, we have proposed a MathML Copy add-on for Firefox as a temporary solution to [Bugzilla539506]. MathML line breaking [Bugzilla534962] is very important for small screens but to our knowledge, no CSS-compatible implementations exist. Finally, Mozilla’s intern Jonathan Wei has started some work on MathML accessibility in Gecko [Bugzilla916419] [Moz7]. We expect to see improvements to these three last points in order to get a complete Web platform for mathematical user interfaces.
