Écrire des mathématiques en html & css

Intro

La rédaction de textes mathématiques est relativement complexe en raison de l'usage de nombreux symboles latins, grecs, et non-alphabétiques. Ces symboles ont en général une correspondance simple, voir plus bas pour l'aphabet grec et bien d'autres caractères.
Ensuite, et surtout, le positionnement des symboles est problématique, notamment dans les fractions, matrices, puissances et indices.
Le système de composition Latex permet de créer des documents scientifiques d'une trsè grande qualité. Le rendu graphique y est en fait optimisé pour l'impression (Latex génère initialement un fichier " ps " ou fichier postscript, qui est un fichier de points destiné à un système d'impression). La qualité des documents créés est aussi excellente dans des fichiers de type pdf, très couramment utilisés et dont un lecteur est en général même intégré dans tout navigateur web.

L'affichage dans un navigateur est plus complexe, notamment à l'heure où il existe une grande variété de tels navigateurs, une grande variété de taille d'écrans, … Néanmoins, on ne souhaite pas forcément imprimer systématiquement tout document, et il est donc nécessaire de pouvoir consulter un texte directement en ligne sur son navigateur.
Plusieurs solutions existent:
  • remplacer les formules mathématiques (ou tout autre graphique, schéma, …) par des images. Ce site utilise à outrance cette méthode même si l'alignement des formules n'est pas toujours ainsi optimal.
  • utiliser une bibliothèque javascript comme MathJax comme la bibliothèque est quelque peu lourde à charger, surtout pour, finalement, parfois pour n'afficher que quelques symboles et fractions. Le code convertit, en javascript, les instructions Latex écrites dans la page html, ce qui peut aussi être nettement ralentir le chargement de la page avec un ordinateur modeste.
  • utiliser MathML, qui est un ensemble de balises et règles syntaxiques. Malheureusmeent, tous les navigateurs ne le supportent pas nativement, et je trouve celui-ci relativement lourd même pour écrire des choses simples.
  • manipuler directement les css, qui est le langage permettant la mise en page du html, et c'est l'objectif de ce qui suit …

Environnement math

On définit un environnement math propre à l'écriture de mathématiques, comme le $ en Latex.
Dans cet environnement, les variables s'écrivent simplement en italique, et on peut différencier un mode "inline" du mode "display". 
.math {font-family:times;padding:0 .1em;font-size:1.2em;font-style:normal;}
.ct{text-align:center}

Par exemple, 
<span class="math">3<i>x</i><sup>2</sup>+2<i>y</i>=27</span>
donne l'équation inline 3x2+2y=27 tandis que 
<div class="math ct"><i>f</i>(<i>x</i>) = 3<i>x</i> &minus; 2</div>
défini cette fois une formule en mode display, c'est-à-dire à la ligne et centrée:
f(x) = 3x − 2

Césure des expressions et équations mathématiques

Selon la taille d'une expression mathématique et de de celle de l'écran (surtout avec leur très grande diversité: écran d'ordinateur de bureau, de portable, de smartphone, de tablette, ...), les champs mathématiques peuvent parfois se retrouver coupés (tout comme les mots d'ailleurs).
Parfois, il est bon de spécifier que tel groupe, ou telle partie d'une expression, ne doit pas être coupé. En orthographe, cela s'appelle des règles de césure, et sont définies pour chaque langue.
En mathématiques, par contre …
Par défaut, une expression sera coupée où cela est nécessaire par rapport à la taille de texte disponible. On peut indiquer qu'un groupe doit rester intègre avec la règle white-space:nowrap, par exemple avec la classe css 
.dspbl{white-space:nowrap}
et alors on peut imposer par exemple dans une équation:
e2x+1(x2 + 2) = 3x + 2
⇔
e2x+1(x2 + 2) = 3x + 2
avec 
<div style="width:10em;border:1px solid blue">
  <span class="math">e<sup>2<i>x</i>+1</sup>(<i>x</i><sup>2</sup> + 2) = 
  3<i>x</i> + 2 </span>
  <br>
  <span class="math">⇔</span><br>
  <span class="math">e<sup>2<i>x</i>+1</sup>(<i>x</i><sup>2</sup> + 2)
    <span class="dspbl"> = 3<i>x</i> + 2</span></span>
</div>

Fractions

La difficulté avec les frations, c'est l'alignement… d'autant plus que celui-ci est déterminant aussi pour le calcul en lui-même, la division n'étant pas associative: 6 / 3 / 2 = 6 × 2/3 = 4 tandis que 6 / 3 / 2 = 6 / 3 × 1 / 2 = 1 ce qui montre bien que 6 / 3 / 2 ≠ 6 / 3 / 2
Pour afficher correctement une fraction (ou une fraction dans une fraction … ), on peut définir en css un bloc frac, dans lequel seront nécessairement définis 3 blocs: num pour le numérateur, den pour le dénominateur, et enfin la barre de fraction fracbar dont la bordure inférieure (border-bottom) dessinera effectivement le trait de fraction de la bonne largeur: 
.frac{
  display:inline-block;
  margin-left:.1em;margin-right:.1em;
  vertical-align:-64%;
  text-align:center;
}
.frac > .num, .frac > .den{
  display:inline-block;
  padding:0 .1em;
}
.frac > .fracbar {display:block;
  height:0;margin:0;border:0;
  border-bottom:.1em solid;
  overflow:hidden;
}
.den{vertical-align:top;}

Avec ceci, par exemple, 
<span class="math">
  <span class="frac">
    <span class="num">1</span>
    <span class="fracbar">/</span>
    <span class="den">2</span>
</span>
donne 1/2

et on peut, en imbriquant les fractions, écrire le développement en fraction continue du nombre d'or: φ = 1+ 1/ 1+ 1/ 1+ 1/ 1+ 1/ …

À savoir que html permet aussi directement l'écriture de quelques fractions simples:
htmlaffichage
 
&frac12;
½
&half;
½
&frac13;
⅓
&frac23;
⅔
&frac14;
¼
&frac34;
¾
htmlaffichage
 
&frac18;
⅛
&frac38;
⅜
&frac58;
⅝
&frac78;
⅞

Barrer du texte, simplifier des fractions

Pour barrer du texte, comme pour indiquer la correction d'une erreur ou encore pour mettre en évidence des termes qui se simplifient, on peut simplement utiliser le style css 
text-decoration: line-through
qu'on peut compléter et adapter de la manière suivante en css 
.barre{
  text-decoration:line-through;
  text-decoration-color:red;
  text-decoration-thickness:2px
}
puis le html 
<span class="barre">texte barré</span>
pour obtenir texte barré
On peut aussi chercher à barrer en diagonale, comme on le ferait à la main sur une feuille, par exemple pour simplifier une fraction:
5 × 3 × 2 × 23 / 23 × 5 = 6
Ceci peut s'obtenir avec le style suivant 
.barred {position:relative;}
.barred:before{content:"";
  display:inline-block;
  width:1.1em;
  border-bottom:2px solid red;
  position:absolute;
  left:-.15em;
  top:.25em;
  transform:rotate(-25deg);
}
puis le html 
<div class="math ct"><span class="frac">
  <span class="num">
    <span class="barred">5</span> &times; 3 &times; 2 &times; <span class="barred">23</span>
  </span>
  <span class="fracbar">/</span>
  <span class="den">
    <span class="barred">23</span> &times; <span class="barred">5</span>
  </span>
</span> = 6
</div>
Un inconvénient de cette méthode simple est que la barre en biais tracée a une largeur fixe, adaptée ici à un ou deux caractères.
Pour y remédier, on peut soit adapter à la main la largeur dans la classe 
.barred:before{ ... ;width:3em; ...}
soit piloter cette largeur par javascript pour l'adapter automatiquement au texte à barrer.

Racines carrées

La difficulté pour les racines carrées réside dans la représentation du radical, c'est-à-dire le symbole de la racine carrée, et qui plus est à la bonne taille.
Je propose ici deux méthodes pour ce faire.

En utilisant le symbole html √

En html, le symbole existe, il s'agit de 
&radic;
qui affiche √ . Il n'est pas possible, à ma connaissance, d'adapter directement la taille du symbole, c'est-à-dire de la fonte, en fonction de la taille du bloc qui suit. On peut imaginer le faire en javascript.
On peut proposer simplement plusieurs tailles de radicaux, qui devraient permettre de répondre simplement à la grande majorité des cas.
Modifier la taille via font-size n'est pas une bonne idée car l'épaisseur du trait va varier en conséquence et le résultat ne sera pas très esthétique. On peut utiliser plut&ocicr;t la propriété scale de la fonction transform. Plus précisément, comme on ne souhaite qu'agrandir en hauteur ce symbole, on utilisera scaleY. 
.sq, .sq2, .sq3, .sq4{display:inline-block;
    border-top:1px solid black;
    position:relative;
    margin-left:.3em;
}
.sq:before{content: "\00221A";
    position:absolute;
    top:-.05em;
    display:inline-block;
    left:-.48em;}
.sq2:before{content: "\00221A";
    display:inline-block;
    position:absolute;
    top:-.05em;
    transform-origin:top right;
    transform: scaleY(2);
    left:-.5em;
}
.sq3:before{content: "\00221A";
    display:inline-block;
    position:absolute;
    left:-.48em;top:-.08em;
    transform-origin:top right;
    transform: scaleY(3);
}
.sq4:before{content: "\00221A";
    display:inline-block;
    position:absolute;
    left:-.48em;top:-.1em;
    transform-origin:top right;
    transform: scaleY(4);
}
ce qui permet d'obtenir, avec le style sq: a = 32 puis sq2: b = 32/12 et c2 = 32/ 23/12 et d2 = 11/13 / 23/27 et sq3: c3 = 32/ 23/12 et d3 = 11/13 / 23/27 et enfin sq4: d4 = 11/13 / 23/27 .
Il faut ainsi choisir au moment de la rédaction la taille du radical souhaité …

En dessinant, en css, le radical

Je propose ici de dessiner directement ce symbole en représentant un cadre avant la racine (pseudo-élément before) incliné et tourné (propriétés skew et rotate de la fonction transform). 
.cadre{
  position:relative;
  display:inline-block;
  border-top:2px solid green;
  margin-left:.7em;
  padding-left:.2em;
  padding-right:.1em
}
.cadre:before{content: " ";
  position: absolute;
  display: inline-block;left:-.65em;
  height:56%;
  width:.6em;
  border:1px solid black;
  border-right:2px solid red;
  border-bottom:2.5px solid blue;
  transform-origin: top right;
  transform: rotate(55deg) skew(50deg);
}

ce qui permet d'obtenir a =2

Pour obtenir le radical, symbole de la racine carrée, on ne représente finalement que les bordures droites et inférieures du cadre "before", placé avant le radicande: 
.sqrt{
  position:relative;
  display:inline-block;
  border-top:2px solid black;
  margin-left:.7em;
  padding-left:.2em;
  padding-right:.1em
}
.sqrt:before{content: " ";
  position: absolute;
  display: inline-block;left:-.65em;
  height:56%;
  width:.6em;
  border-right:2px solid black;
  border-bottom:2.5px solid black;
  transform-origin: top right;
  transform: rotate(55deg) skew(50deg);
}
ce qui permet d'obtenir a =2 avec simplement 
<span class="math">a=<span class="sqrt">2</span></span>

ou encore, avec une fraction et un un radical de taille adaptée b = 1234 avec simplement 
<span class="math">b =
  <span class="sqrt">
    <span class="frac">
      <span class="num">12</span>
      <span class="fracbar"></span>
      <span class="den">34</span>
    </span>
  </span>
</span>


Les racines d'un trinôme du second degré s'écrivent: -b ± b2 − 4ac 2a et une racine d'un quotient de fractions: ab = 1234 1335 = 1234 × 1335
Enfin, pour les amoureux du nombre d'or φ, des fractions continues, et des racines carrées, on a les relations:

φ= 1+ 1/ 1+ 1/ 1+ 1/ 1+ 1/ … = 1+φ = 2+ 1/ 1+ 1/ 1+ 1/ 1+ 1/ …

Matrices

Pour écrire des matrices, dans un environnement " matrix " avec des bordures à droite et gauche légèrement arrondies (border-radius) pour simuler des parenthèse (ou des bords droits pour un déterminant), on définit des lignes (row) qui contiennent des coefficients. 
.matrix {display:inline-block;
  border-left:1px solid;
  border-right:1px solid;
  border-radius:.6em;
  vertical-align:middle;
}
.matrix > .row {display:table-row}
.matrix > .row > .aij {display:table-cell;text-align:center;padding: 0.1em 0.3em;}

Avec ceci, on obtient A = 12 34 avec 
<span class="math"><i>A = </i> 
  <span class='matrix'>
    <span class='row'>
      <span class="aij">1</span>
      <span class="aij">2</span>
    </span>
    <span class='row'>
      <span class="aij">3</span>
      <span class="aij">4</span>
    </span>
  </span>
</span>

On peut définir bien d'autres matrices alors, comme M = 123 234 ︙︙︙ 352353354 sachant que les points de suspensions … ︙ ⋱ s'obtiennent respectivement avec 
&hellip; &#65049; &#8945;

Tableau de variations

On peut tracer un tableau de variations à l'aide d'un ... tableau: l'environnmenent table, et quelques aménagements css 
table.math {border:1px solid black;border-collapse:collapse}
table.math {border:1px solid black;border-collapse:collapse;text-align:center}
table.math td{padding:0;width:1em}
table.math tr{height:.8em}
table.math tr:first-child{border:1px solid black;}
table.math td:first-child {width:2em;border-right:1px solid black}
table.math .bigfl{font-size:1.5em}
/* pour barres verticales simples et doubles /*
table.math .sb{width:0;border-left:1px solid black}
table.math .db{width:3px;border-left:2px solid black;border-right:2px solid black;position:relative}
et le html, avec des fèches obliques, en code html, &#8599; pour ↗ et &#8600; pour ↘ 
<table class="math">
   <tr>
     <td><i>x</i></td>
     <td>−&infin;</td>
     <td></td>
     <td>3</td>
     <td></td>
     <td>+&infin;</td>
   </tr>
<tr>
  <td></td> <td></td> <td></td> <td>2</td> <td></td> <td></td>
</tr>
<tr>
  <td><i>f</i></td>
  <td></td>
  <td class="bigfl">&#8599;</td>
  <td></td>
  <td class="bigfl">&#8600;</td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td>−&infin;</td> <td></td> <td></td> <td></td> <td>1</td>
</tr>
 </table>
pour obtenir
x −∞ 3 +∞
2
f ↗ ↘
−∞ 1

et le même tableau, avec une valeur interdite
x −∞ 3 +∞
f ↘ ↘

grâce au html suivant: 
<table class="math">
   <tr>
     <td><i>x</i></td> 
     <td>−∞</td> <td></td> 
     <td colspan="3">3</td> <td></td>
     <td>+∞</td>
   </tr>
<tr>
  <td></td> <td></td> <td></td> <td></td><td class="db"></td><td></td> <td></td> <td></td>
</tr>
<tr>
  <td><i>f</i></td>
  <td></td>
  <td class="bigfl">&#8600;</td> <td></td><td class="db"></td><td></td>
  <td class="bigfl">&#8600;</td> <td></td>
</tr>
<tr>
  <td></td> <td></td> <td></td> <td></td><td class="db"></td><td></td> <td></td> <td></td>
</tr>
</table>

Tableau de signes

De même, avec le css 
table.signe tr{border:1px solid}
table.signe td{padding:0 .3em 0 .3em}
table.signe td.db{padding:0}
et le html: 
<table class="math signe">
   <tr>
     <td><i>x</i></td>
     <td>−∞</td> <td></td> <td>−2</td> <td></td> <td>−1</td> <td></td> <td>+∞</td>
   </tr>
<tr>
  <td><i>x</i> + 2</td>
  <td></td> <td> − </td> <td>0</td> <td> + </td> <td>|</td> <td> + </td> <td></td>
</tr>
<tr>
  <td>−<i>x</i> − 1</td>
  <td></td> <td> + </td> <td>|</td> <td> + </td> <td>0</td> <td> − </td> <td></td>
</tr>
<tr>
  <td><span class="dspbl">(<i>x</i> + 2) (−<i>x</i> − 1)</span></td>
  <td></td> <td> − </td> <td>0</td> <td> + </td> <td>0</td> <td> − </td> <td></td>
</tr>
</table>
on obtient:
x −∞ −2 −1 +∞
x + 2 − 0 + | +
−x − 1 + | + 0 −
(x + 2)(−x − 1) − 0 + 0 −

Équations sur plusieurs lignes

Comme en Latex, on peut proposer un mode "inline", ici la classe align et un mode "display", ici la classe calign.
Les éléments dans chaque cellule sont centrés par défaut, et on peut, comme en Latex, les aligner à gauche ou à droite.
Le css est le suivant: 
.align {display:inline-table;vertical-align:middle}
.calign {display:table;margin:0 auto}
.calign .row, .align .row {display:table-row}
.calign .row .cell, .align .row .cell {display:table-cell;text-align:center;padding-left:.1em;padding-right:.1em}
.calign .row .l, .align .row .l{display:table-cell;text-align:left}
.calign .row .r, .align .row .r{display:table-cell;text-align:right}

Pour que par exemple, 
<div class="math calign">
  <span class="row">
    <span class="cell"><i>f</i>(<i>x</i>)</span>
    <span class="cell">=</span>
    <span class="cell r">(<i>x</i>+2)<sup>2</sup> &minus; 4</span>
  </span>
  <span class="row">
    <span class="cell"></span>
    <span class="cell">=</span>
    <span class="cell l"><i>x</i><sup>2</sup>+2<i>x</i></span>
  </span>
</div>
afiche en mode display:
f(x) = (x+2)2 − 4 = x2 + 4x
ou encore en mode inline: f(x) = (x+2)2 − 4 = x2 + 4x = x2 + 4x
avec 
<span class="math top">
  <span class="align">
    <span class="row">
      <span class="cell"><i>f</i>(<i>x</i>)</span>
      <span class="cell">=</span>
      <span class="cell r">(<i>x</i>+2)<sup>2</sup> − 4</span>
    </span>
    <span class="row">
      <span class="cell"></span>
      <span class="cell">=</span>
      <span class="cell l"><i>x</i><sup>2</sup> + 4<i>x</i></span>
    </span>
    <span class="row">
      <span class="cell"></span>
      <span class="cell">=</span>
      <span class="cell l"><i>x</i><sup>2</sup> + 4<i>x</i></span>
    </span>
  </span>
</span>


Accolade sur plusieurs lignes ! - Systèmes et ensembles

On peut écrire un système simplement avec le mode précédent: plusieurs équations sur plusieurs lignes et alignées:
2x + y = 125 −x + 5y = −2
Il reste à dessiner l'accolade …
Une bordure gauche est un premier pas. On créé un environnement, ou classe, syst 
.syst {position:relative;
    display:inline-block;
    border-left:2px solid;
    border-radius:.3em;
    padding-left:0em;
    margin-left:.25em}
qui donne
2x + y = 125 −x + 5y = −2

On va ensuite ajouter le symbole mathématique < ( ou plus finement: ≺ , qui est en mathématique le prédécesseur dans une suite, unicode &#8826; ≺, mais ne semble pas connu par défaut par tous les navigateurs...) et le pseudo-élément before 
.syst::before {content:"≺";
    font-size:.6em;font-weight:bold;
    display:inline-block;
    width:1em;margin-left:-1em;
    text-align:right;vertical-align:middle
}
On donne une largeur fixe à cet élément before, 1em, ce qui permet en le déplaçant d'autant, de l'aligner exactement avec la bordure: 2x + y = 125 −x + 5y = −2
On y est presque ! …
Pour peaufiner le tout, il reste à rendre le fond, derrière le symbole ≺, blanc et opaque.
On ne peut pas utiliser directement la propriété background-color, car celui-ci est plus large que le symbole, et donc "effacerait" un peu trop de la bordure: 2x + y = 125 −x + 5y = −2
On peut utiliser une image de fond. Pour faire le plus léger, un carré blanc de 1px de côté, dimensionné et positionné correctement.
Enfin, pour insérer cette image en background dans le pseudo-élément before, on peut l'insérer directement en base64 (converti en base64, par exemple grâ au convertisseur de w3docs ), afin de ne pas avoir à charger une image supplémentaire. 
.syst {
    position:relative;display:inline-block;
    border-left:2px solid;border-radius:.3em;
    padding-left:0em;margin-left:.25em}
.syst::before {content:"≺";
    font-size:.6em;font-weight:bold;
    display:inline-block;width:1em;margin-left:-1em;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADElEQVQImWP4//8/AAX+Av5Y8msOAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;background-size:.4em;background-position: 100% 60%;
    text-align:right;vertical-align:middle
}

Finalement, avec cette dernière version, le html 
<span class="math">
  <span class="syst">
  <span class="align">
    <span class="row">
      <span class="cell r">2<i>x</i></span>
      <span class="cell">+</span>
      <span class="cell r"><i>y</i></span>
      <span class="cell">=</span>
      <span class="cell r">125</span>
    </span>
    <span class="row">
      <span class="cell r">−<i>x</i></span>
      <span class="cell">+</span>
      <span class="cell r">5<i>y</i></span>
      <span class="cell">=</span>
      <span class="cell r">−2</span>
    </span>
  </span>
  </span>
</span>
permet d'obtenir le système, en mode inline: 2x + y = 125 −x + 5y = −2 ou avec plus d'équations 2x + y + 3z = 125 −x + 5y = −2 −x + 2y + 17z = −217 2y − 5z = 6
Enfin, on peut faire la même chose à droite pour obtenir une accolade fermante, et ainsi noter un ensemble, par exemple, l'ensemble des nombres rationnels Q = p / q  ;  p ∈ Z , q ∈ Z*

Parenthèses

La difficulté des parenthèses, et autres délimiteurs, et l'adaptation à la taille de ce qu'elles délimitent.
On peut dessiner des parenthèses en utilisant des bordures, gauches et droites, qui s'adapteront donc automatiquement à la taille du contenu: 
.lrp{display:inline-block;
  border-left:.15em solid;border-right:2px solid;
  border-radius:.7em;
  padding:.3em;padding-top:0;padding-bottom:0;
  margin:.1em
}
puis avec 
<span class="math">
    <i>x</i>
    <span class="lrp"> 2 + <i>x</i></span>
</span>
on obtient x 2 + x
et avec 
<span class="math">
  A(<i>x</i>)=
  <span class="lrp">
    <span class="frac">
      <span class="num">1</span><span class="fracbar">/</span><span class="den">2</span>
    </span>
    <span class="lrp">2 + <i>x</i></span>
    + <i>x</i>
  </span>
  &times;
  <span class="lrp">
    1+
    <span class="frac">
      <span class="num">1</span><span class="fracbar">/</span><span class="den">2+x</span>
    </span>
  </span>
</span>
on obtient A(x)= 1/2 2 + x + x × 1+ 1/2+x

Crochets, intervalles fermés, ouverts et semi-ouverts

On peut dessiner des crochets en tirant parti des pesudo-éléments before et after: avant et après, donc, on ajoute un élément vide (content="") de la même hauteur que le bloc lui-même (height:100%), très peu large, et enfin avec une bordure sauf d'un côté, pour créer des intervalles (ou autres) fermés, ouverts/fermés, fermés/ouverts et ouverts/ouverts: 
.lrb, .lrboo, .lrbof, .lrbfo{display:inline-block;position:relative;margin:.3em;padding:.2em;padding-bottom:0}
.lrb:before, .lrbof:before, .lrbfo:before, .lrboo:before{content:"";display:inline-block;position:absolute;top:-2px;left:0;width:.15em;height:100%;border:1.5px solid;margin-left:-.2em}
.lrb:after, .lrbof:after, .lrbfo:after, .lrboo:after{content:"";position:absolute;border:1.5px solid;height:100%;width:.15em;top:-2px;right:0;margin-right:-.2em}
.lrb:before{border-right:0}.lrb:after{border-left:0}
.lrbof:before{border-left:0}.lrbof:after{border-left:0}
.lrbfo:before{border-right:0}.lrbfo:after{border-right:0}
.lrboo:before{border-left:0}.lrboo:after{border-right:0}
pour pouvoir écrire par exemple la formule 3×(x+1)2−1/2 = 3x2 +6x +3/2
ou encore les intervalles x∈ 3 ; 25 ou x∈ 3 ; 25 ou x∈ 3 ; 25 ou x∈ 3 ; 25

Puissances

Toujours de la même façon, le problème est l'alignement en hauteur automatique.
La balise sup permet de surélever du texte par rapport simplement à la ligne de base. Si on veut le surélever par rapport à la hauteur du block précédent, il faut justement utiliser cette balise dans le block en question: 
.pw sup{display: inline-block;
    position: relative;
    vertical-align: top;
    top:-.3em;margin-left:-.3em}
puis, par exemple 
<span class="math">
  <span class="pw">
    <span class="lrp">
      <span class="frac">
        <span class="num">1</span><span class="fracbar">/</span><span class="den">2</span>
      </span>
      + <i>x</i>
    </span>
    <sup>2</sup>
  </span>
</span>

pour obtenir 1/2 + x 2

Vecteurs

Trois méthodes; j'utilise la troisième.
Les deux premières utilisent des caractères spéciaux: → et >. Il se trouve que chaque navigateur utilise un moteur de rendu des caractères différents et donc, même avec une même police, les caractères peuvent avoir quelques différences, ce qui nuit à la mise en page. Par exemple la flèche &rarr; donne avec Firefox et Chrome tandis qu'en mode math (donc en times) Firefox: et Chrome: .
L'utilisation de ces caractères n'est donc idéale universellement; je les donne quand même car je les ai utilisés avant de comprendre la raison des distortion observées et que cela peut peut-être intéresser.

Flèche adaptée automatiquement

La notation d'un vecteur se fait avec une flèche au dessus de texte, par exemple, u ou AB . Une bordure sur le texte trace le trait de la flèche, et on peut placer la pointe de cette flèche en after.
Le comportement entre certains navigateur, notamment Chrome, peut différer car ce dernier (jusqu'à quelle version ?) arrondit ces calculs et omet les parties décimales de pixels; voir par exemple cette discussion. Ce comportement est d'autant plus visible en grossissant le texte directement dans le navigateur en visionnant la page, et où on voit bien que des alignements peuvent alors évoluer … 
.vect{display:inline-block;
    position:relative;
    font-size:1em;
    border-top:.11em solid
}
.vect:before{content:">";
    font-family:arial;font-size:.8em;
    display:inline-block;margin-right:-.2em;
    position:absolute;right:0;
    width:.6em;top:-.65em
}

Le vecteur AB s'obtient alors avec 
<span class="math">
  <span class="vect">AB
  </span>
</span>
ou u avec 
<span class="math">
    <span class="vect">
      <i>u</i>
    </span>
</span>
ou encore v3 avec 
<span class="math">
    <span class="vect">
      <i>v</i><sub>3</sub>
    </span>
</span>


On peut alors combiner vecteurs et coordonnées, en utilisant la mise en page pour les matrices, par exemple: AB 1 2 3 ou écrire de longs vecteurs: ABCDEF

Avec le caractère &rarr: →

Seulement pour des vecteurs avec un caractère ou deux: 
.vec, .vec2{display:inline-block;position:relative}
.vec{bottom:.4em;left:.6em;margin-left:-.7em}
.vec2{bottom:.6em;left:1em;margin-left:-.8em;transform:scale(2,1.2)}
puis en html 
<span class="math"><span class="vec">&rarr;</span><i>u</i></span>
et
<span class="math"><span class="vec2">&rarr;</span>AB</span>
pour obtenir →u et →AB ou encore →u1 ou le carré scalaire →u 2

En dessinant complètement la flèche en css

On peut enfin dessiner une flèche complètement en css, comme on l'a fait pour la racine carrée. C'est aussi la méthode la plus robuste "multi-navigateurs" pour écrire des vecteurs par exemple. 
.math .to{display:inline-block;position:relative;
    width:.6em;height:0;bottom:.2em;
    border:1px solid;
    margin-left:.15em;margin-right:.15em;
    background-color:black;}
.math .to:after{content:"";
    display:inline-block;position:absolute;
    right:0;
    border:1px solid;
    width:.3em;height:.3em;top:-.05em;
    transform-origin:right center;transform:rotate(45deg);
    border-left:0;border-bottom:0;}
ce qui permet d'obtenir ou enore x+∞ avec 
<span class="math"><span class="to"></span></span>
ou enore
<span class="math">
 <i>x</i>
  <span class="to">
 </span>+∞
</span>

Pour écrire un vecteur, il ne reste plus qu'à positionner cette flèche au-dessus des caractères concernés. 
.math .vect{position:relative;display:inline-block;
    margin-top:.1em;}
.math .vect:before{content:"";
    display:inline-block;position:absolute;
    border:.5px solid;
    box-sizing:border-box;
    width:100%;height:0;
    background-color:black;
    right:0;top:-.1em;
}
.math .vect:after{content:"";
    display:inline-block;position:absolute;
    border:1px solid;border-left:0;border-bottom:0;
    width:.25em;
    height:.25em;right:.05em;top:-.1em;
    box-sizing:content-box;
    transform-origin:right center;transform: rotate(45deg);
}
ce qui donne les vecteurs u , ou AB.
Enfin, on peut prévoir une flèche pour des vecteurs écrits avec une seule lettre, très courant en mathématiques, avec une flèche un peu plus petite et plus basse: 
.math .vects{position:relative;display:inline-block;
    margin-top:.0}
.math .vects:before{content:"";
    display:inline-block;position:absolute;
    border:.5px solid;
    box-sizing:border-box;
    width:100%;height:0;
    background-color:black;
    right:0;top:.1em;
}
.math .vects:after{content:"";
    display:inline-block;position:absolute;
    border:1px solid;border-left:0;border-bottom:0;
    width:.2em;height:.2em;right:.05em;top:.1em;
    box-sizing:content-box;transform-origin:right center;transform: rotate(45deg);
}
pour obtenir cette fois u plutôt que u.

Avec tout ça on peut finalement écrire par exemple, la relation de Chasles:
Soit u = AC et v = CB alors on a
AB = u + v

Produit scalaire

Le produit scalaire de deux vecteurs, \cdot avec Latex, se note avec un point: 
.cdot{vertical-align:.1em;font-weight:bold}
puis 
<div class="math ct">
    <span class="vects"><i>u</i></span>
    <span class="cdot">.</span>
    <span class="vects"><i>v</i></span>
    = 
    <i>xx</i>' + <i>yy</i>'
</div>
u . v = xx' + yy'

Sommes

On crée une "pile" (stack) avec des éléments de type bloc qui vont ainsi s'empiler les uns au dessous des autres, dans l'ordre de leur déclaration. 
.math .stack{display:inline-block;
    vertical-align:middle;
    line-height:.95}
.math .stack .sign{display:block;font-size:2em}
.math .stack sub{display:block;text-align:center}
.math .stack sup{display:block;text-align:center}

Par exemple, la somme géométrique S = n ∑ k=0 qk = 1 − qn+1 / 1 − q s'obtient avec 
<span class="math">
  <i>S</i> = 
  <span class="stack">
    <sup><i>n</i></sup>
    <span class="sign">&sum;</span>
    <sub><i>k</i>=0</sub>
  </span>
  <i>q</i><sup><i>k</i></sup> 
  =
  <span class="frac">
    <span class="num">1 − <i>q</i><sup><i>n</i>+1</sup>
    </span><span class="fracbar">/</span>
    <span class="den">1 − <i>q</i></span>
  </span>
</span>
et la série de Riemann: ζ(2) =   ∑ k∈N* 1/k2 = π2 / 6

Limites

pour a def= 3 et
 limn+∞ un = 1 / π2
et x→−∞lim f (x) = l et aalim et aalim et aAlim et AAlim

AAA →a  et →a→

un x+∞ aa lim∼   1 / n2

Intégrales

La difficulté réside dans l'écriture du signe intégral, grâce à ∫: ∫, un peu sytlisé et l'écriture des bornes.
On peut déclarer une boîte contenant ces trois éléments, dans laquelle les bornes seront en position:absolute et positionnées en haut et bas.
Pour sytliser le sybole intégrale, on peut l'écriture en plus grand, et le compresser horizontalement (scaleX avec un coefficient inférieur à 1) et l'incliner (skew).
Des différences restent entre les navigateurs, semblant venir du fait que le symbole intégrale ∫ n'a pas les mêmes dimensions pour chacun, même avec la même police et la même taille explicitement données … 

.int{display:inline-block; vertical-align:-40%;position:relative;text-align:left;}
.int .sg{display:inline-block;font-size:260%;line-height:1.4;margin-top:-.2em;
  transform: scaleX(.7) skew(-12deg);
  -ms-transform: scaleX(.7) skew(-10deg); /* IE 9 */
  -webkit-transform: scaleX(.8) skew(-14deg); /* Safari and Chrome */
  -o-transform: scaleX(.7) skew(-10deg); /* Opera */
  -moz-transform: scaleX(.6) skew(-10deg); /* Firefox */
}
.int sub{font-size:.7em;position:absolute;bottom:0;left:.7em}
.int sup{font-size:.7em;position:absolute;top:0;left:1.65em}
ce qui donne ∫ b a f (x) dx
Enfin, en reprenant les crochets, et en y ajoutant de même que préccédemment les bornes (en position:absolute): 

.lrbornes{display:inline-block;position:relative}
.lrbornes .binf{font-size:0.8em;display:inline-block;
  margin-top:1em;vertical-align:bottom;
  height:1em;line-height:1.5em;
}
.lrbornes .bsup{font-size:0.8em;position:absolute;
  display:block;top:-.2em;right:0
}

on peut finalement écrire une formule complète d'intégration: ∫ −∞ +∞ f (x) dx = F(x) −∞+∞

Coefficients binomiaux

et 

<span class="math"><i>a </i> = 
  <span class="lrp"><span class="align">
    <span class="row"><span class="cell">1</span></span>
    <span class="row"><span class="cell">2</span></span>
  </span></span>
</span>
pour obtenir a = 1 2
soit
n k = n! / k! (n-k)!

Alphabet grec et quelques autres caractères

L'utilisation de l'alhabet grec est incontournable en maths !
htmlLatexaffichage
 
&alpha;
\alpha
α
&beta;
\beta
β
&gamma;
\gamma
γ
&delta;
\delta
δ
&epsilon;
\epsilon
ε
&zeta;
\zeta
ζ
&eta;
\eta
η
&theta;
\theta
θ
&iota;
\iota
ι
&kappa;
\kappa
κ
&lambda;
\lambda
λ
&mu;
\mu
μ
&nu;
\nu
ν
&xi;
\xi
ξ
&omicron;
\omicron
ο
&pi;
\pi
π
&rho;
\rho
ρ
&sigma;
\sigma
σ
&tau;
\tau
τ
&upsilon;
\upsilon
υ
&phi;
\phi
φ
&chi;
\chi
χ
&psi;
\psi
ψ
&omega;
\omega
ω
htmlLatexaffichage
 
&Alpha;
\Alpha
Α
&Beta;
\Beta
Β
&Gamma;
\Gamma
Γ
&Delta;
\Delta
Δ
&Epsilon;
\Epsilon
Ε
&Zeta;
\Zeta
Ζ
&Eta;
\Eta
Η
&Theta;
\Theta
Θ
&Iota;
\Iota
Ι
&Kappa;
\Kappa
Κ
&Lambda;
\Lambda
Λ
&Mu;
\Mu
Μ
&Nu;
\Nu
Ν
&Xi;
\Xi
Ξ
&Omicron;
\Omicron
Ο
&Pi;
\Pi
Π
&Rho;
\Rho
Ρ
&Sigma;
\Sigma
Σ
&Tau;
\Tau
Τ
&Upsilon;
\Upsilon
Υ
&Phi;
\Phi
Φ
&Chi;
\Chi
Χ
&Psi;
\Psi
Ψ
&Omega;
\Omega
Ω

Autres caractères mathématiques

Lettres "rondes"

Les lettres "rondes", assez utilisées en maths peuvent s'écrire en html avec le suffixe "scr", par exemple en majuscule 
&s;Pscr;
donne 𝒫 et 𝒫 en mode maths et en minuscule 
&pscr;
donne 𝓅.
La loi de probabilité géométrique s'écrit alors 
<span class="math">&Gscr;(<i>n</i></span>
pour obtenir 𝒢(n) ou encore, pour la loi binomiale, 
<span class="math">&Bscr;(<i>n</i><,<i>p<i>)/span>
pour obtenir ℬ(n,p)

Flèches

Quelques flèches: simples composées avec le suffixe "arr" et doubles avec le suffixe "Arr" (pour arrow, flèche), et un préfixe indiquant la direction: l (left), r (right), lr (left-right), u (up), d (down), h (horizontal) ou v (vertical), et éventuellement un pré-préfixe x (grande taille)
htmlLatexaffichage
 
&rarr;
&rarr;
→
&xrarr;
&rarr;
⟶
&rArr;
&rarr;
⇒
&xrArr;
&rarr;
⟹
&larr;
&rarr;
←
&xlarr;
&rarr;
⟵
&lArr;
&rarr;
⇐
&xlArr;
&rarr;
⟸
&lrarr; &rlarr
&rarr;
⇆ ⇄
&harr;
&rarr;
↔
&xharr;
&rarr;
⟷
&varr;
&rarr;
↕
&vArr;
&rarr;
⇕
&map;
&rarr;
↦
&xmap;
&rarr;
⟼
&iff; &harr
&rarr;
⇔ ⇔
&xharr
&rarr;
⟺
&crarr;
↵
Voir aussi, à cette page un catalogue complet de flèches et leurs codes: unicode et html.

Opérateurs

htmlLatexaffichage
 
=
&rarr;
=
&equiv;
&rarr;
≡
&ne;
&rarr;
≠
&sim;
&rarr;
∼
&bsim;
&rarr;
∽
&sime;
&rarr;
≃
&bsime;
&rarr;
⋍
&asymp;
&rarr;
≈
&cong;
&rarr;
≅
&lt;
&rarr;
<
&gt;
&rarr;
>
&le;
&rarr;
≤
&ge;
&rarr;
≥
&cup;
&rarr;
∪
&cap;
&rarr;
∩
&subset;
&rarr;
⊂
&supset;
&rarr;
⊃
&in;
&rarr;
∈
&ni;
&rarr;
∋
&notin;
&rarr;
∉
&notni;
&rarr;
∌
&oplus;
&rarr;
⊕
&bigoplus;
&rarr;
⨁
&otimes;
&rarr;
⊗
&bigotimes;
&rarr;
⨂

Ensembles de nombres

Parmi les caractères spéciaux html, certains peuvent être utilisés directement pour noter les ensembles de nombres, réel, entiers naturels, entiers relatifs, et rationnels:
htmlLatexaffichage
 
&#8477;
\mathbb{R}
ℝ
&#8484;
\mathbb{Z}
ℤ
&#8469;
\mathbb{N}
ℕ
&#8474;
\mathbb{Q}
ℚ
Ces symboles ne semblent pas forcément pris en charge par défaut par tous les navigateurs. Dans le doute, au moins pour les deux ensembles les plus courants d'entiers naturels et de réels, on peut les construire en css (de la même manière qu'en Latex d'ailleurs): 
.Rset::before{content:"I";
    display:inline-block;text-align:right;
    width:.3em;margin-right:-.1em
}

.Qset:before{content:"I";font-family:arial;
    display:inline-block;text-align:right;font-size:.9em;
    width:.3em;margin-right:-.45em
}
.Zset{font-family:arial;}
.Zset::before{content:"Z";font-family:arial;
text-align:right;margin-right:-.4em;
}
puis, par exemple, 
<span class="math">
  <span class="Rset">N</span> 
  &sub; 
  <span class="Zset">Z</span>
  &sub; 
  <span class="Qset">Q</span>
  &sub;
  <span class="Rset">R</span>
</span>
donne N ⊂ Z ⊂ Q ⊂ R

Autres symboles

htmlLatexaffichage
 
&infin;
\infty
∞
&forall;
\forall
∀
&exist;
\exists
∃
&times;
\times
×
&sum;
&rarr;
∑
&prod;
&rarr;
∏
&prop;
\propto
∝
&part;
\partial
∂
&oslash;
\emptyset
ø
&empty;
\emptyset
∅
&int;
\int
∫
&perp;
\perp
⊥
&lang;
\langle
⟨
&rang;
\rangle
⟩
&lowast;
∗
&real;
\Re
ℜ
&image;
\Im
ℑ
&percnt;
\%
%
&permil;
\permil
‰
&plusmn;
\pm
±
&deg;
\circ
°
&check;
✓
&cross;
✗
&#8826;
\prec
≺
&#8827;
\succ
≻
Bien d'autres caractères et leur code unicode là, ou sur wikipédia.

Quelques autres exemples, laplacien, gradient, ...

Définition d'une fonction

On écrit la définition, assez courante, d'une fonction 
<span class="math">
  <i>f</i>  
  <span class="syst">
  <span class="align">
    <span class="row">
      <span class="cell"><span class="Rset">R</span></span>
      <span class="cell">→</span>
      <span class="cell l"><span class="Rset">R</span></span>
    </span>
    <span class="row">
      <span class="cell"><i>x</i></span>
      <span class="cell">↦</span>
      <span class="cell r">3<i>x</i><sup>2</sup>+2</span>
    </span>
  </span>
  </span>
</span>
pour obtenir f : R → R x ↦ 3x2+2

laplacien, gradient, ...

Le gradient d'une fonction f : R2→R est ∇f= ∂f/∂x ∂f/∂y et son laplacien Δf= ∂2f / ∂x2 + ∂2f / ∂y2
Avec: 
Le gradient d'une fonction 
<span class="math"><i>f</i> : 
<span class="Rset">R</span> <sup>2</sup> &rarr; <span class="Rset">R</span> 
</span> est 
<span class="math">
  <span class="vect">&nabla;</span><i>f</i>=
  <span class="matrix">
    <span class="row">
      <span class="aij">
	   <span class="frac">
          <span class="num">&part;<i>f</i></span>
          <span class="fracbar">/</span>
          <span class="den">&part;<i>x</i></span>
        </span>
      </span>
    </span>
    <span class="row">
      <span class="aij">
	      <span class="frac">
            <span class="num">&part;<i>f</i></span>
            <span class="fracbar">/</span>
            <span class="den">&part;<i>y</i></span>
          </span>
      </span>
    </span>
  </span>
</span>
et son laplacien 

<span class="math ct">Δ<i>f</i>=
  <span class="frac">
    <span class="num">&part;<sup>2</sup><i>f</i></span>
    <span class='fracbar'>/</span>
    <span class="den">&part;<i>x</i><sup>2</sup></span>
  </span>
  +
  <span class="frac">
    <span class="num">&part;<sup>2</sup><i>f</i></span>
    <span class='fracbar'>/</span>
    <span class="den">&part;<i>y</i><sup>2</sup></span>
  </span>
</span>

Calcul complet d'intégration

En combinant équations sur plusieurs lignes et intégrale, on peut écrire le calcul complet
∫ 01 x / x2+1 dx = 1/2 lnx2+1 01 = 1/2 ln12+1 − 1 / 2 ln02+1 = 1/2 ln2

Convertisseur

Expression:
❌
2*e^(-x^2)
html:
1+ x+2 / x+3

Code html:




Quelques autres références:


Paragraphe de tests...


le +∞∑n=3 le →u ou abu et a →= 3 →AB pour a def= 3 et
un +∞plim∼  1 / n2
ainsi que x → −∞ et x→−∞lim f (x) = l et aalim et aalim et aAlim et AAlim

AAA →a  et →a→ et a

un x+∞ aa lim∼   1 / n2
LongPage: h2: 25 - h3: 13