Sideway
output.to from Sideway



Simple Maths Form


Draft for Information Only

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 {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 {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<sup>8<span class="zps"><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<sup>8<span class="zps"><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, q {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

Radical Overline

There are many ways to add the overline to radicand. 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 {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}
.zpt {line-height:82%;font-family:"Arial Unicode MS";}
.rbar {font-size:82%;border-top:0.06em solid black}
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 Radical:</b>√8⁸∛8⁸∜8⁸</i>
<i><b>HTML Tag Radical with Overline:</b><span class="zpt">√<q class="rbar">4⁸<sup>8</sup><sub>8</sub></q>∛<q class="rbar">4⁸<sup>8</sup></q>∜<q class="rbar">4⁸</q></span></i>
<i><b>Long Division:</b>⟌8⁸8⁸</i>
<i><b>HTML Tag Long Division with Overline:</b><span class="zpt">⟌<q class="rbar">84⁸<sup>8</sup><sub>8</sub></q></span></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 {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}
.zpt {line-height:82%;font-family:"Arial Unicode MS";}
u>b, .rbar {font-size:82%;border-top:0.06em solid black}
u>b {line-height:82%;}
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 Radical:</b>√8⁸∛8⁸∜8⁸</i>
<i><b>Unicode Radical:</b><u><b>√8⁸∛8⁸∜8⁸</b></u></i>
<i><b>HTML Tag Radical with Overline:</b><u><b><span class="zpt"><u><b>√<q class="rbar">4⁸<sup>8</sup><sub>8</sub></q></b></u>∛<q class="rbar">4⁸<sup>8</sup></q>∜<u><b><q class="rbar">4⁸</q></b></u></span></b></u></i>
<i><b>Long Division:</b>⟌8⁸8⁸</i>
<i><b>Long Division:</b><u><b>⟌8⁸8⁸</b></u></i>
<i><b>HTML Tag Long Division with Overline:</b><u><b><span class="zpt">⟌<u><b><q class="rbar">84⁸<sup>8</sup><sub>8</sub></q></b></u></span></b></u></i></p>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support


©sideway
close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

ID: 181200302 Last Updated: 2018/12/3 Revision: Ref:

IMAGE

Home (1)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (334)new

Reference (60)

Computer

Hardware (148)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (533)

HTML

Knowledge Base

Common Color (1)

Html Entity (Unicode) (1)

Html 401 Special (1)

OS (366)

MS Windows

Windows10 (1)

DeskTop (5)

Knowledge

Mathematics

Formulas (8)

Number Theory (128)new

Algebra (14)

Trigonometry (18)

Geometry (18)

Calculus (66)

Engineering

Tables (8)

Mechanical

Control

Process Control (1)

Mechanics (1)

Rigid Bodies

Statics & Dynamics (128)

Fluid (5)

Fluid Kinematics (5)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)


facebook
Latest Updated Links

Copyright © 2000-2018 Sideway . All rights reserved Disclaimersfacebook last modified on 08 Mar 2018