آموزش Mathml در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش Mathml در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Mathml در گوگل AMP خواهیم پرداخت.

با استفاده از MathML می توانیم فرمول ریاضیات را نمایش دهیم. در این فصل بیایید یک مثال عملی نحوه استفاده از MathML و کار با چند فرمول ریاضی برای نمایش همان را ببینیم.

برای کار با MathML ، باید فایل javascript زیر را وارد کنیم –

&lt;script async custom-element = "amp-mathml" 
   src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js"&gt;
&lt;/script&gt;

src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js">

</script>

تگ MathML AMP

تگ MathML AMP دارای فرمتی است که در اینجا نشان داده شده است –

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

<amp-mathml layout = "container"

data-formula = "\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">

</amp-mathml>

توجه داشته باشید که فرمول داده ویژگی اجباری است که فرمول به آن داده می شود.

مثال

بگذارید با کمک یک مثال این تگ را بهتر درک کنیم.

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - MathML&lt;/title&gt;
      &lt;link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"&gt;

      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         &lt;/style&gt;
      &lt;/noscript&gt;

      &lt;script async custom-element = "amp-mathml" 
         src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js"&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Google AMP - MathML Example&lt;/h1&gt;
      &lt;amp-mathml layout = "container" 
         data-formula = "\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"&gt;
      &lt;/amp-mathml&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - MathML</title>

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>

body{

-webkit-animation:none;

-moz-animation:none;

-ms-animation:none;

animation:none

}

</style>

</noscript>

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 مانند تصویر زیر ارائه می دهد –

منبع.

لیست جلسات قبل آموزش گوگل AMP

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش Mathml در گوگل AMP

آموزش Mathml در گوگل AMP

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش Mathml در گوگل AMP

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه