MathML provides a standard way to markup mathematical equations using XML and is currently widely used in the scholarly publishing industry. MathML 3.0 provides some basic automatic line breaking functionality and allows the insertion of different breaking and alignment points to break up a long mathematical formula into several lines to suit a particular text or screen width. However, this is not only tedious, time consuming, and subject to human error, but it essentially provides only a single way to break a particular formula to suit a predetermined text or screen width. In order to address the limitations of manually inserted breaking and alignment points in MathML equations, we developed an automatic equation breaker that breaks the same mathematical formula in different ways to suit a range of text or screen widths. We have also developed a tool that uses this automatic equation breaker to make mathematical equations as responsive as other native HTML elements on a truly responsive website.

1. Automated Equation Breaking
Making Equations Responsive
Ahmed Hindawi
Hindawi Publishing Corporation
ahmed.hindawi@hindawi.com

2. “You are what you fail to automate.”
—Marc Smith

3. Table of Contents
• Responsive Web Design
• Math on the Web
• Equation Analyzer
• Equation Renderer
• Equation Blockalizer
• Equation Maker
• HTML Sample Demo
• Concluding Remarks

4. Responsive Web Design

5. Math on the Web
Raster Images • Native MathML • MathJax

6. WARNING!
Viewer Discretion Advised
The following part of the presentation
includes images of math typography
that may be disturbing to some audiences.

7. Raster Images

12. Native MathML
A short and sad story

13. MathJax

21. PDF still rules!

23. SVG

26. Automated Equation Breaking
Equation Analyzer

31. <LHS width="4472109">
<biop width="676544">
<fence open="290324" close="290324"
width="3992388" height="605879"
depth=" 76676">
Measure Everything …

32. Automated Equation Breaking
Equation Renderer

33. Equation + Target Width
Cascade Matching
based on structure and measurements

35. Target Width = 600pt

38. Target Width = 300pt

39. The web does not have to follow
the print any more!
We are done!

40. Width = 489pt

41. Width = 366pt

42. Width = 332pt

43. Width = 276pt

44. Width = 242pt

45. Width = 185pt

46. Width = 150pt

47. We can have different forms for the same
equation for different screen widths!
We are done!

48. Automated Equation Breaking
Equation Blockalizer

51. Automated Equation Breaking
Equation Maker

52. SVG Blocks
+ Media Queries
+ CSS Positioning
=
Responsive Equations

53. HTML Sample Demo
http://www.responsiveequations.com

57. Concluding Remarks
Summary • Future Work • Beyond
MathML • Element Queries

58. Thank You!
Ahmed Hindawi
Hindawi Publishing Corporation
ahmed.hindawi@hindawi.com