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

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=𝐻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'gg'dHgf𝑏g|=adddg'dH gf𝑏gagfdHgg𝑏g=| agfdHgg'g|=8

Double-Sized Round Bracket

8=(agfdHgg'g'dHgf𝑏g)=g' 𝑏g444agg𝑏g=( agfdHgg'g'dHgfg )=8

Double-Sized Curly Bracket

8={agfdHgg'g'dHgf𝑏g}=g' 𝑏g444agg𝑏g={ agfdHgg'g'dHgfg }=8

Double-Sized Curly-Vertical Bracket

8={agfdHgg'g'dHgf𝑏g}=g' 𝑏g444agg𝑏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+0300U+0301U+0302 U+0303U+0304U+0305 U+0336U+0337U+0338 U+1AB2U+20D0U+20D1 U+20D6U+20D7U+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=123451234588ffff=8= 1234dHg588512dHg34ffff=12345 = 1234588=8 8=123451234588ffff=8= 1234dHg588512dHg34ffff=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=A123451234588=8=A 1234dHg588512dHg34=A12345 =A 1234588=8 8=A123451234588=8=A 1234dHg588512dHg34=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𝑏gg'dHgf𝑏g= g'dHgf𝑏gagfdHgg'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𝑏gg'dHgf𝑏g= g'dHgf𝑏gagfdHgg'f𝑏g=  agfdHgg'f𝑏g= g'dHgf𝑏g =8

©sideway

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

close

References

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

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 149

Software

Application 198

Digitization 119

Numeric 19

Programming

Web 283

Unicode 494

HTML 65

CSS 58

ASP.NET 97

OS 389

DeskTop 7

Python 19

Knowledge

Mathematics

Formulas 8

Algebra 25

Number Theory 206

Trigonometry 18

Geometry 18

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Physics

Electric 27

Biology 1

Geography 1


Copyright © 2000-2020 Sideway . All rights reserved Disclaimers last modified on 06 September 2019