Pure HTML Math: Difference between revisions

From Elliptic Curve Crypto
Directly in the wiki code
Line 53: Line 53:
± <big>√</big><div style="display:inline-block;border-top:1pt solid">
± <big>√</big><div style="display:inline-block;border-top:1pt solid">
<i>b</i><sup>2</sup> – 4<i>ac</i></div>
<i>b</i><sup>2</sup> – 4<i>ac</i></div>
<hr style="border-top:1pt solid;border-bottom:0">
<hr style="border-top:1pt solid;border-bottom:0;margin:0;padding:0">
2<i>a</i></div>
2<i>a</i></div>
</div></div>
</div></div>
Line 62: Line 62:
<font size="6" style="line-height:1ex">Σ</font><br>
<font size="6" style="line-height:1ex">Σ</font><br>
<font size="1"><i>n</i> = 1</font>
<font size="1"><i>n</i> = 1</font>
</div> <div style="display:inline-block;vertical-align:middle;text-align:center">1<hr style="border-top:1pt solid;border-bottom:0"><i>n</i><sup><i>s</i></sup>
</div> <div style="display:inline-block;vertical-align:middle;text-align:center">1<hr style="border-top:1pt solid;border-bottom:0;margin:0;padding:0"><i>n</i><sup><i>s</i></sup>

Revision as of 13:33, 18 January 2025

I have very clear readable math equations built from very simple HTML, CSS, and UTF-8 math characters. First draft scratchpad code. My thesis is that nothing fancier or more complicated is required to display math equations on the web. I use vertical-align:middle; and nothing more precise or delicate is required.

This is Google Chrome displaying the following code.

<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<style>
.math div{
	display:inline-block;
	vertical-align:middle;
	text-align:center;}
.math div.sqrt {
	border-top:1px solid;}
.math hr{
	border-top:1px solid;
	border-left:0;border-right:0;border-bottom:0;
	margin:0;padding:0}
</style>
<title>Math Equations</title>
</head>
<body>
<h1>Math</h1>
<div class="math"><i>x</i> = <div><i>b</i>
± <big></big><div class="sqrt">
<i>b</i><sup>2</sup> – 4<i>ac</i></div>
<hr>
2<i>a</i></div>
</div>
<hr>
<div class="math">
<i>ζ</i>(<i>s</i>) =
<div style="line-height:1.5ex">
<font size="1" style="line-height:3.5ex"></font><br>
<font size="6" style="line-height:1ex">Σ</font><br>
<font size="1"><i>n</i> = 1</font>
</div>
<div>1<hr><i>n</i><sup><i>s</i></sup></div>
</div>
</body></html>

Same in Firefox

Directly in the wiki code
(view source for comparison)

x =
b ±
b2 – 4ac

2a

ζ(s) =


Σ
n = 1

1
ns