Math - CSS Lib | CSS: Presentation Layer
Standards Based Development
sub and sup
sub and sub can be used in chemical formulas and mathematical indices where the presentation is helpful but not required, for example:
Chemical formulas include H2O (water) and C21H27NO (methadone).
Let x = x1 + x2 + ... + xn .
<p class="demop">Chemical formulas include H<sub>2</sub>O (water) and C<sub>21</sub>H<sub>27</sub>NO (methadone).</p>
<p class="demop">Let <var>x</var> = <var>x<sub>1</sub></var> + <var>x<sub>2</sub></var> + ... + <var>x<sub>n</sub></var>.</p>
sup can be used for mathematical exponents where the context implies the meaning of the exponent, as well as other cases where superscript presentation is helpful but not required. For example:
The rent is due on the 1st of each month.
An example of a quadratic polynomial is 3x2 + 5x - 7.
<p class="demop">The rent is due on the 1<sup>st</sup> of each month.</p>
<p class="demop">An example of a quadratic polynomial is <strong>3<var>x</var><sup class="exponent">2</sup> + 5<var>x</var> - 7</strong>.</p>
Superscripting is essential for expressing exponentation.
Two-Dimensonality
Superscripts and subscripts for two-dimensionality in forumulas to simulate notations that should really be written above and below a symbol. The following example shows the markup for an infinite sum:
∑i=0∞ xi ∑i=0∞ xi
∑<sub><var>i</var>=0</sub><sup>∞</sup>
<var>x<sub>i</sub></var>
∑i=0∞ xi
That means summation of xi (with i as subscript) from i=0 to infinity.
Note: the previous example the infinity symbol was used, however it is typically rendered by most user agents not appearing above i=0, but to the right of it, ala supercript styles. Worst case scenario resulting from this: the reader mistakes the an exponents lower limit for its upper limit...which is simply no bueno.
Another approach is to avoid sup entirely and put the limits into sub, like so "i=0,…,∞". This technique utilizes horizontal ellipsis; midline horizontal ellipsis is optimal, however is lacking in browser support.
The Infinity Symbol ∞
∞, the infinity symbol is typically rendered smaller than the font sizes around it; aside from being undesirable, special character symbols are prone to becoming unreadable after reducing font size; a good work around here is setting font-size to larger (if using relative values) than its siblings font-size(s).
sup and sub Together
Ion Notation
sup and sub can and are often used together, like formulas for ions in chemistry. The example below is simply positioning a one-character sup above a one-character sub:
Consider the formula: NO3−
<p class="demop">Consider the formula: NO<sub>3</sub><sup>−</sup></p>
In the example above, the letter O has both sub “3” and sup “–”; note: the ascii hyphen is a poor choice because of its short length. By default, the above markup puts the superscript to the right of the subscript.
Ionic notation always has a superscript and may have a subscript, so put the sup first and move sub to the left, as shown in the example below attempts to achieve the same placement by using a negative margin:
NO−3
Which we achieved using the following markup and styles:
<p class="demop">
<span class="ions">
NO
<sup>
−
</sup>
<sub>3
</sub>
</span>
</p>
.ions { line-height: 1.8; }
.ions sub { margin-left: -1ex; }
http://www.cs.tut.fi/~jkorpela/math/index.html
(p + q)(r + s) = (p + q)r + (p + q)s = pr +qr + ps +qs
<h3 class="demoh2">(<var>p</var> + <var>q</var>)(<var>r</var> + <var>s</var>)
= (<var>p</var> + <var>q</var>)<var>r</var> + (<var>p</var> + <var>q</var>)<var>s</var> = <var>p</var><var>r</var> +
<var>q</var><var>r</var> + <var>p</var><var>s</var> +
<var>q</var><var>s</var></h3>
.demoh3 var{font-style:italic; color: #060;}
Common Something
| A few symbols used in mathematics and physics | |
|---|---|
| ¬ | not sign |
| ¯ | overline, macron |
| ˉ | small overline |
| ^ | circumflex |
| ˆ | small circumflex |
| ~ | tilde |
| ˜ | small tilde |
| ° | degree sign |
| ¹ | superscript 1 |
| ² | superscript 2 |
| ³ | superscript 3 |
| × | multiplication sign |
| ÷ | division sign |
| ± | plus-minus sign |
| − | minus sign |
| – | en dash |
| — | em dash |
| † | dagger |
| · | middle dot, centered period |
| · | middle dot, centered period (boldface) |
| • | bullet |
| … | ellipsis |
| ‰ | per mille sign, per thousand sign |
| ' | apostrophe (italics) |
| ′ | prime, minute |
| ″ | double prime, second |
| ⁄ | fraction slash |
| ← | leftwards arrow |
| ↑ | upwards arrow |
| → | rightwards arrow |
| ↓ | downwards arrow |
| ↔ | left right arrow |
| ↕ | up down arrow |
| √ | radical, square root |
| ∞ | infinity |
| ∩ | intersection |
| ∫ | integral |
| ⌠ ⌡ |
top half integral |
| bottom half integral | |
| ≈ | approximately equal to |
| ≠ | not equal to |
| ≡ | identical to |
| ≤ | less than or equal to |
| ≥ | greater than or equal to |
| ∂ | partial differential |
| ƒ | script f, f with hook |
| ∆ | difference, increment |
| Δ | Delta |
| µ | micro sign |
| μ | mu |
| ∏ | product |
| Π | Pi |
| ∑ | sum, summation |
| Σ | Sigma |
| Ω | ohm sign |
| Ω | Omega |
| More | … |
The Greek alphabet
Α Β Γ Δ Ε Ζ Η Θ
Ι Κ Λ Μ Ν Ξ Ο Π
Ρ Σ Τ Υ Φ Χ Ψ Ω
α β γ δ ε ζ η ϑ θ
ι κ λ μ ν ξ ο π
ρ σ τ υ φ ϕ χ ψ ω
Α Β Γ Δ Ε Ζ Η Θ
Ι Κ Λ Μ Ν Ξ Ο Π
Ρ Σ Τ Υ Φ Χ Ψ Ω
α β γ δ ε ζ η ϑ θ
ι κ λ μ ν ξ ο π
ρ σ τ υ φ ϕ χ ψ ω
Α Β Γ Δ Ε Ζ Η Θ
Ι Κ Λ Μ Ν Ξ Ο Π
Ρ Σ Τ Υ Φ Χ Ψ Ω
α β γ δ ε ζ η ϑ θ
ι κ λ μ ν ξ ο π
ρ σ τ υ φ ϕ χ ψ ω
Α Β Γ Δ Ε Ζ Η Θ
Ι Κ Λ Μ Ν Ξ Ο Π
Ρ Σ Τ Υ Φ Χ Ψ Ω
α β γ δ ε ζ η ϑ θ
ι κ λ μ ν ξ ο π
ρ σ τ υ φ ϕ χ ψ ω
|r| =
√(x2 + y2 + z2)
|r| =
√(x2 + y2 + z2)
|r| = sqrt(x^2 + y^2 + z^2)
| lim n→∞ |
an |
| lim n→∞ |
an |
{ limit n -> infinity } a_n
| ∞ ∏ n = 0 |
an |
| ∞ ∏ n = 0 |
an |
{ product from n=0 to infinity } a_n
| ∞ ∑ n = 0 |
an |
| ∞ ∑ n = 0 |
an |
{ sum from n=0 to infinity } a_n
| ∆u = | n ∑ i = 1 |
∂2u/∂xi2 |
| ∆u = | n ∑ i = 1 |
∂2u/∂xi2 |
Laplacian of u = { sum from i=1 to n } d^2u / dx_i^2
| b ∫ a |
f(x) dx |
| b ∫ a |
f(x) dx |
| b ⌠ ⌡ a |
f(x) dx |
| b ⌠ ⌡ a |
f(x) dx |
{ integral from a to b } f(x) dx
| +∞ ∫ −∞ |
exp(−x²) dx | = √π |
| +∞ ∫ −∞ |
exp(−x²) dx | = √π |
{ integral from -infinity to +infinity } exp(-x^2) dx = sqrt pi
| √5 − 1 | = | 2 |
| —————— | —————— | |
| 2 | √5 + 1 |
(sqrt 5 - 1) / 2 = 2 / (sqrt 5 + 1)
http://www.unics.uni-hannover.de/nhtcapri/mathematics.html
9 September 2012Andreas Prilop