output.to from Sideway
Draft for Information Only

# Content

`CSS Mathematical Equation Font Family  Text Character  Math and Symbol Examples Equation Expression  Equation Block Examples  Inline Equation Examples Equation Form  Bar Function  Radical Function  Function Name  Superscripted Block  Row Block   Two Row Block   Three Row Block   Four Row Block  Simple Symbol Block   Double-Sized Vertical Bar   Double-Sized Round Bracket   Double-Sized Curly Bracket   Double-Sized Curly-Vertical Bracket   Square Root  Combining Block Equation Pattern  Numeric Fraction Block  Fraction Block  Lower Comment Block  Upper comment Block  Simple Sup-Sub Block  Simple Integration Top-Bottom Block  Simple Evaluation Bar Top-Bottom Block  Simple Summation Top-Bottom Block  Simple Product Top-Bottom Block`

# CSS Mathematical Equation

Some common examples of CSS mathematical equation.

## Font Family

In general, the font family used in CSS mathematical equation can be divided into numerical digits, alphabet letters, and symbols.

The font family for alphabet letters is restricted to Arial font family. The font family for numerical digits and symbols can be restricted to "Noto Serif TC" font family from Google Fonts. While the font family for other symbol can be based on Cambria Math font family and other local font families

### Text Character

``` Times New Roman:abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 `-=[]\;',./~!@#\$%^&*() _+{}|:"<>? −×⋅∓±∘∗∙∏∐∑⋀⋁⋂⋃∀∂∃∅⦰∆∇∎∞∝∴∵ Arial Unicode MS:abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 `-=[]\;',./~!@#\$%^&*() _+{}|:"<>? −×⋅∓±∘∗∙∏∐∑⋀⋁⋂⋃∀∂∃∅⦰∆∇∎∞∝∴∵ Noto Serif TC:abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 `-=[]\;',./~!@#\$%^&*() _+{}|:"<>? −×⋅∓±∘∗∙∏∐∑⋀⋁⋂⋃∀∂∃∅⦰∆∇∎∞∝∴∵ Cambria Math:abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 `-=[]\;',./~!@#\$%^&*() _+{}|:"<>? −×⋅∓±∘∗∙∏∐∑⋀⋁⋂⋃∀∂∃∅⦰∆∇∎∞∝∴∵ Math Equation:abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 `-=[]\;',./~!@#\$%^&*() _+{}|:"<>? −×⋅∓±∘∗∙∏∐∑⋀⋁⋂⋃∀∂∃∅⦰∆∇∎∞∝∴∵ ```

### Math and Symbol Examples

`Noto Serif TC Extra-Light`-=[]\;',./~!@#\$%^&*()_+{}|:"<>?≤≥≦≧≨≩≪≫ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789−×⋅∓±∘∗∙ℯ√∛∜∈∉∊∋∌∍⊂⊃⊄⊅⊆⊇∼∽∾≁≂≃≄≅≆≇≈≉≌≐≠≡ 𝛼𝛽𝛾𝛿𝜀𝜁𝜂𝜃𝜄𝜅𝜆𝜇𝜈𝜉𝜊𝜋𝜌𝜎𝜏𝜐𝜑𝜒𝜓𝜔 ∏∐∑⋀⋁⋂⋃∀∂∃∅⦰∆∇∎∞∝∴∵∫∬∭∮∯∰∱∲∳⋮⋯⋰⋱‖ ′ ″ ‴ ⁄ ⁗ ʹ ʺ ‵ ‶ ‷ ←↑→↓↔↕↖↗↘↙▲▼◀▶↺↻⟲⟳↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⥢⥣⥤⥥⥦⥧⥨⥩⥪⥫⥬⥭⥮⥯⇐⇑⇒⇓⇔⇌⇍⇏⇕⇖⇗⇘⇙⇙⇳⊕⊖⊗⊘⊙⊚⊛⊜⊝⊞⊟⊠⊡` `Noto Serif TC`-=[]\;',./~!@#\$%^&*()_+{}|:"<>?≤≥≦≧≨≩≪≫ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789−×⋅∓±∘∗∙ℯ√∛∜∈∉∊∋∌∍⊂⊃⊄⊅⊆⊇∼∽∾≁≂≃≄≅≆≇≈≉≌≐≠≡ 𝛼𝛽𝛾𝛿𝜀𝜁𝜂𝜃𝜄𝜅𝜆𝜇𝜈𝜉𝜊𝜋𝜌𝜎𝜏𝜐𝜑𝜒𝜓𝜔 ∏∐∑⋀⋁⋂⋃∀∂∃∅⦰∆∇∎∞∝∴∵∫∬∭∮∯∰∱∲∳⋮⋯⋰⋱‖ ′ ″ ‴ ⁄ ⁗ ʹ ʺ ‵ ‶ ‷ ←↑→↓↔↕↖↗↘↙▲▼◀▶↺↻⟲⟳↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⥢⥣⥤⥥⥦⥧⥨⥩⥪⥫⥬⥭⥮⥯⇐⇑⇒⇓⇔⇌⇍⇏⇕⇖⇗⇘⇙⇙⇳⊕⊖⊗⊘⊙⊚⊛⊜⊝⊞⊟⊠⊡` `Cambria Math`-=[]\;',./~!@#\$%^&*()_+{}|:"<>?≤≥≦≧≨≩≪≫ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789−×⋅∓±∘∗∙ℯ√∛∜∈∉∊∋∌∍⊂⊃⊄⊅⊆⊇∼∽∾≁≂≃≄≅≆≇≈≉≌≐≠≡ 𝛼𝛽𝛾𝛿𝜀𝜁𝜂𝜃𝜄𝜅𝜆𝜇𝜈𝜉𝜊𝜋𝜌𝜎𝜏𝜐𝜑𝜒𝜓𝜔 ∏∐∑⋀⋁⋂⋃∀∂∃∅⦰∆∇∎∞∝∴∵∫∬∭∮∯∰∱∲∳⋮⋯⋰⋱‖ ′ ″ ‴ ⁄ ⁗ ʹ ʺ ‵ ‶ ‷ ←↑→↓↔↕↖↗↘↙▲▼◀▶↺↻⟲⟳↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⥢⥣⥤⥥⥦⥧⥨⥩⥪⥫⥬⥭⥮⥯⇐⇑⇒⇓⇔⇌⇍⇏⇕⇖⇗⇘⇙⇙⇳⊕⊖⊗⊘⊙⊚⊛⊜⊝⊞⊟⊠⊡`

## Equation Expression

Although simple equation expression can be expressed by selecting suitable font family as simple text expression, some complex equation should be constructed in block form. The equation expression can be divided into the equation block and inline equation block. The <code> tag can be used to construct the equation block and both the <q> and <i> tags can be used to construct the inline equation block.

### Equation Block Examples

The pattern: "𝑦=𝑓(𝑥)=109𝑎𝑥2+345𝑏𝑥+678𝑐"

A simple equation block

`𝑦=𝑓(𝑥)=109𝑎𝑥2+345𝑏𝑥+678𝑐`

An equation block inside a list

• A simple equation block after a paragraph

`𝑦=𝑓(𝑥)=109𝑎𝑥2+345𝑏𝑥+678𝑐`

### Inline Equation Examples

The pattern: "𝑦=𝑓(𝑥)=109𝑎𝑥2+345𝑏𝑥+678𝑐"

An inline equation inside a paragraph: 𝑦=𝑓(𝑥)=109𝑎𝑥2+345𝑏𝑥+678𝑐.

Another inline equation inside a paragraph: 𝑦=𝑓(𝑥)=109𝑎𝑥2+345𝑏𝑥+678𝑐.

• An inline equation inside a list: 𝑦=𝑓(𝑥)=109𝑎𝑥2+345𝑏𝑥+678𝑐.
• Another inline equation inside a list: 𝑦=𝑓(𝑥)=109𝑎𝑥2+345𝑏𝑥+678𝑐.

## Equation Form

An eqaution form is used to add additional features to an expression.

### Bar Function

The top border line of a block can be used as the bar of a bar function

The bar function 1: 𝐻=𝑎=𝐻=𝑎𝐻=𝐻𝑎=𝑎

The bar function 2: 𝐻=𝑎=𝐻=𝑎𝐻=𝐻𝑎=𝑎

The bar function 3: 𝐻=𝑎𝐻=𝐻𝑎= 𝑎𝐻𝐻=𝐻𝑎𝑎=𝑎

The bar function 4: 𝐻=𝑎𝐻=𝐻𝑎= 𝑎𝐻𝐻=𝐻𝑎𝑎=𝑎

The pattern of radical function is the combination of radical and bar functions.

The bar function: 𝐻=𝑎=𝐻=𝑎

The bar function: 𝐻=𝑎=𝐻=𝑎

The bar function: 𝐻=𝑎=𝐻=𝑎

The bar function: 𝐻=𝑎𝐻g=𝐻Hg=𝑎

The bar function: 𝐻=𝑎=𝐻Hg=𝑎

### Function Name

A specific tags can be used to construct a function name.

The sine function, sin 𝜃: sin 𝜃.

### Superscripted Block

A complexd superscripted block can be presented as a vertical aligned inline block.

`ℯ1𝑧𝑛=ℯln 2+𝑖𝜋3+2𝑛𝜋𝑖`

### Row Block

#### Two Row Block

A double sized block is a block with font-size of 200% of its parent.

The double sized block

A faction block

`𝛾2:[8𝜋g2,3𝜋2)→ℂ`

Two-row block

```𝛾(𝑡)={8𝑡(1+𝑖), 0≤𝑡≤1 g2+𝑖(3-𝑡), 2≤𝑡≤3 𝛾(𝑡)=8𝑡(1+𝑖), 0≤𝑡≤1 g2+𝑖(3-𝑡), 2≤𝑡≤3```

#### Three Row Block

A triple sized block is a block with font-size of 300% of its parent.

The triple sized block

```𝛾(𝑡)={8𝑡(1+𝑖), 0≤𝑡≤1 𝑡+𝑖, 1≤𝑡≤2 g2+𝑖(3-𝑡), 2≤𝑡≤3```

#### Four Row Block

A fourth sized block is a block with font-size of 400% of its parent.

The fourth sized block

```𝛾(𝑡)={8𝑡(1+𝑖), 0≤𝑡≤1 𝑡+𝑖, 1≤𝑡≤2 𝑡+𝑖, 1≤𝑡≤2 g2+𝑖(3-𝑡), 2≤𝑡≤3```

### Simple Symbol Block

The simple symbol block is a special block for adding a symbol or symbol pair to a block.

#### Double-Sized Vertical Bar

```8=|agfdHgg'g∑g'dHgf𝑏g|=adddg'dH gf𝑏g∑agfdHgg𝑏g=|∑ agfdHgg'g|=8```

#### Double-Sized Round Bracket

```8=(agfdHgg'∑g'dHgf𝑏g)=g' 𝑏g∑444agg𝑏g=(∑ agfdHgg'g'dHgfg∑ )=8```

#### Double-Sized Curly Bracket

```8={agfdHgg'∑g'dHgf𝑏g}=g' 𝑏g∑444agg𝑏g={∑ agfdHgg'g'dHgfg∑ }=8```

#### Double-Sized Curly-Vertical Bracket

```8={agfdHgg'∑g'dHgf𝑏g}=g' 𝑏g∑444agg𝑏g={∑ agfdHgg'g'dHgfg∑ }=8```

#### Square Root

```Square root with bar 1:𝐻=𝑎𝐻g=𝐻Hg=𝑎 Square root with bar 2:𝐻=H=𝐻=𝑎 Square root with bar 2:𝐻=3H=h𝐻=𝑎 Square root without bar 1:𝐻=𝑎𝐻g=𝐻Hg=𝑎 Square root without bar 2:𝐻=H=𝐻=𝑎 Square root with round bracket pair 1:𝐻=𝑎𝐻g=𝐻Hg=𝑎 Square root with round bracket pair 2:𝐻=H=𝐻=𝑎 ```

### Combining Block

Combine and adjust the combining symbol

Combine combining symbol: =ℂ∪{∞}

```Examples UnicodeExampleUnicodeExampleUnicodeExample U+0300ℂU+0301ℂU+0302ℂ U+0303ℂU+0304ℂU+0305ℂ U+0336ℂU+0337ℂU+0338ℂ U+1AB2ℂU+20D0ℂU+20D1ℂ U+20D6ℂU+20D7ℂU+20E1ℂ U+0300cU+0301cU+0302c U+0303cU+0304cU+0305c U+0336cU+0337cU+0338c U+1AB2cU+20D0cU+20D1c U+20D6cU+20D7cU+20E1c ```

## Equation Pattern

An eqaution pattern is used to assemble several expressions together.

### Numeric Fraction Block

A numeric fraction block can be arranged by compressing the right and left magin on the left and right sides of a "/"

The numeric fraction block

```81234567890/1234567890 ahgahg/ahg ```

### Fraction Block

A fraction block can be arranged as a tabular block assembly. The top border line of the denominator block of a fraction block is used as the fraction bar.

Fraction blocks:

• a over b: 𝑎kldfjd kfjlkjfja b c=a b c𝑎kldfjd kfjlkjfj
• H over GH: 𝑎𝑏=𝐻𝐺𝐻
• Simple Fraction: 𝑎𝐻𝐻𝑏=𝐻𝐺𝐻𝐻𝐻
• Compound Fraction: 𝑓(𝑧)=𝑎𝑐𝑧+𝑏𝑐𝑧+𝑑𝑐
• a over b: 𝑎kldfjd kfjlkjfja b c=a b c𝑎kldfjd kfjlkjfj
• H over GH: 𝑎𝑏=𝐻𝐺𝐻
• Simple Fraction: 𝑎𝐻𝐻𝑏=𝐻𝐺𝐻𝐻𝐻
• Compound Fraction: 𝑓(𝑧)=𝑎𝑐𝑧+𝑏𝑐𝑧+𝑑𝑐

### Lower Comment Block

A lower comment block can be arranged as a tabular form assembly. The lower comment block is a text justify aligned block with two end pointers.

The lower comment block

```𝑦=𝑓′(𝑧0)∈ℂ\{0}=𝑓′(𝑧0)−𝑓′(𝑧1)∈ℂ\{0} 𝑦=𝑓′(𝑧0)⟼∈ℂ\{0,1,2}𝑓′(𝑧0)−𝑓′(𝑧1)⟼⟼⟼⟼∈ℂ\{0}𝑓′(𝑧2) 𝑦=a𝑓′(𝑧0) ∈ℂ\{0, 1, 2} =a𝑓′(𝑧0)−𝑏𝑓′(𝑧1) ∈ℂ\{0} ∞∑𝑘=11𝑘=1+12+13+14 ≥1/2} ```

### Upper comment Block

A upper comment block can be arranged as a tabular form assembly. The upper comment block is a block with reduce font size and the symbol block is a block of reduced line-height.

The upper comment block??

```𝑧0rot. & dil.⟼𝑧1trans.⟼⟼⟼⟼𝑧2⟼𝑧 𝑧rot. & dil.⟼𝑎𝑧trans,⟼⟼⟼⟼𝑎𝑧+𝑏```

### Simple Sup-Sub Block

A simple sup-sub block can be used to combine subscripted text block to superscripted block as a single column block .

The inline sup-sub block

Combining a superscripted text, e.g "′", and a subscripted block, 𝛾1(𝑡1).

Combining a superscripted text block and a subscripted block, 𝛾𝑎′1(𝑡1).

`𝛾′1(𝑡1)`

Combining a superscripted and a subscripted block

The inline sup-sub block, 𝛾7890121234(𝑡1).

`𝛾82641345791(𝑡1)`

### Simple Integration Top-Bottom Block

The simple integration top-bottom block is a special block for packing the integration symbol and its limit.

```8=12345∫1234588ffff=8= 1234dHg5885∫12dHg34ffff=12345∫ = ∫1234588=8 8=12345∫1234588ffff=8= 1234dHg5885∫12dHg34ffff=12345∫ = ∫1234588=8```

### Simple Evaluation Bar Top-Bottom Block

The simple evaluation bar top-bottom block is a special block for packing the evaluation bar and its limit.

```8=A12345｜1234588=8=A 1234dHg5885｜12dHg34=A12345｜ =A ｜1234588=8 8=A12345｜1234588=8=A 1234dHg5885｜12dHg34=A12345｜ =A ｜1234588=8```

### Simple Summation Top-Bottom Block

The simple summation top-bottom block is a special block for packing the summation symbol and its limit.

```8=agfdHgg'f𝑏g∑g'dHgf𝑏g= g'dHgf𝑏g∑agfdHgg'f𝑏g=  ∑agfdHgg'f𝑏g= g'dHgf𝑏g∑ =8```

### Simple Product Top-Bottom Block

The simple product top-bottom block is a special block for packing the product symbol and its limit.

```8=agfdHgg'f𝑏g∏g'dHgf𝑏g= g'dHgf𝑏g∏agfdHgg'f𝑏g=  ∏agfdHgg'f𝑏g= g'dHgf𝑏g∏ =8```

ID: 190400015 Last Updated: 15/4/2019 Revision: 0 Ref:

References

1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999

Home 5

Management

HBR 3

Information

Recreation

Culture

Chinese 1097

English 337

Computer

Hardware 151

Software

Application 202

Latex 10

Manim 159

Numeric 19

Programming

Web 285

Unicode 494

HTML 65

CSS 59

ASP.NET 194

OS 391

Python 37

Knowledge

Mathematics

Algebra 29

Geometry 18

Calculus 67

Engineering

Mechanical

Rigid Bodies

Statics 92

Dynamics 37

Control

Natural Sciences

Electric 27