Pure HTML Math: Difference between revisions
From Elliptic Curve Crypto
br element has no applicable css settings |
Directly in the wiki code |
||
| Line 45: | Line 45: | ||
Same in Firefox | Same in Firefox | ||
[[Image:Matheq-ff.png]] | [[Image:Matheq-ff.png]] | ||
== Directly in the wiki code <br> (view source for comparison) == | |||
<div style="text-align:center"><i>x</i> | |||
= <div style="display:inline-block;vertical-align:middle; | |||
text-align:center">– <i>b</i> | |||
± <big>√</big><div style="display:inline-block;border-top:1pt solid"> | |||
<i>b</i><sup>2</sup> – 4<i>ac</i></div> | |||
<hr style="border-top:1pt solid;border-bottom:0"> | |||
2<i>a</i></div> | |||
</div></div> | |||
<hr> | |||
<div style="text-align:center"> | |||
<i>ζ</i>(<i>s</i>) = <div style="display:inline-block;vertical-align:middle;text-align:center;line-height:1.5ex"> | |||
<font size="1" style="line-height:4ex">∞</font><br> | |||
<font size="6" style="line-height:1ex">Σ</font><br> | |||
<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> | |||
Revision as of 13:31, 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
± √
2a
b2 – 4ac
2a
ζ(s) =
∞
Σ
n = 1
1
ns
ns
