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

ID: 181200302 Last Updated: 12/26/2018 Revision: 2 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

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

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

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


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