Beautiful maths in all browsers

Introduction Input and display of non-trivial maths to any electronic format problematic …and even more of a pain for display on web pages. –Input: can be slow and cumbersome – the natural UI is pen and paper –Display: we still live in a predominantly western ASCII world. Mathematical type setting far more complex

“MUR FIRST ORDER BOUNDARY CONDITION” Many non-alphanumeric symbols Lines (sometimes curved) use to indicate expressions and function.

2D arrays… Correct alignment essential else meaning can be lost

Standards for representing mathematical notation in ASCII MathML –A language of the web for the presentation and meaning of formula components. –A W3C ‘proposed recommendation’ (as of 10/08/2010) –Browser support patchy Firefox and other Gecko based browsers – good native support Opera – partial native support, some problems IE – not natively (only with plugin) IE9 – reportedly buggy support Safari/Chrome – ??? reportedly only in nightly builds (browser tests using –But a common output from many mathematical tools (Mathematica) and major office products (MS Office 2007, OpenOffice).

MathML - Example notation: x = − b ± b 2 − 4 ⁢ a ⁢ c 2 ⁢ a Standards for representing mathematical notation in ASCII

LaTeX –A document language for high quality typesetting. –Most widely used by mathematicians, scientists, engineers, and other scholars in academia. –Human readable (?) –Has special packages for extending LaTeX to handle mathematical notation (amsmath)

Standards for representing mathematical notation in ASCII LaTeX - Example notation: x = \frac{-b \pm \sqrt{b^2 - 4ac}} {2a}

Displaying mathematical notation on the web Use images –don’t scale, –print out quality can be poor –accessibility issues HTML with tables to control layout and use entity references for symbols –can be hard work for complex equations! –just about OK for simple examples –scaling may lead to unpredictable results –accessibility issues

Displaying mathematical notation on the web Javascript solutions to programmatically layout in HTML and CSS A few different open source implementations, most popular include: –ASCIIMathML LaTeXMathML –jsMath MathJax

Investigation and evaluation /~stuart/web-maths/

Built from ground up from 6 years prior experience by Davide Cervone (author of jsMath) Works across multiple browsers and platforms: PC: Internet Explorer, Firefox, Chrome, Safari, Opera Mac: Safari, Firefox, Opera, Chrome, OmniWeb, Camino, iCab Unix: Firefox, Konqueror, Opera, Chrome, Iceweasel, Galeon, Epiphany iPod: Safari Uses HTML/CSS, JavaScript, and unicode fonts for high-quality typesetting that is scalable and prints at full resolution Is Ajax-based, modular, highly configurable

MathJax – technical background MathJax has four major components: –Different input "jax" (TEX, MathML) –Different output "jax" (HTML-CSS, voice, MathML) –An internal format (MathML+) –A central hub to glue it all together TEX MathML HTML /CSS voice MathML INPUT FORMATSOUTPUT FORMATS MathJax.js Central Hub MathML+

MathJax – issues Slow to render large chunks of mathematical notation (in beta version tested Spring 2010) Relies on CSS technology only recently widely implemented in browsers –since IE4; Firefox 3.5 (30/06/2009); Chrome 4 (25/01/2010), Webkit/Safari 3.1 –…but not supported, falls back to rendering with image fonts.

MathJax - usage Set up: –Import a javascript file into HTML page –May need to also add some short configuration notation into HTML page to specify input and output formats. –…but should be able to abstract this away to MathJax.js file. –Needs further investigation as to best set up

MathJax – usage (LaTeX) Delimiting blocks of notation in your HTML with: –$ … $ for inline maths (analogous to HTML … ) or –$$ … $$ for blocks (analogous to HTML … ) Will also automatically recognise some LaTeX notation Example: $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}} {2a} $$

LaTeX - oh no! Another technology to learn… In most cases you may only need to learn a little… However, WYSIWYG editors exist for LaTeX – – Example: this took less than 5 minutes to create (with no previous experience of the “codecogs” WTSIWYG editor) \dot{\varepsilon} = \frac{K' D G b}{k T} \cdot \left ( \frac{b}{d} \right )^p \cdot \left ( \frac{\sigma}{G} \right )^{1/m}

Advantages - Disadvantages Advantages –High quality typography –Cross-browser support –Scalable –Some consideration for accessibility –Copy and paste into Word(?) plus maths software –Rich API Disadvantages –Still some problems with printing –For best results needs recent browser (esp. non-IE) –Maths LaTeX support good, but still gaps –Slightly slow rendering in complex examples –36Mb download (mostly due to fonts and images)

Where to next? What about setting up a centralised MathJax service??? –Most University staff who may have a need for displaying maths on-line won’t know LaTeX. Education? Rely on WYSIWYG editors? –Most University staff who may have a need for displaying maths on-line who know LaTeX resistant to change. Happy to carry on producing PDFs –Some interest from staff, but may be initially more of use to ELTs?? –However, setting up a service should be low cost – just a small website with examples (but not a LaTeX tutorial) and careful configuration. –Need to manage expectations from staff

More info In particular Davide Cervone’s presentation: – and-presentations/ and-presentations/