Учебники

Google AMP — Mathml

Ноябрь 7, 2018

Используя MathML, мы можем отобразить математическую формулу. В этой главе рассмотрим рабочий пример того, как использовать MathML и работать с несколькими математическими формулами, чтобы отобразить то же самое.

Для работы с MathML нам нужно включить следующий файл javascript — 

<script async custom-element = "amp-mathml" 
   src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js">
</script>

Тег MathML AMP

Тег mathML amp имеет следующий формат: 

<amp-mathml layout = "container" 
   data-formula = "\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
</amp-mathml>

Обратите внимание, что формула данных является обязательным атрибутом, которому дается формула.

пример

Давайте лучше разберемся в этом теге на примере. 

<!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>
      <link 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{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility: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>

Выход

При выполнении тегов Amp-mathml отображение отображается в iframe, как показано ниже —

Пример Mathml

50
Share: