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: 21/3/2019 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 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 7

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 149

Software

Application 187

Digitization 24

Numeric 19

Programming

Web 757

CSS 1

ASP.NET 1

Regular Expression 1

HTML

Knowledge Base

Common Color 1

Html Entity (Unicode) 1

Html 401 Special 1

OS 389

MS Windows

Windows10 1

.NET Framework 1

DeskTop 7

Knowledge

Mathematics

Formulas 8

Algebra 20

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 10

Biology 1

Geography 1


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