Beautiful maths in all browsers Introduction Input and

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.

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

Standards for representing mathematical notation in ASCII • Math. ML – A language of the web for the presentation and meaning of formula components. – A W 3 C ‘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) IE 9 – reportedly buggy support Safari/Chrome – ? ? ? reportedly only in nightly builds (browser tests using https: //eyeasme. com/Joe/Math. ML_browser_test. html) – But a common output from many mathematical tools (Mathematica) and major office products (MS Office 2007, Open. Office).

Standards for representing mathematical notation in ASCII Math. ML - Example notation: <math mode="display" xmlns="http: //www. w 3. org/1998/Math. ML"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo form="prefix">&#x 2212; </mo> <mi>b</mi> <mo>&#x 00 B 1; </mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>&#x 2212; </mo> <mn>4</mn> <mo>&#x 2062; </mo> <mi>a</mi> <mo>&#x 2062; </mo> <mi>c</mi> </msqrt> </mrow> <mn>2</mn> <mo>&#x 2062; </mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>

Standards for representing mathematical notation in ASCII • La. Te. X – 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 La. Te. X to handle mathematical notation (amsmath)

Standards for representing mathematical notation in ASCII La. Te. X - Example notation: x = frac{-b pm sqrt{b^2 - 4 ac}} {2 a}

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: – ASCIIMath. ML • La. Te. XMath. ML – js. Math • Math. Jax

Investigation and evaluation http: //dev 02. elearning. eps. manchester. ac. uk /~stuart/web-maths/

• Built from ground up from 6 years prior experience by Davide Cervone (author of js. Math) • Works across multiple browsers and platforms: PC: Internet Explorer, Firefox, Chrome, Safari, Opera Mac: Safari, Firefox, Opera, Chrome, Omni. Web, Camino, i. Cab Unix: Firefox, Konqueror, Opera, Chrome, Iceweasel, Galeon, Epiphany i. Pod: Safari • Uses HTML/CSS, Java. Script, and unicode fonts for high-quality typesetting that is scalable and prints at full resolution • Is Ajax-based, modular, highly configurable

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

Math. Jax – 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 – @font-face – since IE 4; Firefox 3. 5 (30/06/2009); Chrome 4 (25/01/2010), Webkit/Safari 3. 1 – …but where @font-face not supported, falls back to rendering with image fonts.

Math. Jax - usage • Set up: – Import a javascript file into HTML page <script type="text/javascript" language="javascript" src="js/Math. Jax. js"> – 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 Math. Jax. js file. – Needs further investigation as to best set up

Math. Jax – usage (La. Te. X) • Delimiting blocks of notation in your HTML with: – $ … $ for inline maths (analogous to HTML <span>…</span>) or – $$ … $$ for blocks (analogous to HTML <div>…</div>) • Will also automatically recognise some La. Te. X notation • Example: $$ x = frac{-b pm sqrt{b^2 - 4 ac}} {2 a} $$

La. Te. X - oh no! Another technology to learn… • In most cases you may only need to learn a little… • However, WYSIWYG editors exist for La. Te. X – http: //www. codecogs. com/index. php – http: //www. sitmo. com/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 La. Te. X support good, but still gaps Slightly slow rendering in complex examples 36 Mb download (mostly due to fonts and images)

Where to next? • What about setting up a centralised Math. Jax service? ? ? – Most University staff who may have a need for displaying maths on-line won’t know La. Te. X. • Education? • Rely on WYSIWYG editors? – Most University staff who may have a need for displaying maths on-line who know La. Te. X 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 La. Te. X tutorial) and careful configuration. – Need to manage expectations from staff

More info • http: //www. mathjax. org/ • In particular Davide Cervone’s presentation: – http: //www. mathjax. org/resources/articles-andpresentations/