مهدی عادلی فر
بنیانگذار توسینسو و برنامه نویس

آموزش نوشتن فرمول ریاضی در HTML با MathML به زبان ساده

چگونه با کد HTML فرمول ریاضی بنویسیم؟ قصد دارم در این مطلب در مورد یکی از امکانات HTML 5 صحبت کنم. این امکان این توانایی را به شما می‌دهد که در داخل صفحه های HTML بتوانید از فرمول های ریاضی استفاده کنید. و لازم نیست که عکس آن فرمول ها را در صفحه قرار دهید. این قابلیت mathML نام داردکه دارای چندین تگ می‌باشد.اکثر مرورگرها این قابلیت را پشتیبانی می نمایند. وقتی که می‌خواهیم از این قابلیت استفاده کنیم باید فرمول خود را در داخل تگی به نام math بنویسیم. برای مثال به فرمول ساخته شده توسط کد زیر دقت کنید:

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Pythagorean theorem</title>
   </head>
   <body>
       <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
        </math>
    </body>
</html> 

خروجی کدهای بالا به شکل زیر خواهد بود:

وب سایت توسینسو

حال با استفاده از mathML می‌توان فرمول های پیچیده‌تری نیز نوشت مانند مثال زیر:

<!doctype html>
<html>

   <head>
      <meta charset="UTF-8">
      <title>MathML Examples</title>
   </head>
        
   <body>
        
      <math xmlns="http://www.w3.org/1998/Math/MathML">
                
         <mrow>                 
            <mrow>
                                
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
                                        
               <mo>+</mo>
                                        
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
                                        
               <mo>+</mo>
               <mn>4</mn>
                                        
            </mrow>
                                
            <mo>=</mo>
            <mn>0</mn>
                                 
         </mrow>
      </math>
                
   </body>
</html> 

همچنین می‌توان از این امکان برای نمایش دادن ماتریس ها نیز استفاده نمود. برای مثال یک ماتریس ۲*۲ را به شکل زیر نمایش می‌دهیم

<!doctype html>
<html>

   <head>
      <meta charset="UTF-8">
      <title>MathML Examples</title>
   </head>
        
   <body>
      <math xmlns="http://www.w3.org/1998/Math/MathML">
                
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
                        
            <mfenced open="[" close="]">
                        
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
                                        
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>
      
   </body>
</html> 

خروجی این کد به شکل زیر خواهد بود.

وب سایت توسینسو

دقت داشته باشید که این امکان در مرورگر کروم و اینترنت اکسپلورر پشتیبانی نمی شود و برای این که پشتیبانی شود باید از یک کتابخانه جاوااسکریپتی به نام MathJax استفاده کنید. امیدوارم این امکان برای شما مفید بوده باشد. توسینسو باشید


مهدی عادلی فر
مهدی عادلی فر

بنیانگذار توسینسو و برنامه نویس

مهدی عادلی، بنیان گذار TOSINSO. کارشناس ارشد نرم افزار کامپیوتر از دانشگاه صنعتی امیرکبیر و #C و جاوا و اندروید کار می کنم. در زمینه های موبایل و وب و ویندوز فعالیت دارم و به طراحی نرم افزار و اصول مهندسی نرم افزار علاقه مندم.

نظرات