Firefox OS Web Apps for Science
Raniere Silva and Frédéric Wang
Mozilla MathML Project
June 10, 2014

Abstract
In this document, we describe recent work made by the Mozilla MathML team to help publishingscientiﬁc content using Web technologies. We focus on the Firefox OS platform currently being developedby Mozilla that provides a good framework to create mathematical user interfaces on mobile devices.

Contents
1 The Web Platform
1.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2 Basic HTML5 Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3 Styling of Mathematics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.4 TeXZilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.5 Advanced HTML5 Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3
3
3
4
4
5

2 Firefox OS
2.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2 Math Suite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3 Math Cheat Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4 TeXZilla App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5 DynAlgebra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6
6
6
7
7
8

A The Web Platform
12
A.1 1-mathml-in-html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
A.2 2-mathml-in-svg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
A.3 3-mathml-javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
A.4 4-mathml-fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
A.5 5-canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
A.6 6-mathml-in-webgl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
A.7 7-web-component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
B Firefox OS Apps
17
B.1 Math Cheat Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
B.2 TeXZilla App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
B.3 DynAlgebra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

1

Introduction
The Web has become an integral part of our daily life. Some of the reasons for its success are its open
nature and the way it enables anyone to get access to knowledge and to create his own projects. The Mozillacommunity has worked since the early days of the Web to guarantee openness, innovation and opportunity[Moz1].
The Web was created at the CERN to share knowledge between researchers [W3C1]. But although it
was invented by scientists, we still have not seen the same positive impact on scientiﬁc practice. There are
two main reasons that could explain this situation and they are actually related to each other.
The ﬁrst one is a human problem. Researchers have kept teaching students to write papers for publicationin journals and to avoid sharing their detailed results because of competition between academic groups. Thismeans that most scientists ignore how to use tools to publish Web content and do not have the culture of
openness and collaboration. Mozilla Science Lab was launched last year to remedy that problem and build
educational resources, tools and prototypes for the research community [Moz2].
The second one is more technical. At the beginning of the Web, we had no tools to write scientiﬁcdocuments that could eﬀectively replace the traditional authoring tools for publication on papers. Even if
some tools are now available 1 they are still not used during the early years of undergraduate and graduate
courses. In science, there is one extra technical problem: we still lack a cross-compatible way to publish
mathematics on the Web despite the publication of the MathML standard in 1998 [W3C2]. The Mozilla
MathML Project [Moz3] was launched in 1999 and in a few years, the team produced a good MathML
implementation in Gecko together with tools to publish mathematics on the Web. MathML ﬁnally became
part of HTML5 thanks to Mozilla’s eﬀort [Moz4], but other Web rendering engines still have limited support
or even no support at all [Oreilly1]. This means that scientists either stay outside the Web (e.g. exchange
only PDF documents) or rely on some workarounds (PNG images, CSS stylesheet, Javascript polyﬁlls 2 ) to
publish mathematical content on the Web, with their inherent limitations and issues.
In recent years, the mobile market has grown considerably and more and more people are using mobile
devices to access the Web. Mozilla has been working on Firefox OS, an open-source operating system forthese mobile devices that relies exclusively on open standards and in particular Web technologies [Moz5].
Thanks to Gecko’s good support for MathML and HTML5 in general as well as Mozilla’s long experience
with community involvement, we now have the opportunity to build a family of scientiﬁc Web applications
compatible with Firefox OS devices. Some of the early prototypes created by the Mozilla MathML team arepresented in this paper.
In a ﬁrst part, we will review the Web platforms and focus on how the technologies can be used forscience. We will present the classical features as well as more recent improvements that have been integrated
into Mozilla projects recently such as the Open Type MATH table, WebGL, Web Components or TeXZilla.
Some of this work has been made during the crowdfunding project “Mathematics in ebooks” which has also
resulted in the creation of a collection of scientiﬁc documents using advanced Web technologies [Wang1].
In a second part, we will study how to use these technologies to write Firefox OS Web apps for science.
We will give an overview of the general format, which is essentially just an archive of Web pages together
with a manifest. We will discuss the big picture for a Math Suite and present three Web apps we started
to develop: a math cheat sheet, a note-taking app for math and ﬁnally an app to help doing algebraic
calculations similar to Epsilonwriter at MathUI’13 [Nicaud2].
The authors have written this paper using collaboration tools like GitHub and all the sources, programsand tools presented here are open. Because PDF format has been requested for submission to the MathUI
workshop, we had to provide our demos separately instead of integrating them directly into the document.
We try to provide some screenshots in appendix but they will not replace real testing and we strongly invite
the reader to test the demos in a Gecko browser. A Web version of that document is also available for online
reading.
1 For example, the authors used git for version control and LaTeXML to produce HTML pages from LaTeX
2 This is a term used by Web developers to describe code providing a technology that is expected to be supported natively
by browsers

2

1

The Web Platform

1.1

Overview

All the technologies presented in this section are based on Web standards and should be supported by any
Web rendering engine. We will particularly be interested in Gecko which has the best native MathML
support and is the core of Firefox OS. We will present some of the improvements that have been made by
the Mozilla MathML team.
All these technologies should be usable in HTML documents. This obviously includes Web pages but also
EPUB ebooks, HTML mails, browser add-ons or Firefox OS Web apps. For example, it is possible to receiveand send emails with mathematical equations using Thunderbird or Seamonkey’s mail client [Wang2]. In
this paper, we will mainly focus on Firefox OS Web apps but one should keep in mind that all the features
apply in other contexts too.

1.2

Basic HTML5 Features

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 speciﬁc 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 thedocument pendulum-20131125 of [Wang1] uses the the <video> tag to insert some sequences of a physics
lecture.
For scientiﬁc 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 renderingengines also support the SVG language to let authors write scalable images using some simple drawing
primitives. Many programs are available to generate scientiﬁc schemas in SVG formats. Mathematicalequations can be viewed as an extension of text layout and thus requires a good integration within HTMLas done by Gecko’s native MathML. The document demos/1-mathml-in-html.html shows how various fontproperties 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 scientiﬁc 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 isused 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 modiﬁes the MathML tree via thestandard 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 brieﬂy 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 ﬁrst 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] isvery 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.

3

1.3

Styling of Mathematics

As seen in section 1.2, one can use CSS the standard way to apply speciﬁc styles to mathematical equations.
However, perhaps the most important style that scientists and publishers want is the rendering with a given
mathematical font. Gecko has always used TeX heuristics to position scripts, fractions, roots, etc. However,there are many parameters that depend on
fontdimen parameters and others on built-in rules in TeX’s typesetting engines, which are not exposed toa HTML5 rendering engine a priori [Vieth]. Moreover, in order to draw stretchy and large operators the
MathML code requires to pick and assembly speciﬁc glyphs from math fonts. So far, Gecko only knows alimited set of Unicode constructions and also has a few private per-font tables. This means that without oneof the supported fonts installed, the quality of the MathML rendering could be very low.
In order to solve that problem, we have started to implement the OpenType MATH table which iscurrently undergoing standardization as ISO/IEC CD 14496-22 “Open Font Format” [MPEG1]. We havestarted to use this table in order to provide a generic support for MATH fonts and a partial support isavailable in Firefox 31. Note that MathML does not specify a precise way to render mathematical formulas
and leave the details to the implementers. Relying on the MATH table will give more control to professional
font designers. In a nutshell, the main features are:
1. Some OpenType Tags to provide alternate form of glyphs. For example, we implemented the ”ssty”
feature to adjust the size of glyphs like primes when they are used as scripts.
2. Font parameters to deﬁne precisely the gaps, shifts, kerning, etc. of mathematical objects. Most ofthem are extensions to the TeX rules so it is easy to integrate them into our MathML rendering engine.
3. Font parameters speciﬁc to each glyph. At the moment, we only considered italic corrections.
4. A table to draw stretchy and large operators such as parenthesis, radicals or summation symbols. We
have started to use that table for our operator stretching code.
There are various mathematical fonts with an OpenType MATH table available and most of them are
distributed with a TeX Live distribution. Windows and Mac systems have respectively Cambria Mathand STIX installed by default. We have also experimented with PackageKit auto-installation on Linux[PackageKit], we plan to install math fonts on Firefox OS and tried other another auto-installation method
for Android. In any case, fallback downloadable Web fonts can also be used. This means that missing
mathematical fonts will become very unlikely in the future.
The page demos/4-mathml-fonts.html shows how to get various font style for a document: Asana, TeX
Gyre Bonum, TeX Gyre Pagella, TeX Gyre Termes, Latin Modern, Neo Euler and XITS. You need a browser
with Gecko 31 or higher in order to see the appropriate rendering.

1.4

TeXZilla

Mathematical formulas are complex and hence writing mathematics is diﬃcult. Some tools like WYSIWYG
editors or handwriting recognition might help. One input method easy to implement is the conversion froma simple syntax like LaTeX into MathML. Even if there are tons of such converters, only a few of them are
implemented in Javascript. Moreover the remaining ones try to tweak the output to workaround browser
limitations, are not standalone Javascript module usable in add-ons and do not work with Unicode charactersor right-to-left mathematics. Hence we decided to write yet another converters to focus on Mozilla’s needs.
We thus wrote TeXZilla [Wang3], a LaTeX-to-MathML converter generated with the help of Jison. It
relies on a LALR(1) grammar and on the unicode.xml ﬁle of [W3C3], which contains an extensive list ofUnicode characters used in science together with some semantic property and LaTeX commands to produce
them. It accepts arbitrary Unicode input as well as right-to-left mathematics, something that is important
for the world-wide aspect of the Mozilla community and more speciﬁcally Arabic mathematics.
The public API contains a toMathML function to convert a LaTeX string into a MathML DOM but alsoa toMathMLString function when the DOM is not available (e.g. in nodejs). There is also a convenient4

getTeXSource function to extract the LaTeX source from the MathML output and a toImage function toembed the MathML output inside a SVG image (see section 1.5).
TeXZilla can work in any CommonJS program [CommonJS], in Web pages, as a command line programor as a Web server. We have submitted a Firefox add-on that has been approved by the reviewers. We havealso already integrated it into various other Mozilla tools: in CKEditor for the Mozilla Developer Network,in the Seamonkey/Thunderbird composers or in a Firefox OS web app (see section 2.4). Finally, a prototype<x-tex> custom element is also available (see section 1.5). We expect it will become an important libraryfor future scientiﬁc applications.

1.5

Advanced HTML5 Features

The <canvas> element has been introduced in HTML5 to draw graphics via JavaScript. This element may
be more convenient than SVG in situations where you want to generate schemas dynamically. For example
demos/5-canvas.html shows the typical graphs associated to a RLC circuit that are automatically updated
when the user changes the frequency of the current. It is also possible to use WebGL [WebGL], opening
the possibility to draw 3D scientiﬁc schemas. For example chemdoodle relies on WebGL to provide 3D
representation of chemical structures.
Similarly to SVG, 2D/3D scientiﬁc schemas created via the <canvas> might require mathematical formulas. This is possible since we saw in section 1.2 that MathML can be inserted in SVG via a <foreignObject>and moreover SVG images can be inserted in both the CanvasRenderingContext2D and WebGLRenderingContext.
One can for example use TeXZilla’s toImage function to generate such SVG images dynamically. For instance, the page demos/6-mathml-in-webgl.html shows an example of a 3D schemas for the magnetic ﬁeldof a circular current loop. Again, see [Wang1] for more examples.
One of the recent HTML5 features that is currently being implemented in Web rendering engines is Web
Components [WebComponents]. The idea is to allow Web developers to create their own custom HTMLelements. These elements are made of the so-called shadow tree, which is an “internal” representation frombasic elements and CSS style to which we attach some behaviors with DOM events and Javascript. This is
typically useful to create some reusable widgets. Mozilla’s Brick project is a collection of such elements andcontains many demos [Moz6]. Web Components are currently not fully implemented natively in browsers
but some polyﬁll libraries like X-Tag allows to emulate their behavior [Moz6].
Web components can obviously be very helpful to design user inteface for scienciﬁc Web app. For
example, the speciﬁc interactive drawing of demos/5-canvas.html for RLC circuits could become a genericwidget <x-graph> to draw scientiﬁc graphs with some user interface to conﬁgure the curve parameters. As aproof-of-concept, we have used the X-Tag library to create a custom <x-tex> tag. The behavior is simply toautomatically converts its LaTeX content into MathML using TeXZilla, see demos/7-web-component.html.
The Mozilla MathML team is following the developments in Web components and plans to create morecustom elements for scienciﬁc web apps, so that Web developers can reuse them.

5

2

Firefox OS

2.1

Overview

As said before, Firefox OS is the open-source operating system targeting mobile devices that is being developed by Mozilla and based on Web technologies [Moz5]. All the apps in Firefox OS are Web pages,
provided by a server or stored on the device, built using only Web technologies and, except when somespecial Javascript API are required, can also run in a Web browser.
To create an app from a previous Web page you only need a manifest ﬁle that stores some metadata
about the app and an image to use as icon. The ﬁles demos/app/manifest.webapp and demos/app/icon.png,
respectively a manifest and an icon, show these extra ﬁles needed to create an app for demos/app/index.html,
a very basic static HTML page.
Although the Web was invented to share knowledge, today it is also used as a platform to create knowledge(e.g. Wikipedia) and in a near future signiﬁcant part of the content created on the Web will be done using
mobile devices. For science there are some Web authoring tools for publication on papers focus on desktop
users but only a small number deals with math and none are optimized for mobile devices.
This lack of tools to deal with math can be addressed by a “Math Suite” that we describe in the next
section followed by some of the demos written by the Mozilla MathML community.

2.2

Math Suite

According to Wikipedia, “an oﬃce suite [...] is a collection of productivity programs intended to be used byknowledge workers”. Similarly, we would like to develop a “Math Suite”, that is a collection of software tools
intended to be used by someone who makes intensive use of math.
The basic components of a Math Suite are a text processor with math support and a symbolic mathprogramming language, like Mathematica, but the suite could also have:• copy & paste;• search engines for math expressions;• a WYSIWYG math editor;• markup converters (e.g. LaTeX to MathML and MathML to LaTeX);• handwriting recognition;• a 2D drawing tool that helps with, for example, demos/2-mathml-in-svg.svg;• a 3D drawing tool that helps with, for example, demos/6-mathml-in-webgl.html;• a scripting tool that helps with, for example, demos/3-mathml-javascript.html;• accessibility to users with disabilities;• a virtual keyboard for math• and more.
Many of the applications, whether or not they are part of the Math Suite, share a set of functions. For
example the search engine can be used by a text processor and by an ebook reader. Having these functions
available in an open source Javascript library will make easy to develop new Web applications that can becustomized into standalone applications to run on desktop and mobile devices. Figure 1 illustrates some of
the applications that can compose the Math Suite, the features made available by the Javascript Library
and which feature is used by which application.
The authors of this work started writing this Javascript library as small independent modules together
with some prototype demos that use them. The prototypes described below were developed for Firefox
6

Math Suite
Editor

2D Drawer

Animation

Reader

Copy/Paste

InsertInteract

SearchMath Javascript Library
Figure 1: Illustration of Math Suite.
OS but also work with any browser that supports HTML5 with MathML and are available on the Firefox
Marketplace.
One of the authors will also implement a virtual keyboard for Firefox OS as part of the 2014 editionof Google Summer of Code [Bugzilla1004057]. So far the most used method to input math on the Web is
LaTeX, e.g. Wikipedia and phpBB. Unfortunately typing LaTeX code on a mobile device is hard because toaccess some useful characters, e.g. ˆ, and \, the user needs to switch the keyboard. This virtual keyboard
project is intended to help writing such mathematical expressions faster.

2.3

Math Cheat SheetThis is a basic app with a collection of common K-12 equations available at http://r-gaia-cs.github.io/mathcheat-sheet/. The equations are organized in sections and a table of contents is provided to help jumping
from one section to another.
Although it is a basic app it is a nice way to show that Firefox OS supports MathML and create demand
for some features not available right now like copy and paste (only the unstable version of Firefox OS
supports copy and paste and the desktop version of Firefox requires the MathML Copy add-on), automaticline breaking and accessibility to users with disabilities.
The math authoring tool used in this app was TeXZilla, see section 1.4, because it allows the conversionof LaTeX into MathML and keeps the original LaTeX source code available. This is useful, for example, tocopy an equation and paste it into Wikipedia.
Other nice features that can be added to this app in the future include:• link to resource like Wikipedia related to the equation,• search bar to quickly ﬁnd the desired equation,• customization of equations, . . .

2.4

TeXZilla App

This is a note-taking app for math available at http://r-gaia-cs.github.io/TeXZilla-webapp/. It takes a
LaTeX expression as input, shows a preview of it refreshed during input and enables the user to save it.
The conversion from LaTeX to MathML is performed by TeXZilla (see section 1.4) and no internet
connection is required. The save functionality uses IndexedDB, “an API for client-side storage of signiﬁcantamounts of structured data and for high performance searches on this data using indexes” [W3C4].
This app also has some experimental buttons to help the user to enter LaTeX commands like \frac and\sqrt. These buttons will be removed once the math virtual keyboard mentioned at the end of section 2.2
is available.

7

Right now, it is only possible to add math expressions but nice features that can be added to this app in
the future include adding text around the math expressions and having more than one “piece of paper” fornotes.

2.5

DynAlgebraThis is a Dynamic Algebra [Nicaud1], “algebraic calculations on a computer by direct manipulation”, app
available at http://r-gaia-cs.github.io/DynAlgebra/. The idea of Dynamic Algebra is about twenty years
old and could help students to learn formula structure and transformations and help every users to produce
step by step calculations. However, most of the previous implementations have not been successful.
The last known implementation of Dynamic Algebra was done in EpsilonWriter [Nicaud2] as a Javaapplication and covers:
internal drag & drop like converting x + y into y + x,
external drag & drop like dropping a formula on another formula,on click calculation like converting x + x into 2x by click on + andrewriting rules like converting x−n into x1n .
Our app, written in Javascript, is still at a prototype level compared to EpsilonWriter since it only partiallycovers the “on click calculation” and does not have a WYSIWYG input interface (currently TeXZilla is used).
However, it uses MathML as storage format, which makes possible to work in documents not intended to be
used for Dynamic Algebra.

8Conclusion
In this paper, we have reviewed the HTML5 features and how they could be used to write mathematicaluser interfaces. In particular, good MathML support is essential to write mathematics in Web apps in a
way that is compatible with the classical HTML, CSS, Javascript/DOM and SVG features. We have alsopresented some of the improvements to mathematical styling in Gecko based on OpenType MATH fonts. We
then gave an overview of TeXZilla, a standalone LaTeX-to-MathML converter compatible with Unicode thatcan easily be integrated in Web apps. Finally, we studied advanced HTML5 features like canvas, WebGL
and Web Components and mentioned how they could be used to create 3D-schemas, animations or complex
user interfaces. These are suitable to share knowledge in science and help explaining complex concepts moreeasily, in an interactive way.
In a second part, we explained how these HTML5 features can be used to create Firefox OS Web apps
and we provided concrete use cases like a note-taking math app, a math cheat sheet or an interactive app
for algebraic manipulations. The idea is to rely on Firefox OS to build a platform for science, not only to
consult knowledge but also to generate new knowledge as shown in some of the demos presented in thispaper. Although, these apps are still prototypes we expect we will improve them in the future and createa real math suite for mobile platforms. We expect that new contributors could get involved and that theoriginal ideas shared at the MathUI workshop could in turn become real Firefox OS apps.

9References[Bugzilla534962] Improve MathML linebreaking
Mozilla Bug 534962
https://bugzilla.mozilla.org/show bug.cgi?id=534962[Bugzilla534963] Mechanisms for controlling the Directionality of layout
Mozilla Bug 534963
https://bugzilla.mozilla.org/show bug.cgi?id=534963[Bugzilla539506] Implement clipboard speciﬁcation
Mozilla Bug 539506
https://bugzilla.mozilla.org/show bug.cgi?id=539506[Bugzilla916419] Expose MathML as a hierarchical accessible tree
Mozilla Bug 916419
https://bugzilla.mozilla.org/show bug.cgi?id=916419[Bugzilla1004057] Math virtual keyboard
Mozilla Bug 1004057
https://bugzilla.mozilla.org/show bug.cgi?id=1004057[CommonJS] CommonJS, “a group with a goal of building up the JavaScript ecosystem for web servers,
desktop and command line apps and in the browser”.
http://wiki.commonjs.org/wiki/CommonJS[Moz1] Mozilla’s Mission
https://www.mozilla.org/en-US/mission/[Moz2] Mozilla Science Lab
http://mozillascience.org/[Moz3] Mozilla MathML Project
https://developer.mozilla.org/en-US/docs/Mozilla/MathML Project[Moz4] MathML-in-HTML5
mozilla.dev.tech.mathml
https://groups.google.com/forum/#!topic/mozilla.dev.tech.mathml/eW-tA 3U Fk[Moz5] Firefox OS
https://www.mozilla.org/en-US/ﬁrefox/os/[Moz6] Brick
http://mozilla.github.io/brick/[Moz6] X-Tag
http://x-tags.org/[Moz7] MathML Accessibility (video on Air Mozilla)
Jonathan Wei
https://air.mozilla.org/mathml-accessability/[MPEG1] Text of ISO/IEC CD 14496-22 3rd edition “Open Font Format”,
6.3.6 MATH – The mathematical typesetting table
http://mpeg.chiariglione.org/standards/mpeg-4/open-font-format/text-isoiec-cd-14496-22-3rd-edition

10[Vieth] OpenType math illuminatedUlrik Vieth
TUGboat, Vol. 30, No. 1. (2009), pp. 22-31
http://www.tug.org/TUGboat/tb30-1/tb94vieth.pdf[Nicaud1] Algèbre dynamique, glisser - déposer par équivalence,
Jean-François Nicaud and Christian Mercat
Actes des Journées mathématiques de l’Institut Français de l’Éducation (ENS de Lyon).
[Nicaud2] Implementation of Dynamic Algebra in Epsilonwriter,
Jean-François Nicaud and Christophe Viudez
MathUI 2013 - 8th Workshop on Mathematical User Interfaces[Oreilly1] MathML forges on, O’Reilly blog
Peter Krautzberger
http://programming.oreilly.com/2013/11/mathml-forges-on.html[PackageKit] What is PackageKit?
http://www.freedesktop.org/software/PackageKit/pk-intro.html[W3C1] WorldWideWeb: Proposal for a HyperText Project
Tim Berners-Lee, Robert Cailliau
http://www.w3.org/Proposal.html[W3C2] W3C Math Home
http://www.w3.org/Math/[W3C3] XML Entity Deﬁnitions for CharactersDavid Carlisle and Patrick Ion
http://www.w3.org/TR/xml-entity-names/[W3C4] Indexed Database API
Nikunj Mehta, Jonas Sicking, Eliot Graﬀ, Andrei Popescu, Jeremy Orlow and Joshua Bellhttp://www.w3.org/TR/IndexedDB/[Wang1] Mathematics in ebooks
Frédéric Wang
http://www.ulule.com/mathematics-ebooks/[Wang2] Writing mathematics in emails
Frédéric Wang
http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-inemails[Wang3] TeXZilla 0.9.4 Released
Frédéric Wang
http://www.maths-informatique-jeux.com/blog/frederic/?post/2014/02/25/TeXZilla-0.9.4-Released[WebComponents] Introduction to Web Components,
Dominic Cooney and Dimitri Glazkov
http://www.w3.org/TR/components-intro/[WebGL] WebGL Speciﬁcation
Dean Jackson
https://www.khronos.org/registry/webgl/specs/latest/1.0/[LaTeXML] LaTeXML 0.8.0 released, converts tikz/pgf to SVG
http://lists.jacobs-university.de/pipermail/project-latexml/2014-May/001773.html

11

A The Web Platform
A.1

1-mathml-in-html

The demo shows that MathML integrates well inside HTML page. It can easily be styled like the text
(font-family: Neo Euler, font-size: 64pt, color: white), scales according to the font-size and has
good vertical alignment with respect to the surrounding text.

A.2

2-mathml-in-svg

The demo is an SVG image with MathML formulas embedded via the <foreignObject> element.

A.3

3-mathml-javascript

The demo shows how Javascript can be used to produce interactive documents. Clicking on the button will
successively highlight diﬀerent terms of Sarrus’ rule. Below is a screenshot of the three ﬁrst steps.

12

A.4

4-mathml-fonts

Below are screenshots of the demo page with diﬀerent fonts in Firefox 31 for Linux. This is simply achievedby using the classical CSS rule font-family with optional @font-face rules to deﬁne a fallback with Web
fonts. Gecko 31 is required to get the diﬀerent fonts used for the drawing of operators (e.g. the integral andsum symbols). Other features of the OpenType MATH table (e.g. gaps or linethickness) are not implemented
yet in this version.

13

14

A.5

5-canvas

The graphs in this demo are drawn using canvas. They are updated automatically when you modify thecurrent frequency.

A.6

6-mathml-in-webgl

The 3D schema in this demo is drawn using WebGL and has MathML formulas included inside.

15You can interactively move and rotate the schema using the mouse. Here is the same schema seen fromabove, which more clearly shows the circular loop and its radius.

A.7

7-web-component

The page contains the following code:<x-tex display="block">\Gamma(t) =16

\lim_{n \to \infty} \frac{n! \; n^t}{t \; (t+1)\cdots(t+n)} =\frac{1}{t} \prod_{n=1}^\infty \frac{\left(1+\frac{1}{n}\right)^t}{1+\frac{t}{n}} =\frac{e^{-\gamma t}}{t} \prod_{n=1}^\infty \left(1 + \frac{t}{n}\right)^{-1} e^{\frac{t}{n}}</x-tex>which is automatically converted into MathML and renders approximately like this:B

Firefox OS Apps

All the apps presented in this paper work in a web browser that supports MathML. The screenshots in thissection were taken with one phone running Firefox OS powered by Gecko 31 and can be a little diﬀerent fromwhat the reader gets when trying the apps with a web browser or Firefox OS device. As discussed in 1.3,
Firefox OS does not have pre-installed MathML fonts at the moment and so the rendering of mathematicalformulas is of lower quality.

B.1

Math Cheat Sheet

All the equations are presented in display mode and a table of content is available at the top left corner of
the app.

17

More complex equations are shown below.

18

B.2

TeXZilla App

The app has an input box for the LaTeX expression, a few help buttons and an “Add” button. When theuser enters the LaTeX expression a preview of the equation is provided (second screenshot) and after pressing
the “Add” button the equation is saved and a “delete” icon appears on the right of it.

19

The screenshots below show a version of the app without the “help” buttons. Instead, a virtual keyboard
with suitable keys for math is directly integrated into Firefox OS.

B.3

DynAlgebra

The app has a small help menu accessible from the icon at the top left corner of the screen. It provides
examples of features currently available.

20

From the ﬁrst screenshot the user can add a new equation using the icon at the top right corner of thescreen. After typing the LaTeX expression for the new equation, the user can add it and manipulate it.

21