Sideway BICK BlogSideway BICK BLOG from Sideway

A Sideway to Sideway Home
Home
Output.to

Link:http://output.to/sideway/default.asp?qno=190300021

Knowledge Base CSS Mathematical Form Row Form

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
Previous Month  MAR  2019  Next Month
SMTWTFS
12
3456789
10111213141516
17181920212223
24252627282930
31

Previous Month  OCT  2016  Next Month
SMTWTFS
1
2345678
9101112131415
16171819202122
23242526272829
3031

Sideway BICK Blog

21/03

Copyright © 2000-2020 Sideway . All rights reserved Disclaimerslast modified on 26 January 2013