Google AMP Tutorial
Selected Reading
- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google AMP - Mathml
Google AMP - Mathml
Using MathML, we can display maths formula. In this chapter let us see a working example how to use MathML and work with few mathematical formulae to display the same.
To work with MathML, we need to include the following javascript file −
<script async custom-element = "amp-mathml" src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js"> </script>
MathML AMP tag
The mathML amp tag has the format as shown here −
<amp-mathml layout = "container" data-formula = "[x = {-b pm sqrt{b^2-4ac} over 2a}.]"> </amp-mathml>
Note that the data-formula is the mandatory attribute to which the formula is given.
Example
Let us understand this tag better with the help of an example.
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - MathML</title> <pnk rel = "canonical" href = " http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async custom-element = "amp-mathml" src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js"> </script> </head> <body> <h1>Google AMP - MathML Example</h1> <amp-mathml layout = "container" data-formula = "[x = {-b pm sqrt{b^2-4ac} over 2a}.]"> </amp-mathml> </body> </html>
Output
Amp-mathml tags when it executes renders the display in an iframe as shown below −
![Example Mathml](/google_amp/images/example_mathml.jpg)
![Example Mathml](/google_amp/images/output_mathml.jpg)