1 / 20

Beautiful maths in all browsers

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

derex
Download Presentation

Beautiful maths in all browsers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Beautiful maths in all browsers

  2. 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

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

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

  5. 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 https://eyeasme.com/Joe/MathML/MathML_browser_test.html) • But a common output from many mathematical tools (Mathematica) and major office products (MS Office 2007, OpenOffice).

  6. Standards for representing mathematical notation in ASCII MathML - Example notation: <mathmode="display"xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <moform="prefix">&#x2212;<!-- &minus; --></mo> <mi>b</mi><mo>&#x00B1;<!-- &PlusMinus; --></mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>&#x2212;<!-- &minus; --></mo> <mn>4</mn> <mo>&#x2062;<!-- &InvisibleTimes; --></mo> <mi>a</mi> <mo>&#x2062;<!-- &InvisibleTimes; --></mo> <mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>&#x2062;<!-- &InvisibleTimes; --></mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>

  7. 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)

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

  9. 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

  10. 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

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

  12. 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, OperaMac: Safari, Firefox, Opera, Chrome, OmniWeb, Camino, iCabUnix: Firefox, Konqueror, Opera, Chrome, Iceweasel, Galeon, EpiphanyiPod: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

  13. INPUT FORMATS MathJax.js OUTPUT FORMATS MathML+ HTML /CSS TEX Central Hub voice MathML MathML 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

  14. 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 • @font-face • since IE4; 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.

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

  16. MathJax – usage (LaTeX) • 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 LaTeX notation • Example: $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}} {2a} $$

  17. LaTeX - oh no!Another technology to learn… • In most cases you may only need to learn a little… • However, WYSIWYG editors exist for LaTeX • 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}

  18. 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)

  19. 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

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

More Related