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:
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:
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:
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.
Nu Html Checker 
53 
na 
na
