Firefox OS Web Apps for Science

Raniere Silva and Frédéric Wang, dev-tech-mathml@lists.mozilla.org

Firefox OS Web Apps for Science

Phone Mathzilla Raniere Silva and Frédéric Wang, MathUI2014, Coimbra, July 10th 2014

Mozilla MathML Project

  • Raniere Silva & Frédéric Wang
  • ~10 volunteers
  • 15 years anniversary
  • Math formulae and more
Mozilla m18 with MathML & SVG, mozilla.org
Mozilla CD at the 1st MathML Conference (October 2000)

Firefox OS

  • Mobile devices
  • Open
  • Web technologies
Red Panda
Smartphones, tablets and more.
Based on Free Software and Web standards.
Technologies familiar to Web developers
Gecko as the rendering engine and so MathML support.
Photo by Yortw

Basic HTML5 Features

  • HTML
  • CSS
  • SVG
  • MathML
  • Javascript
  • Text Layout
MathML in SVG
Recall briefly the classical Web technologies that are well supported by Gecko and that they can be mixed together to create scientific documents. Text layout: Unicode, bidi, typographic features etc.

OpenType MATH table

  • Microsoft Word, Modern TeX Engines, Gecko, WebKit
  • Cambria Math, Latin Modern Math, STIX Math, WOFF

Math styling important but not precise in MathML, in TeX data separate from the math fonts, talk about MATH table standardization & implementation, math fonts availibility, mathvariant subtable in Gecko 31.

TeXZilla

  • Yet another LaTeX-to-MathML converter
  • Internationalization
  • Minimality
  • Multiple Interfaces
  • Integration in Mozilla Products
س = \frac{-ب \pm \sqrt{ب^٢ - ٤اج}}{٢ا}

س=-ب±ب٢-٤اج٢اس = \frac{-ب\pm\sqrt{ب^٢-٤اج}}{٢ا}

Javascript, itex2MML grammar, unicode.xml file from W3C
i18n: Unicode and RTL support
Minimality: Standalone, Synchronous, LaTeX-to-MathML only, core LaTeX commands
Interfaces: Web page, CommonJS, command-line (Web Server and stream filter).
Integration: Add-ons, Web apps, MDN Wiki, Seamonkey/Thunderbird

Canvas and WebGL

Canvas useful for dynamic 2D/3D schemas, MathML can be included in SVG images which in turn can be used in canvas, TeXZilla generates such SVG images from LaTeX.

Web Components


  <x-tex display="block">
    \Gamma(t) =
    \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>
Γ(t)=1t∏n=1∞(1+1n)t1+tn=e-γtt∏n=1∞(1+tn)-1etn\Gamma(t) = \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}}

Using building blocks to create more complex elements, useful for Math UI (e.g. custom element for graph drawing), <x-tex> prototype, not yet native.

Firefox OS Apps

PackagedHosted
  • App.zip
    • index.html
    • manifest.webapp
    • css
    • js
    • img
  • http://app.com
    • index.html
    • manifest.webapp
    • css
    • js
    • img
Firefox OS apps can be packaged (work offline) or hosted (require internet connection). The hosted app is a HTML page sent by the domain specified in the manifest. The packaged app is a HTML page stored on the device. For both types you can use all the web technologies listed before. For packaged apps you can use more Javascript APIs (e.g. to make phone calls or use the camera).

Firefox OS Manifest

        
{
  "version": "1.0.0",
  "name": "App",
  "description": "App short description",
  "launch_path": "/index.html",
  "icons": {
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "Your name or organization",
    "url": "http://your-homepage-here.org"
  },
  "default_locale": "en"
}
Firefox OS manifest is a JSON that stores the metadata of the app. On this slide you have the required fields. Other fields are available to indicate the app icon and translation to other languages.

Example of Firefox OS App (phone)

Firefox OS was first designed for cell phones. The app showed on this slide has around 100 math elements and it starts very fast.

Example of Firefox OS App (tablet)

Math Cheat Sheet Tablet
Mozilla is working on a tablet that will run Firefox OS. Using HTML responsive design the same app works on cell phones and tablets.

Example of Firefox OS App on other platforms

Math Cheat Sheet PC Math Cheat Sheet Android Tablet
Your app also works as native app on other platforms where you can run Firefox (e.g. Windows, Mac and GNU/Linux and Android) This way you can get native MathML support.

Math Suite

Math Suite
Only rendering math content isn't enough. We are also working on empowering user to create math content. For this goal we created some apps based on TeXZilla and a LaTeX virtual keyboard. We invite you to check it during the demo session.

Thanks

Mathzilla