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

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𝑎𝑥²+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𝑎𝑥²+345𝑏𝑥+678𝑐"

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

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

• An inline equation inside a list: 𝑦=𝑓(𝑥)=109𝑎𝑥²+345𝑏𝑥+678𝑐.
• Another inline equation inside a list: 𝑦=𝑓(𝑥)=109𝑎𝑥²+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: 𝐻=𝑎^𝐻=𝐻^𝑎= 𝑎^𝐻𝐻=𝐻^𝑎𝑎=𝑎

Radical Function

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=𝐻^H_g=𝑎

The bar function: 𝐻=𝑎=𝐻^H_g=𝑎

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: ℂ=ℂ∪{∞}

Add 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, 𝛾′₁(𝑡₁).

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

𝛾′1(𝑡1)

Combining a superscripted and a subscripted block

The inline sup-sub block, 𝛾⁷⁸⁹⁰¹²₁₂₃₄(𝑡₁).

𝛾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