Sideway
output.to from Sideway




Draft for Information Only

Content

CSS Mathematical Form
 Simple Mathematical Form
  Superscript and Subscript
  Fraction
  Function Name
  Overline

CSS Mathematical Form

There are many ways to present complicated mathematical expressions in a HTML web page. However HTML together with CSS can also be used to present most simple mathematical expressions in HTML web pages.

Simple Mathematical Form

There are also many ways to present the mathematical form of an equation. One simple way is to make use of HTML tags and CSS attributes.  

Superscript and Subscript

Since it is not possible to support all necessary super- or sub- symbols by Unicode, the HTML <sup> and <sub> tags with minor modification can be used to construct superscript and subscript in an equation. For example, the font size of <super> and <sub> tags are changed to 60% of parent element. and the vertical-align of <super> tag is raised to 60% of the line-height.

HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<link rel="stylesheet"  type="text/css" href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:300,300i,400,400i,700,700i">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div,p,b,i {font-size:1em; font-family: "IBM Plex Serif"}
div {width:500px;background-color:cyan}
i {display:table-row;font-style: normal;text-decoration:none;background-color:yellow;padding:0em 0.25em}
i>b {display:table-cell;background-color:silver;padding:0em 0.25em}
p {width:auto;background-color:lime;margin:0em 2em}
sup, sub {font-size:60%}
sup {vertical-align:0.72em;line-height:90%}
sub {vertical-align:-0.15em}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div><p>
<i><b>Unicode Superscript:</b>8⁰</i>
<i><b>Unicode Subscript:</b>8₀</i>
<i><b>Superscript Tag:</b>8<sup>0123456789+-=()ni</sup></i>
<i><b>Subscript Tag:</b>8<sub>0123456789+-=()aeoxəhklmnpstiruv</sub></i>
</p></div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Fraction

Similarly, it is also not possible to support all kind of fraction by Unicode,  the HTML <sup> and <sub> tags with minor modification can be used to construct a fraction in an inline block by bounding inside a tag modifier.

HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<link rel="stylesheet"  type="text/css" href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:300,300i,400,400i,700,700i">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div,p,b,i {font-size:1em; font-family: "IBM Plex Serif"}
div {width:500px;background-color:cyan}
i {display:table-row;font-style: normal;text-decoration:none;background-color:yellow;padding:0em 0.25em}
i>b {display:table-cell;background-color:silver;padding:0em 0.25em}
p {width:auto;background-color:lime;margin:0em 2em}
sup, sub {font-size:60%}
sup {vertical-align:0.72em;line-height:90%}
sub {vertical-align:-0.15em}
.zps>sup {margin-right:-0.2em}
.zps>sub {margin-left:-0.2em}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div><p>
<i><b>Unicode Factor:</b>8⅞</i>
<i><b>HTML Tag Factor:</b>8<span class="zps"><sup>0123456789</sup>/<sub>012345678</sub></span>+8</i>
<i><b>HTML Tag Factor:</b>8<sup>8<span class="zps"><sup>0123456789</sup>/<sub>012345678</sub></span></sup>+8</i>
<i><b>HTML Tag Factor:</b>8<sup>8<span class="zps"><sup>8<span class="zps"><sup>0123456789</sup>/<sub>012345678</sub></span></sup>/<sub>012345678</sub></span></sup>+8</i>
<i><b>HTML Tag Factor:</b>8<sub>8<span class="zps"><sup>8<span class="zps"><sup>0123456789</sup>/<sub>012345678</sub></span></sup>/<sub>012345678</sub></span></sub>+8</i>
</p>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Function Name

There are many ways to present the symbolic name of a function. One simple way is to reduce the space between characters in a text by bounding inside a tag modifier.

HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<link rel="stylesheet"  type="text/css" href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:300,300i,400,400i,700,700i">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div,p,b,i {font-size:1em; font-family: "IBM Plex Serif"}
div {width:500px;background-color:cyan}
i {display:table-row;font-style: normal;text-decoration:none;background-color:yellow;padding:0em 0.25em}
i>b {display:table-cell;background-color:silver;padding:0em 0.25em}
p {width:auto;background-color:lime;margin:0em 2em}
sup, sub {font-size:60%}
sup {vertical-align:0.72em;line-height:90%}
sub {vertical-align:-0.15em}
.zps>sup {margin-right:-0.15em}
.zps>sub {margin-left:-0.15em}
u {text-decoration:initial}
u>i {display:inline;padding:0;letter-spacing:-0.05em}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div><p>
<i><b>Unicode Function Name:</b>℃</i>
<i><b>HTML Tag Function Name:</b><u><i>°C°F</i> or <i>TELFAX</i></u></i>
<i><b>Normal Function Name:</b>°C°F or TELFAX</i>
<i><b>HTML Tag Function Name:</b><u><i>Re</i></u><u><i>SIN</i></u><u><i>Sin</i></u><u><i>Func</i></u></i></p>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Overline

There are many ways to add overline. One simple way is to present the overline in form of border-top by adding a class.

HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<link rel="stylesheet"  type="text/css" href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:300,300i,400,400i,700,700i">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div,p,b,i {font-size:1em; font-family: "IBM Plex Serif";line-height:1.2em}
div {width:500px;background-color:cyan}
i {display:table-row;font-style: normal;text-decoration:none;background-color:yellow;padding:0em 0.25em;}
i>b {display:table-cell;background-color:silver;padding:0em 0.25em}
p {width:auto;background-color:lime;margin:0em 2em}
sup, sub {font-size:60%}
sup_old {vertical-align:0.72em;line-height:90%}
sup {vertical-align:0.55em;line-height:90%}
sub {vertical-align:-0.15em}
.zps>sup {margin-right:-0.15em}
.zps>sub {margin-left:-0.15em}
u {text-decoration:initial;}
u>i {display:inline;padding:0;letter-spacing:-0.05em}
.zw {display:inline-block;font-size:1.2em}
.zpt {display:inline-block;font-family:"Arial Unicode MS";}
.rbar {display:inline-block;font-size:0.815em;vertical-align:baseline;border-top:0.05em solid black;margin-left:-0.1em;padding:0.1em 0 0 2.5px;line-height:1em}
.rbar>sup {verti cal-align:0.45em;}
u>b {font-weight:normal;font-size:88%;display:inline-block;hei ght:100%;line-height:1em;margin:0 0.08em;border-top:0.5px solid black;vertical-align:baseline;padding-top:0.1em}
.zpu {display:inline-block;vertical-align:-0.1em;font-size:0.9em;width:0.4em;overflow:hidden;line-height:1.1em;font-family:"Arial Unicode MS";}
q {display:inline-block;padding:0, 0.0em;}
q:before, q:after {content:''}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div><p>
<i><b>Unicode:</b>8gijhk⁸₈ᵨ√8gijhk⁸₈ᵨ</i>
<i><b>Unicode Overline1:</b><u><b>8g⁸₈ᵨ</b></u><u><b>8g</b></u><u><b>⁸₈ᵨ</b></u><u><b>√8g</b></u><u><b>⁸</b></u><u><b>₈ᵨ</b></u></i>
<i><b>Unicode Overline2:</b><u><b>8g</b></u><u><b><u><b>⁸₈ᵨ</b></u></b></u><u><b>√8g</b></u><u><b><u><b>⁸</b></u></b></u><u><b><u><b>₈ᵨ</b></u></b></u><u><b><u><b>√8g</b></u><u><b><u><b>⁸</b></u></b></u><u><b><u><b>₈ᵨ</b></u></b></u></b></u></i>
<i><b>HTML:</b>8g⁸<sup>8</sup>₈ᵨ<sub>8g</sub>√8g⁸<sup>8</sup>₈ᵨ<sub>8g</sub></i>
<i><b>HTML Overline1:</b><u><b>8<sup>8</sup>g⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u>
<u><b>8g</b></u><u><b>⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u>
<u><b>√8g</b></u><u><b>⁸<sup>8</sup></b></u><u><b>₈ᵨ<sub>8g</sub></b></u>
<u><b>√8g</b></u><u><b>⁸</b></u><sup><u><b>8</b></u></sup><sup>8</sup><u><b>₈ᵨ</b></u><sub><u><b>8g</b></u></sub>
</i>
<i><b>HTML Overline2:</b><u><b><u><b>8<sup>8</sup>g⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></b></u>
<u><b><u><b>8g</b></u></b></u><u><b><u><b>⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></b></u>
<u><b><u><b>√8g</b></u></b></u><u><b><u><b>⁸<sup>8</sup></b></u></b></u><u><b><u><b>₈ᵨ<sub>8g</sub></b></u></b></u>
<u><b><u><b>√8g</b></u></b></u><u><b><u><b>⁸</b></u></b></u><u><b><u><b><sup>18</sup></b></u></b></u><sup><u><b><u><b>81</b></u></b></u></sup><sup>8</sup><u><b><u><b>₈ᵨ</b></u></b></u><u><b><u><b><sub>18g</sub></b></u></b></u><sub><u><b><u><b>81g</b></u></b></u></sub>
</i>
<i><b>Unicode Radical:</b>8gj⁸₈ᵨ<u class="zpt">√</u><u class="rbar">8gj⁸₈ᵨ</u>
8<u class="zpt">∛</u><u class="rbar">8gj⁸₈ᵨ</u>
8<u class="zpt">∜</u><u class="rbar">8gj⁸₈ᵨ</u>
</i>
<i><b>Unicode Overline1:</b>8gj<u><b>⁸₈ᵨ</b></u><u class="zpt">√</u><u class="rbar">8gj⁸₈ᵨ</u>
8<u><b><u class="zpt">∛</u><u class="rbar">8gj⁸₈ᵨ</u></b></u>
8<u><b><u><b><u class="zpt">∜</u><u class="rbar">8gj⁸₈ᵨ</u></b></u></b></u>
</i>
<i><b>Unicode Overline2:</b>8gj<u><b><u><b>⁸₈ᵨ</b></u></b></u><u class="zpt">√</u><u class="rbar">8gj⁸₈ᵨ</u>
8<u><b><u class="zpt">∛</u><span class="rbar"><u><b>8gj</b></u><u><b>⁸</b></u><u><b>₈ᵨ</b></u></span></b></u>
8<q class="zw"><u><b><u><b><u class="zpt">∜</u><span class="rbar"><u><b><u><b>8gj</b></u></b></u><u><b><u><b>⁸</b></u></b></u><u><b><u><b>₈ᵨ</b></u></b></u></span></b></u></b></u></q>
</i>
<i><b>Unicode Overline3:</b>8gj⁸₈ᵨ<u class="zpt">√</u><q class="rbar"><u><b>8gj⁸₈ᵨ</b></u></q>
8<u><b><u class="zpt">∛</u><q class="rbar"><u><b><u><b>8gj⁸₈ᵨ</b></u></b></u></q></b></u>
8<q class="zw"><u><b><u><b><u class="zpt">∜</u><span class="rbar"><u><b><u><b>8gj⁸₈ᵨ</b></u></b></u></span></b></u></b></u></q>
</i>
<i><b>Unicode Overline4:</b>8gj⁸₈ᵨ
8<u class="zpt">√</u><u class="rbar">8<u class="zpt">∛</u><u class="rbar">8gj⁸₈ᵨ</u></u>
8<u class="zpt">√</u><u class="rbar">8<u class="zpt">∛</u><u class="rbar">8<u class="zpt">∜</u><u class="rbar">8gj⁸₈ᵨ</u></u></u>
</i>
<i><b>Unicode Overline5:</b>8gj⁸₈ᵨ
8<u class="zpt">√</u><u class="rbar">8<u class="zpt">∛</u><span class="rbar"><u><b>8gj⁸₈ᵨ</b></u></span></u>
8<u class="zpt">√</u><u class="rbar">8<u class="zpt">∛</u><span class="rbar">8<u class="zpt">∜</u><span class="rbar"><u><b>8gj⁸₈ᵨ</b></u></span></span></u>
</i>
<i><b>HTML Radical:</b>8gj⁸<sup>8</sup>₈ᵨ<u class="zpt">√</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u>
8<u class="zpt">∛</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u>
8<u class="zpt">∜</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u>
</i>
<i><b>HTML Overline1:</b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub><u class="zpt">√</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u>
8<u><b><u class="zpt">∛</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u></b></u>
8<u><b><u><b><u class="zpt">∜</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u></b></u></b></u>
</i>
<i><b>HTML Overline2:</b>8gj⁸<sup>8</sup>₈ᵨ<u class="zpt">√</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u>
8<u><b><u class="zpt">∛</u><span class="rbar"><u><b>8gj</b></u><u><b>⁸<sup>8</sup></b></u><u><b>₈ᵨ<sub>8g</sub></b></u></span></b></u>
8<q class="zw"><u><b><u><b><u class="zpt">∜</u><span class="rbar"><u><b><u><b>8gj</b></u></b></u><u><b><u><b>⁸<sup>8</sup></b></u></b></u><u><b><u><b>₈ᵨ<sub>8g</sub></b></u></b></u></span></b></u></b></u></q>
</i>
<i><b>HTML Overline3:</b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub><u class="zpt">√</u><q class="rbar"><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></q>
8<u><b><u class="zpt">∛</u><q class="rbar"><u><b><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></b></u></q></b></u>
8<q class="zw"><u><b><u><b><u class="zpt">∜</u><span class="rbar"><u><b><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></b></u></span></b></u></b></u></q>
</i>
<i><b>HTML Overline4:</b>8gj⁸₈ᵨ<sub>8g</sub>
8<u class="zpt">√</u><u class="rbar">8<u class="zpt">∛</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u></u>
8<u class="zpt">√</u><u class="rbar">8<u class="zpt">∛</u><u class="rbar">8<u class="zpt">∜</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u></u></u>
</i>
<i><b>HTML Overline5:</b>8gj⁸₈ᵨ<sub>8g</sub>
8<u class="zpt">√</u><u class="rbar">8<u class="zpt">∛</u><span class="rbar"><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></span></u>
8<u class="zpt">√</u><u class="rbar">8<u class="zpt">∛</u><span class="rbar">8<u class="zpt">∜</u><span class="rbar"><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></span></span></u>
</i>
<i><b>Unicode Long:</b>8gj⁸₈ᵨ⟌8gj⁸₈ᵨ</i>
<i><b>Unicode Overline:</b>8gj⁸₈ᵨ<u class="zpu">⟌</u><u class="rbar">8gj⁸₈ᵨ</u>
8<u class="zpu">⟌</u><u class="rbar">8gj⁸₈ᵨ<u class="zpu">⟌</u><u class="rbar">8gj⁸₈ᵨ</u></u>
<q>8<u class="zpu">⟌</u><u class="rbar">8gj⁸₈ᵨ<u class="zpu">⟌</u><u class="rbar">8gj⁸₈ᵨ<u class="zpu">⟌</u><u class="rbar">8gj⁸₈ᵨ</u></u></u></q>
</i>
<i><b>HTML Overline1:</b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub><u class="zpu">⟌</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u>
8<u><b><u class="zpu">⟌</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u></b></u>
8<u><b><u><b><u class="zpu">⟌</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u></b></u></b></u>
</i>
<i><b>HTML Overline2:</b>8gj⁸<sup>8</sup>₈ᵨ<u class="zpu">⟌</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u>
8<u><b><u class="zpu">⟌</u><span class="rbar"><u><b>8gj</b></u><u><b>⁸<sup>8</sup></b></u><u><b>₈ᵨ<sub>8g</sub></b></u></span></b></u>
8<q class="zw"><u><b><u><b><u class="zpu">⟌</u><span class="rbar"><u><b><u><b>8gj</b></u></b></u><u><b><u><b>⁸<sup>8</sup></b></u></b></u><u><b><u><b>₈ᵨ<sub>8g</sub></b></u></b></u></span></b></u></b></u></q>
</i>
<i><b>HTML Overline3:</b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub><u class="zpu">⟌</u><q class="rbar"><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></q>
8<u><b><u class="zpu">⟌</u><q class="rbar"><u><b><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></b></u></q></b></u>
8<q class="zw"><u><b><u><b><u class="zpu">⟌</u><span class="rbar"><u><b><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></b></u></span></b></u></b></u></q>
</i>
<i><b>HTML Overline4:</b>8gj⁸₈ᵨ<sub>8g</sub>
8<u class="zpu">⟌</u><u class="rbar">8<u class="zpu">⟌</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u></u>
8<u class="zpu">⟌</u><u class="rbar">8<u class="zpu">⟌</u><u class="rbar">8<u class="zpu">⟌</u><u class="rbar">8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></u></u></u>
</i>
<i><b>HTML Overline5:</b>8gj⁸₈ᵨ<sub>8g</sub>
8<u class="zpu">⟌</u><u class="rbar">8<u class="zpu">⟌</u><span class="rbar"><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></span></u>
8<u class="zpu">⟌</u><u class="rbar">8<u class="zpu">⟌</u><span class="rbar">8<u class="zpu">⟌</u><span class="rbar"><u><b>8gj⁸<sup>8</sup>₈ᵨ<sub>8g</sub></b></u></span></span></u>
</i>
<i><b>Unicode:</b>8gijhk</i>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support


©sideway
close

References

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

ID: 181200302 Last Updated: 2018/12/26 Revision: 2 Ref:

IMAGE

Home (5)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (335)

Reference (66)

Computer

Hardware (149)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (554)new

CSS (SC)

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (368)

MS Windows

Windows10 (SC)

DeskTop (6)

Knowledge

Mathematics

Formulas (8)

Number Theory (206)

Algebra (17)

Trigonometry (18)

Geometry (18)

Calculus (67)

Complex Analysis (13)new

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)

Biology (1)

Geography (1)

Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019