Automated Equation Breaking: Making Equations Responsive

Dec 3, 2015Download as PPTX, PDF3 likes968 views

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.

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

“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

Math on the Web
Raster Images • Native MathML • MathJax

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

Automated Equation Breaking: Making Equations Responsive

Automated Equation Breaking
Equation Analyzer

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

Automated Equation Breaking
Equation Renderer

Equation + Target Width
Cascade Matching
based on structure and measurements

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

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

Automated Equation Breaking
Equation Blockalizer

Automated Equation Breaking
Equation Maker

SVG Blocks
+ Media Queries
+ CSS Positioning
=
Responsive Equations

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

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

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

The document is a presentation about data visualization and HTML5 tools. It discusses types of data visualization, best practices, common mistakes, and HTML5 tools for creating visualizations like Canvas, SVG, and JavaScript libraries. It emphasizes designing visualizations based on the data, using colors and formatting appropriately, and avoiding pitfalls like pie charts and distorted axes. Ready-made controls can help build charts without writing custom code. The goal is to clearly communicate patterns in data.

Why do we automate?Bas Dijkstra

This document discusses the importance of asking "why" when automating tests. It notes that while the focus is often on how to automate and what tools to use, asking why helps ensure the right tests are automated in the right way. Specifically, asking why helps manage expectations around automation, determine if a specific test is worth automating and if the method of automation is efficient. The document encourages collaboration between industry and academia by asking why each group does what it does. It concludes by asking the reader why they personally automate tests.

Crowdsourcing for geoint-11.11.11mskmoorthy

Crowdsourcing for GEOINT discusses setting up an Amazon EC2 server with an Apache HTTP server and MySQL database to design a web page that collects crowdsourced geographic data analysis tasks on Amazon Mechanical Turk and stores the results in a SQL database. The document reports analyzing a dataset with 27,082 points and visualizing the impact. Next steps discussed are further analyzing the results through clustering, grading metrics, and sampling statistics.

Mathematical content in documentation (DITA Europe 2008)Lois Patterson

Automated Equation Processing and Rendering Workflows for PublishersSanders Kleinfeld

Typesetting mathematical equations for print/digital outputs is currently a serious pain point for many publishers. Two common workflow solutions are to either: 1. Use a specialized typesetting tool with rich mathematical rendering support (e.g., LaTeX) 2. Convert all equations to images for use in traditional desktop publishing tools (e.g., InDesign) However, there are key downsides to both these approaches. For publishers that don’t focus exclusively on math and science titles, spinning up a LaTeX-based production program may require too much overhead in time/resources to justify the investment. And converting equations to images is not ideal either, as it decreases ease of maintainability and poses challenges for digital outputs in terms of both scalability for different form factors and accessibility for visually impaired readers. As a tech publisher that produces many titles a year with mathematical content, O’Reilly Media was unsatisfied with the compromises entailed by the above workflow choices, and developed an alternative solution: a mathematics API called “STIX” that slots into its XML/ HTML-based single-source workflow.

Markup languages and warp-speed documentationLois Patterson

The presentation discusses how software development has moved towards more frequent releases through DevOps practices. This requires documentation to also be updated quickly. Markup languages can help by allowing many contributors to collaborate easily on documentation. Specific markup languages mentioned include reStructuredText and Markdown, which can be processed by tools like Sphinx to generate documentation from plain text files. The presentation demonstrates how to use reStructuredText and emphasizes that markup languages, collaborative tools like GitHub, and automation are key to supporting modern rapid software development practices.

From print textbook to MathMLTara Robertson

Mogwaï: A Framework to Handle Complex Queries on Large ModelsGwendal Daniel

The document introduces Mogwaï, a framework for efficiently querying large models stored in graph databases. It generates queries in Gremlin, a graph traversal language, from queries written in OCL. This allows complex queries to be executed directly on the database without loading the entire model into memory. The framework maps OCL expressions to Gremlin steps and merges the steps into a traversal. Benchmarks show Mogwaï can execute queries up to 20 times faster and use up to 75 times less memory compared to other approaches. Future work includes integrating Mogwaï into modeling tools and supporting additional databases.

2009_09_11_Grid960LightSpeed

The document discusses a 5-step process for using a CSS grid framework called the 960 Grid System to design a website. Step 1 involves paper prototyping to define expectations. Step 2 is creating an unstyled semantic structure using the 960 Grid. Step 3 adds graphical elements in Photoshop. Step 4 finalizes production by slicing images and applying CSS. Step 5 focuses on testing across browsers before client delivery. Using this process and a CSS framework provides benefits like visual consistency and reduced cross-browser issues.

Adobe MAX 2008: HTML/CSS + FireworksNathan Smith

The document summarizes a presentation about using Adobe Fireworks for designing HTML and CSS websites. It discusses how Fireworks is ideal for web design as it integrates well with other Adobe applications. It also explores how Fireworks allows for rapid prototyping through features like slicing images and exporting code. The presentation emphasizes writing code by hand and using frameworks like the 960 grid system to help maintain consistency and improve efficiency.

Responsive web designBen MacNeill

This presentation introduces responsive web design which allows websites to automatically adapt their layout to different screen sizes. It discusses using a flexible grid system, flexible images and media, and media queries to create a single adaptive design. The strategy is to use a linear mobile-first approach and progressively enhance the design for larger screens using media queries. This allows the site to work on any device while providing the best experience for each form factor.

FITC - Exploring Art-Directed Responsive ImagesRami Sayar

Responsive images are crucial to delivering stunning responsive web sites. Now that the <picture> element and srcset feature have found their way into every browser with to a certain degree following a common standard, there is no excuse for refusing to add art-directed responsive images to your grunt, gulp or webpack build flow or backend CMS/blog. This talk will explore the state of the art in building art-directed responsive images and will showcase several tools and techniques that web designers can use to automate art-directed responsive images.

A Day Building Fast, Responsive, Extensible Single Page ApplicationsChris Love

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex

Rockstar Graphics with HTML5Dave Balmer

Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper

There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.

Using Responsive Web Design To Make Your Web Work Everywhere Chris Love

The document discusses responsive web design techniques for creating websites that work well across all device screens. It covers fluid layouts using relative units like percentages, media queries to apply styles conditionally based on screen width, and image optimization techniques like srcset and sizes attributes to serve the most appropriately sized image for different screens. The goal is to provide an optimal viewing experience for users on any device without needing separate mobile sites.

Drawing a Circle Three Ways: Generating Graphics for the WebCloudinary

Amy Cheng Web Developer, New York Magazine Drawing a Circle Three Ways: Generating Graphics for the Web There are multiple ways to generate graphics for the web. In this talk, we’ll learn three ways create a circle: CSS, SVGs, the Canvas. Each approach has its advantages and disadvantages. Which one is best for mobile performance? Which one should I use to create visualizations based on real-time data? Which one is the best for personalized user interfaces? We’ll answer these questions and explore how these technologies offer us possibilities of visual expressiveness on the web, across different form factors and platforms.

Silverlight 5Jeremy Likness

Silverlight 5 for Line of Business provides concise summaries of key features in Silverlight 5 including improved threading that offloads GPU animations and network requests to non-UI threads for better performance, expanded text functionality like multi-column text overflow and character spacing controls, and enhanced data binding capabilities such as style data binding, implicit data templates, ancestor binding, and data binding debugging. The document also reviews the history and adoption of Silverlight and provides examples of how Silverlight 5 has been used in applications for the 2010 Olympics, Microsoft, and other enterprises.

HTML5 - Chances and Pitfalls (Bytro Labs GmbH)Felix Faber

Great Responsive-ability Web DesignMike Wilcox

With great power, comes great responsive-ability web design. Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.

Advanced Web Graphics with CanvasJason Harwig

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

Scalable web architectureKaushik Paranjape

This document discusses designing a scalable web architecture for an e-commerce site. It recommends: 1) Using a service-based architecture with microservices for components like the UI, queue, analytics algorithms, and database. 2) Scaling services horizontally using load balancing and auto-scaling. 3) Collecting performance metrics to monitor everything and make data-driven decisions about scaling. 4) Storing data in multiple databases like MySQL, MongoDB, HBase based on their suitability and scaling them independently as services.

There Is No Mobile: An Introduction To Responsive Web DesignChris Love

Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveSalem Ghoweri

This document discusses challenges of responsive web design and provides solutions. It addresses issues like designers thinking in pixels rather than percentages, page bloat from multiple image versions, and lack of ideal design tools. Suggested approaches include using a fluid grid, delivering optimized responsive images, modular CSS, and conditionally loading content. The document also recommends starting with a community theme like AdaptiveTheme, Omega or Zen to save time. Drupal 8 is advancing responsive features like mobile initiatives and conditional loading to improve front-end performance.

Node.js for .NET DevelopersDavid Neal

The Modern Web, Part 2: HTML5David Pallmann

The document discusses the growing importance of the web and HTML5. It covers how HTML5 enables compelling experiences across devices using open web standards. It also addresses questions developers may have around learning new skills for HTML5 development and ensuring compatibility. Microsoft is presented as strongly supporting HTML5 and providing tools to build on their platform with open front ends and dedicated back ends. Code examples and tutorials are referenced to explore HTML5 further.

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

More Related Content

Similar to Automated Equation Breaking: Making Equations Responsive (20)

2009_09_11_Grid960LightSpeed

Adobe MAX 2008: HTML/CSS + FireworksNathan Smith

Responsive web designBen MacNeill

FITC - Exploring Art-Directed Responsive ImagesRami Sayar

A Day Building Fast, Responsive, Extensible Single Page ApplicationsChris Love

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex

Rockstar Graphics with HTML5Dave Balmer

Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper

Using Responsive Web Design To Make Your Web Work Everywhere Chris Love

Drawing a Circle Three Ways: Generating Graphics for the WebCloudinary

Silverlight 5Jeremy Likness

HTML5 - Chances and Pitfalls (Bytro Labs GmbH)Felix Faber

Great Responsive-ability Web DesignMike Wilcox

Advanced Web Graphics with CanvasJason Harwig

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

Scalable web architectureKaushik Paranjape

There Is No Mobile: An Introduction To Responsive Web DesignChris Love

Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveSalem Ghoweri

Node.js for .NET DevelopersDavid Neal

The Modern Web, Part 2: HTML5David Pallmann

2009_09_11_Grid960LightSpeed

Adobe MAX 2008: HTML/CSS + FireworksNathan Smith

Responsive web designBen MacNeill

FITC - Exploring Art-Directed Responsive ImagesRami Sayar

A Day Building Fast, Responsive, Extensible Single Page ApplicationsChris Love

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex

Rockstar Graphics with HTML5Dave Balmer

Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper

Using Responsive Web Design To Make Your Web Work Everywhere Chris Love

Drawing a Circle Three Ways: Generating Graphics for the WebCloudinary

Silverlight 5Jeremy Likness

HTML5 - Chances and Pitfalls (Bytro Labs GmbH)Felix Faber

Great Responsive-ability Web DesignMike Wilcox

Advanced Web Graphics with CanvasJason Harwig

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

Scalable web architectureKaushik Paranjape

There Is No Mobile: An Introduction To Responsive Web DesignChris Love

Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveSalem Ghoweri

Node.js for .NET DevelopersDavid Neal

The Modern Web, Part 2: HTML5David Pallmann

Recently uploaded (20)

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Cyber Awareness overview for 2025 month of securityriccardosl1

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Most consumers believe they’re making informed decisions about their personal data—adjusting privacy settings, blocking trackers, and opting out where they can. However, our new research reveals that while awareness is high, taking meaningful action is still lacking. On the corporate side, many organizations report strong policies for managing third-party data and consumer consent yet fall short when it comes to consistency, accountability and transparency. This session will explore the research findings from TrustArc’s Privacy Pulse Survey, examining consumer attitudes toward personal data collection and practical suggestions for corporate practices around purchasing third-party data. Attendees will learn: - Consumer awareness around data brokers and what consumers are doing to limit data collection - How businesses assess third-party vendors and their consent management operations - Where business preparedness needs improvement - What these trends mean for the future of privacy governance and public trust This discussion is essential for privacy, risk, and compliance professionals who want to ground their strategies in current data and prepare for what’s next in the privacy landscape.

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

Mobile App Development Company in Saudi ArabiaSteve Jonas

EmizenTech is a globally recognized software development company, proudly serving businesses since 2013. With over 11+ years of industry experience and a team of 200+ skilled professionals, we have successfully delivered 1200+ projects across various sectors. As a leading Mobile App Development Company In Saudi Arabia we offer end-to-end solutions for iOS, Android, and cross-platform applications. Our apps are known for their user-friendly interfaces, scalability, high performance, and strong security features. We tailor each mobile application to meet the unique needs of different industries, ensuring a seamless user experience. EmizenTech is committed to turning your vision into a powerful digital product that drives growth, innovation, and long-term success in the competitive mobile landscape of Saudi Arabia.

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.

How analogue intelligence complements AIPaul Rowe

Artificial Intelligence is providing benefits in many areas of work within the heritage sector, from image analysis, to ideas generation, and new research tools. However, it is more critical than ever for people, with analogue intelligence, to ensure the integrity and ethical use of AI. Including real people can improve the use of AI by identifying potential biases, cross-checking results, refining workflows, and providing contextual relevance to AI-driven results. News about the impact of AI often paints a rosy picture. In practice, there are many potential pitfalls. This presentation discusses these issues and looks at the role of analogue intelligence and analogue interfaces in providing the best results to our audiences. How do we deal with factually incorrect results? How do we get content generated that better reflects the diversity of our communities? What roles are there for physical, in-person experiences in the digital world?

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

Splunk Security Update | Public Sector Summit Germany 2025Splunk

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage