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

BuyVM management panel Stallion simple use tutorial

I searched the blog and it seems that no one has ...

Priced from 4999 yuan, Huawei Mate40 series goes on sale in China today

On October 30, 2020, in Shanghai, the highly anti...

Advantages and Challenges of 5G Network Slicing

The fifth generation of mobile communication syst...

Securing the transcript - Deepin Technologies provides cybersecurity support for the 7th CISM Military World Games

In the golden month of October just past, the 7th...

[Black Friday] DediPath: 35% off VPS/Hybrid Servers starting at $1.2/month, 1Gbps unlimited traffic, multiple data centers in Los Angeles and other places

DediPath's Black Friday discounts this year a...

VirMach: supports monthly payment of KVM architecture starting from $1.25/month, supports Alipay, and has 11 computer rooms to choose from

It has been a long time since I shared informatio...

NFV is stumbling forward and entering the second half

The first half of NFV was a bumpy road, and it wa...

The three major operators unprecedentedly unified unlimited packages and removed them from the shelves to save themselves

The business of the three major operators has bee...

VMware SD-WAN by VeloCloud Optimizes Edge Device Connectivity

VMware SD-WAN by VeloCloud prioritizes centralize...

Tencent releases StarNet 2.0, increasing AI large model training efficiency by 20%

With the hot and continuous iteration of large mo...

Grasp the pulse of the times and serve industrial development | Information technology innovation to promote new infrastructure sub-forum was successfully held

On November 27, the "2020 China Tongming Lak...

Understand the OSI model in five minutes

The Open Systems Interconnection (OSI) model is a...

Huawei and IDC release the first white paper "Digitalization Leading the Banking Industry". The digital transformation of banks in the future will start from business scenarios.

[51CTO.com original article] On April 25, Huawei&...

Smart homes need smarter Wi-Fi

Today's homes feature an increasing number of...

How professionals can develop their latest data center skills

When there are a plethora of industry certificati...