Sideway
output.to from Sideway
Draft for Information Only

Content

CSS Mathematical Form
 Compound Mathematical Form
  Fraction in Row Form
  2-Row Form Function
  3-Row Form Function

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.

Compound 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. 

Fraction in Row Form

There are many ways to present fraction in row form. One simple way is to arrange row fraction in tabular form.
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:100,100i,200,200i,300,300i,400,400i,700,700i&amp;subset=latin-ext">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 100; src: local('IBM Plex Serif Thin Italic'), local('IBMPlexSerif-ThinItalic'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizHREVNn1dOx-zrZ2X3pZvkTiUa41YjjH7K.woff) format('woff');}
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 200; src: local('IBM Plex Serif ExtraLight Italic'), local('IBMPlexSerif-ExtraLightItalic'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizGREVNn1dOx-zrZ2X3pZvkTiUa4_oym1npiw.woff) format('woff');}
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 300; src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff) format('woff');}
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 400; src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff) format('woff');}
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 700; src: local('IBM Plex Serif Bold Italic'), local('IBMPlexSerif-BoldItalic'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizGREVNn1dOx-zrZ2X3pZvkTiUa4442m1npiw.woff) format('woff');}
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 100; src: local('IBM Plex Serif Thin'), local('IBMPlexSerif-Thin'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizBREVNn1dOx-zrZ2X3pZvkTi186zUTiA.woff) format('woff');}
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 200; src: local('IBM Plex Serif ExtraLight'), local('IBMPlexSerif-ExtraLight'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizAREVNn1dOx-zrZ2X3pZvkTi3Q-iI0q10.woff) format('woff');}
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 300; src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff) format('woff');}
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 400; src: local('IBM Plex Serif'), local('IBMPlexSerif'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff) format('woff');}
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 700; src: local('IBM Plex Serif Bold'), local('IBMPlexSerif-Bold'), url(https://fonts.gstatic.com/s/ibmplexserif/v4/jizAREVNn1dOx-zrZ2X3pZvkTi2k_iI0q10.woff) format('woff');}
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:''}
.zr1 {display:table-cell;border-bottom:0.01em solid black;padding:0.5px 1px;}
.zr2 {display:table-cell;border-top:0em solid black;padding:0.5px 1px;}
.z000, .z0100, .z0200 {display:inline-table;padding:0px 2px;height:100%;vertical-align:50%;text-align:center}
.z0100 {hei ght:4.8em;vertical-align:100%}
.z0200 {hei ght:3.5em;vertical-align:150%}
.z000 .z000, .z0100 .z000, .z0200 .z000 {font-size:0.85em}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div><p>
<i><b>Row Form Factor1:</b>
x=<span class="z000"><i><u class="zr1">Fht</u></i><u class="zr2">Fight</u></span>; 
x=<span class="z000"><i><u class="zr1">Fight</u></i><u class="zr2">Fht</u></span>; 
</i>
<i><b>Row Form Factor2:</b>
x=<span class="z000"><i><u class="zr1">
Fight
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>
</u></i>
<u class="zr2">Fht</u></span>; 
</i>
<i><b>Row Form Factor3:</b>
x=<span class="z000"><i><u class="zr1">Fhtaaaaaaa</u></i><u class="zr2">
<span class="z000"><i><u class="zr1">Fht</u></i><u class="zr2">Fight</u></span>
</u></span>; 
</i>
<i><b>Row Form Factor4:</b>
x=<span class="z000"><i><u class="zr1">F</u></i><u class="zr2">
<span class="z000"><i><u class="zr1">Fht</u></i><u class="zr2">Fight</u></span>
</u></span>; 
x=<span class="z0100"><i><u class="zr1">
<span class="z000"><i><u class="zr1">Fh</u></i><u class="zr2">Fg</u></span>
</u></i>
<u class="zr2">
Fg
</u></span>; 
</i>
<i><b>Row Form Factor5:</b>
x=<span class="z0100"><i><u class="zr1">
<span class="z000"><i><u class="zr1">Fh</u></i><u class="zr2">Fg</u></span>
</u></i>
<u class="zr2">
<span class="z000"><i><u class="zr1">Fht</u></i><u class="zr2">Fight</u></span>
</u></span>; 
x=<span class="z0200"><i><u class="zr1">
<span class="z000"><i><u class="zr1"><span class="z000"><i><u class="zr1">Fh</u></i><u class="zr2">Fg</u></span></u></i>
<u class="zr2">Fg</u></span>
</u></i>
<u class="zr2">
Fg
</u></span>; 
</i>
<i><b>Row Form Factor6:</b>
x=<span class="z0200"><i><u class="zr1">
<span class="z000"><i><u class="zr1"><span class="z000"><i><u class="zr1">F<sup>i</sup>g<sub>g</sub></u></i><u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span></u></i>
<u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span>
</u></i>
<u class="zr2">
F<sup>i</sup>g<sub>g</sub>
</u></span>; 
x=<span class="z0100"><i><u class="zr1">
<span class="z000"><i><u class="zr1">F<sup>i</sup>g<sub>g</sub></u></i>
<u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span>
</u></i>
<u class="zr2">
F<sup>i</sup>g<sub>g</sub>
</u></span>; 
</i>
</p></div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

2-Row Form Function

There are many ways to present fraction in row form. One simple way is to arrange row form function in tabular form.
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:''}
.zr1 {display:table-cell;border-bottom:0.01em solid black;padding:0.5px 1px;}
.zr2 {display:table-cell;border-top:0em solid black;padding:0.5px 1px;}
.z000, .z0100, .z0200, .z0300 {display:inline-table;padding:0px 2px;heig ht:100%;vertical-align:50%;text-align:center}
.z0100 {hei ght:4.8em;vertical-align:100%}
.z0200 {hei ght:3.5em;vertical-align:150%}
.z0300 {hei ght:3.5em;vertical-align:middle}
.z000 .z000, .z0100 .z000, .z0200 .z000 {font-size:0.85em}
.z001 {display:inline-block;padding:0px 4px 0px 2px;height:100%;vertical-align:-70%;text-align:center}
.z002 {display:inline-block;padding:0px 4px 0px 2px;height:100%;vertical-align:-80%;text-align:center}
.zx0 {display:block;line-height:1.2em;font-size:1em}
.zx1 {display:block;line-height:1.4em;font-size:0.6em}
.zx2 {display:block;line-height:0.7em;font-size:2em;font-weight:lighter;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div><p>
<i><b>2-Row Form:</b>
x=<span class="z000"><u class="zx0"><i>limg</i></u><u class="zx0">f→g</u></span>
<span class="xhp dib ovm tac"><span class="ib xhp50 bwb1 bss">h(f)-h(g)</span><br><span class="dib bwt1 tac"></span></span>
</i>
<i><b>2-Row Form Function1:</b>
x=<span class="z001"><u class="zx0"><i>limg</i></u><u class="zx1">f→g</u></span>
<span class="xhp dib ovm tac"><span class="ib xhp50 bwb1 bss">h(f)-h(g)</span><br><span class="dib bwt1 tac"></span></span>
</i>
<i><b>2-Row Form Function2:</b>
x=<span class="z001"><u class="zx0"><i>limg</i></u><u class="zx1">x<sup>1f</sup>→x<sub>g</sub></u></span>
<span class="z0200"><i><u class="zr1">
<span class="z000"><i><u class="zr1"><span class="z000"><i><u class="zr1">F<sup>i</sup>g<sub>g</sub></u></i><u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span></u></i>
<u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span>
</u></i>
<u class="zr2">
F<sup>i</sup>g<sub>g</sub>
</u></span>
=<span class="z000"><i><u class="zr1">Fht</u></i><u class="zr2">Fight</u></span>; 
</i>
<i><b>2-Row Form Function3:</b>
x=<span class="z001"><u class="zx0"><i>limg</i></u><u class="zx1">x<sup>1f</sup>→x<sub>g</sub></u></span>
<span class="z0100"><i><u class="zr1">
<span class="z000"><i><u class="zr1">8<span class="zps"><sup>8</sup>/<su9</sub></span>+8</u></i>
<u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span>
</u></i>
<u class="zr2">
F<sup>i</sup>g<sub>g</sub>
</u></span>
=<span class="z000"><i><u class="zr1">Fht</u></i><u class="zr2">8<span class="zps"><sup>8</sup>/<su9</sub></span>+8</u></span>; 
</i>
<i><b>2-Row Form Function4:</b>
x=<span class="z001"><u class="zx0"><i>limg</i></u><u class="zx1">x<sup>1f</sup>→x<sub>g</sub></u></span>
<span class="z0200"><i><u class="zr1">
<span class="z000"><i><u class="zr1"><span class="z000"><i><u class="zr1">F<sup>i</sup>g<sub>g</sub></u></i><u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span></u></i>
<u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span>
</u></i>
<u class="zr2">
8<span class="zps"><sup>8</sup>/<su9</sub></span>+8
</u></span>
=<span class="z000"><i><u class="zr1">8<span class="zps"><sup>8</sup>/<su9</sub></span>+8</u></i><u class="zr2">Fight</u></span>; 
</i>
<i><b>2-Row Form Function5:</b>
x=<span class="z002"><u class="zx2">Σ</u><u class="zx1">f<sup>1f</sup>∊g</u></span>
h(f)
</i>
</p></div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

3-Row Form Function

There are many ways to present fraction in row form. One simple way is to arrange row form function in tabular form.
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:''}
.zr1 {display:table-cell;border-bottom:0.01em solid black;padding:0.5px 1px;}
.zr2 {display:table-cell;border-top:0em solid black;padding:0.5px 1px;}
.z000, .z0100, .z0200, .z0300 {display:inline-table;padding:0px 2px;heig ht:100%;vertical-align:50%;text-align:center}
.z0100 {hei ght:4.8em;vertical-align:100%}
.z0200 {hei ght:3.5em;vertical-align:150%}
.z0300 {hei ght:3.5em;vertical-align:middle}
.z000 .z000, .z0100 .z000, .z0200 .z000 {font-size:0.85em}
.z001 {display:inline-block;padding:0px 4px 0px 2px;height:100%;vertical-align:-70%;text-align:center}
.z002 {display:inline-block;padding:0px 4px 0px 2px;height:100%;vertical-align:-80%;text-align:center}
.zx0 {display:block;line-height:1.2em;font-size:1em}
.zx1 {display:block;line-height:1.4em;font-size:0.6em}
.zx2 {display:block;line-height:0.7em;font-size:2em;font-weight:lighter;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div><p>
<i><b>3-Row Form:</b>
x=<span class="z0300"><u class="zx0"><i>limg<sup>i</sup>g<sub>g</sub></i></u><u class="zx0">f→g<sup>i</sup>g<sub>g</sub></u><u class="zx0">abc</u></span>
<span class="xhp dib ovm tac"><span class="ib xhp50 bwb1 bss">h(f)-h(g)</span><br><span class="dib bwt1 tac"></span></span>
</i>
<i><b>3-Row Form Function1:</b>x=<span class="z002">
<u class="zx1">f<sup>1f</sup>∊g</u>
<u class="zx2">Σ</u><u class="zx1">f<sup>1f</sup>∊g</u>
</span>h(f)
</i>
<i><b>3-Row Form Function2:</b>x=<span class="z002">
<u class="zx1">f<sup>1f</sup>∊g</u>
<u class="zx2">Σ</u><u class="zx1">f<sup>1f</sup>∊g</u>
</span>h(f)
=<span class="z000"><i><u class="zr1">Fht</u></i><u class="zr2">Fight</u></span>; 
</i>
<i><b>3-Row Form Function3:</b>x=<span class="z002">
<u class="zx1">f<sup>1f</sup>∊g</u>
<u class="zx2">Σ</u><u class="zx1">f<sup>1f</sup>∊g</u>
</span>
<span class="z0200"><i><u class="zr1">
<span class="z000"><i><u class="zr1"><span class="z000"><i><u class="zr1">F<sup>i</sup>g<sub>g</sub></u></i><u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span></u></i>
<u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span>
</u></i>
<u class="zr2">
F<sup>i</sup>g<sub>g</sub>
</u></span>
=<span class="z000"><i><u class="zr1">Fht</u></i><u class="zr2">Fight</u></span>; 
</i>
<i><b>3-Row Form Function4:</b>x=<span class="z002">
<u class="zx1">f<sup>1f</sup>∊g</u>
<u class="zx2">Σ</u><u class="zx1">f<sup>1f</sup>∊g</u>
</span>
<span class="z0100"><i><u class="zr1">
<span class="z000"><i><u class="zr1">8<span class="zps"><sup>8</sup>/<su9</sub></span>+8</u></i>
<u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span>
</u></i>
<u class="zr2">
F<sup>i</sup>g<sub>g</sub>
</u></span>
=<span class="z000"><i><u class="zr1">Fht</u></i><u class="zr2">8<span class="zps"><sup>8</sup>/<su9</sub></span>+8</u></span>; 
</i>
<i><b>3-Row Form Function5:</b>x=<span class="z002">
<u class="zx1">f<sup>1f</sup>∊g</u>
<u class="zx2">Σ</u><u class="zx1">f<sup>1f</sup>∊g</u>
</span>
<span class="z0200"><i><u class="zr1">
<span class="z000"><i><u class="zr1"><span class="z000"><i><u class="zr1">F<sup>i</sup>g<sub>g</sub></u></i><u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span></u></i>
<u class="zr2">F<sup>i</sup>g<sub>g</sub></u></span>
</u></i>
<u class="zr2">
8<span class="zps"><sup>8</sup>/<su9</sub></span>+8
</u></span>
=<span class="z000"><i><u class="zr1">8<span class="zps"><sup>8</sup>/<su9</sub></span>+8</u></i><u class="zr2">Fight</u></span>; 
</i>
</p></div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

©sideway

ID: 190300021 Last Updated: 3/21/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
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 339new

Travel 8new

Reference 79

Computer

Hardware 251

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 431

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Set 1

Logic 1

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