An article to help you understand HTML5 MathML

An article to help you understand HTML5 MathML

[[347913]]

HTML5 can use MathML elements in documents. The corresponding tags are ... .

MathML is Mathematical Markup Language, a markup language based on XML (a subset of Standard Generalized Markup Language) for writing mathematical symbols and formulas on the Internet.

Notice:

Most browsers support MathML tags. If your browser does not support this tag, you can use the latest version of Firefox or Safari to view it.

1. Simple MathML Example

The following is a simple MathML example.

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.         <meta charset= "UTF-8" >
  5.  <title>Project</title>
  6.  </head> 
  7.  
  8.     <body style= "background-color: aqua;" > 
  9.  
  10.         <math xmlns= "http://www.w3.org/1998/Math/MathML" > 
  11.  
  12.  <mrow>
  13.  <msup>
  14.                     <mi>a</mi>
  15.                     <mn>2</mn>
  16.  </msup>
  17.  <mo>+</mo> 
  18.  
  19.  <msup>
  20.                     <mi>b</mi>
  21.                     <mn>2</mn>
  22.  </msup>
  23.  <mo>=</mo> 
  24.  
  25.  <msup>
  26.                     <mi>c</mi>
  27.                     <mn>2</mn>
  28.  </msup>
  29.  </mrow> 
  30.  
  31.  </math> 
  32.  
  33.  </body>
  34.  </html>

The running result graph is as follows:

2. Use as MathML Characters

Imagine the following is a markup used as the characters &InvisibleTimes;: XML/HTML Code Paste the contents into the clipboard.

The following example adds some operators:

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.       <meta charset= "UTF-8" >
  5.  <title>Project</title>
  6.  </head> 
  7.      
  8.    <body style= "background-color: aqua;" > 
  9.      
  10.       <math xmlns= "http://www.w3.org/1998/Math/MathML" > 
  11.          
  12.  <mrow>
  13.  <mrow> 
  14.                  
  15.  <msup>
  16.  <mi>x</mi>
  17.  <mn>3</mn>
  18.  </msup> 
  19.                      
  20.  <mo>+</mo> 
  21.                      
  22.  <mrow>
  23.  <mn>4</mn>
  24.                   <mo>⁢</mo>
  25.  <mi>x</mi>
  26.  </mrow> 
  27.                      
  28.  <mo>+</mo>
  29.  <mn>6</mn> 
  30.                      
  31.  </mrow> 
  32.                  
  33.  <mo>=</mo>
  34.  <mn>0</mn> 
  35.                  
  36.  </mrow>
  37.  </math> 
  38.          
  39.  </body>
  40.  </html>

The running result graph is as follows:

3. MathML multiplication

<msgroup> is used to group rows within <mstack> elements and <mlongdiv> elements so that their positions are relative to the alignment of the stack. The <msgroup> element with the shift attribute can be used to create simple multiplication.

1. Usage

Following is the simple syntax to use this tag.

  1.  <msgroup> expression </msgroup>

2. Parameters

Here is a description of all parameters of this tag (expression - expression).

3. Attributes

position: Specifies the horizontal position of the row within the group relative to the position controlled by the containing msgroup (according to its position and offset properties). The default value is 0.

shift : Specifies the incremental shift of the positions of consecutive children (rows or groups) within the group. The default value is 0.

4. Case

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.         <meta charset= "UTF-8" >
  5.  <title>Project</title>
  6.  </head> 
  7.  
  8.     <body style= "background-color: aqua;" >
  9.         <math xmlns= "http://www.w3.org/1998/Math/MathML" >
  10.  <mstack>
  11.  <msgroup>
  12.                     <mn>123</mn>
  13.  <msrow>
  14.                         <mo>×</mo>
  15.                         <mn>321</mn>
  16.  </msrow>
  17.  </msgroup>
  18.  <msline />
  19.                 <msgroup shift= "1" >
  20.                     <mn>123</mn>
  21.                     <mn>246</mn>
  22.                     <mn>369</mn>
  23.  </msgroup>
  24.  <msline />
  25.                 <mn>39483</mn>
  26.  </mstack>
  27.  </math>
  28.  </body>
  29.  </html>

4. Matrix expression

The following example may be used to indicate a relatively simple 2x2 matrix. XML/HTML CodeCopy contents to clipboard

The following example is a 2×2 matrix.

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.       <meta charset= "UTF-8" >
  5.  <title>Project</title>
  6.  </head> 
  7.      
  8.    <body style= "background-color: aqua;" >
  9.       <math xmlns= "http://www.w3.org/1998/Math/MathML" > 
  10.          
  11.  <mrow>
  12.  <mi>BAS</mi>
  13.  <mo>=</mo> 
  14.              
  15.             <mfenced open = "["   close = "]" > 
  16.              
  17.  <mtable>
  18.  <mtr>
  19.                      <mtd><mi>x</mi></mtd>
  20.                      <mtd><mi>y</mi></mtd>
  21.  </mtr> 
  22.                      
  23.  <mtr>
  24.                      <mtd><mi>z</mi></mtd>
  25.                      <mtd><mi>w</mi></mtd>
  26.  </mtr>
  27.  </mtable> 
  28.                
  29.  </mfenced>
  30.  </mrow>
  31.  </math> 
  32.        
  33.  </body>
  34.  </html>

The running result graph is as follows:

V. Conclusion

This article introduces the common usage of MathML based on HTML. In this article, it introduces how to use it as a MathML character, focusing on the practical application of MathML multiplication. Through the analysis of each case, its usage and properties are introduced. The display of the running effect diagram can help readers better understand.

Everyone is welcome to try actively. Sometimes it is easy to implement something when you see others do it, but when you try to implement it yourself, there will always be various problems. Don't be too ambitious and be diligent in doing it, so that you can understand it more deeply.

This article is reprinted from the WeChat public account "Front-end Advanced Learning Exchange", which can be followed through the following QR code. To reprint this article, please contact the front-end advanced learning exchange public account.

<<:  What HTTP status codes have you seen?

>>:  Design and implementation of Nodejs-Ipc

Recommend

OneTechCloud VPS hosting 20% ​​off, Hong Kong CN2/CMI large bandwidth/US CN2 GIA/high defense, etc.

OneTechCloud has updated this month's discoun...

VMISS VPS 30% off monthly payment starting from 18 yuan, Hong Kong CN2/Korea CN2/US CN2/Japan optional

VMISS currently offers a 30% discount coupon for ...

What are the characteristics and uses of Category 7 (Cat7) cables?

Today, demand for faster Internet and data transm...

Ming-Chi Kuo: The next major upgrade to iPhone 5G is expected to arrive in 2023

On May 10, according to media reports, mobile ana...

Ethernet IP: Unlocking the power of high-speed data transmission

Ethernet IP has revolutionized the world of netwo...

Foreign media said that the number of 5G base stations in Shenzhen has exceeded that of Germany by 50 times

According to foreign media, Germany's Handels...

RAKsmart: Dedicated servers starting at $30/month, 1-10Gbps bandwidth, unlimited traffic available

RAKsmart's year-end promotion is in full swin...

9 Ping Monitoring Tools Worth Paying Attention to for Network Administrators

Ping monitoring is one of the most popular techni...

A conscientious work explaining "service call"!

This article briefly summarizes the history of te...

Zgovps: $16.9/year-AMD EPYC 7402P/2GB/25G SSD/2TB/40G defense/Netherlands data center

Zgovps is a new Chinese hosting provider that ope...

Interviewer asked: Tell me about the principle of IP address allocation

1. Introduction to network model In computer netw...

Wu Hequan, Academician of the Chinese Academy of Engineering: The communications industry needs to adjust its development strategy

August 30 news: The 9th "International Sympo...

Huawei: Realizing a truly bright future for the Internet of Things

Huawei has always been an active promoter and pra...

IDC: Global edge computing market will reach $250.6 billion in 2024

Industry data: Gartner conducted a survey and int...

The operators’ 5G investment budget has been determined. From construction to application, what other challenges are there to overcome?

According to statistics from China News Service, ...