automated equation breaking: making equations responsive
TRANSCRIPT
Automated Equation BreakingMaking Equations Responsive
Ahmed HindawiHindawi Publishing [email protected]
“You are what you fail to automate.”—Marc Smith
Table of Contents• Responsive Web Design• Math on the Web• Equation Analyzer• Equation Renderer• Equation Blockalizer• Equation Maker• HTML Sample Demo• Concluding Remarks
Responsive Web Design
Math on the WebRaster Images • Native MathML •
MathJax
WARNING!
Viewer Discretion Advised
The following part of the presentationincludes images of math typography
that may be disturbing to some audiences.
Raster Images
Native MathMLA short and sad story
MathJax
PDF still rules!
SVG
Automated Equation BreakingEquation Analyzer
<LHS width="4472109"><biop width="676544"><fence open="290324" close="290324" width="3992388" height="605879" depth=" 76676">
Measure Everything …
Automated Equation BreakingEquation Renderer
Equation + Target Width
Cascade Matchingbased on structure and measurements
Target Width = 600pt
Target Width = 300pt
The web does not have to follow the print any more!
We are done!
Width = 489pt
Width = 366pt
Width = 332pt
Width = 276pt
Width = 242pt
Width = 185pt
Width = 150pt
We can have different forms for the same equation for different screen widths!
We are done!
Automated Equation BreakingEquation Blockalizer
Automated Equation BreakingEquation Maker
SVG Blocks+ Media Queries
+ CSS Positioning=
Responsive Equations
HTML Sample Demohttp://www.responsiveequations.com
Concluding Remarks
Summary • Future Work • Beyond MathML • Element Queries
