Mise à jour: 15 septembre 2014
Version: 1.0
Author: Jean-Louis Bicquelet-Salaün
Location: http://jlbicquelet.free.fr
Copyright: (c) 2014 Jean-Louis BICQUELET-SALAÜN

---

presentation

Avant (il y a bien longtemps en 1993, 1994) pour afficher des formules mathématiques dans une page web, on utilisait latex et on générait une image gif qui était insérée dans la page web. Une variante de l'ancienne méthode consiste à passer par l'éditeur d'équation et à sauver l'image.

Mainenant, il est possible à l'aide de feuille de style ccs et de html d'afficher bon nombre d'équation dans de nombreux browsers. Il existe cepandant parfois des impossibilités liées au navigateur.

J'ai recuilli plusieurs cas bien utiles

exemples

exemple mathématiques

Voici quelques exemples d'équations mathématiques

• equation
• racines
• fractions

exemple en chimie

Voici quelques exemples d'équation en physique et chimie

• equation bilan
• nombre de masse

---

equation

(a+b)2= a2 + 2ab +b2

(1)

<table class="equation" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            (<i>a</i>+<i>b</i>)<sup>2</sup>= <i>a</i><sup>2</sup> 
			           + 2<i>a</i><i>b</i>  + <i>b</i><sup>2</sup>
        </td>
        <td class="equation_number">
            (1)
        </td>
    </tr>
</table>

racine

r = √

x2 + y2

<table style="margin-top:0.5em; margin-bottom:0.5em; text-align: center;"
    cellpadding="0" cellspacing="0" >
    <tr>
        <td nowrap="nowrap" align="right">
            <i>r</i> = <span style="font-size: 150%;">√</span>
        </td><td style="border-top:solid 1px black;" nowrap="nowrap">
             <i>x</i><sup>2</sup> + <i>y</i><sup>2</sup>
        </td>
    </tr>
</table>

fraction

x =	x2 + x + 1
	3x

<table class="fraction" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="2" nowrap="nowrap">
            <i>x</i> =   
        </td><td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1
        </td>
    </tr><tr>
        <td class="upper_line">
             <center>3<i>x</i></center>
        </td>
    </tr>
</table>

equation bilan

<div class="eq-c">
C + O<sub>2</sub> <span class="dblarrow">→</span> CO<sub>2</sub>
</div>

<style>
.dblarrow {
    font-size: 125%;
    top: -0.4ex;
    margin: 0 2px;
}
.dblarrow:after {
    content:"\2190";
    position: absolute;
    left: 0;
    top: 0.5ex;
}
</style>

nombre de masse

Ceci ne fonctionne pas sur internet explorer 9!

<style>
.limes {
    position: relative;
    display: inline-block;
    margin: 0 0.2em;
    vertical-align: middle; 
    text-align: center;
}
.limes > span { 
    display: block;
    margin:-0.5ex auto;
}
.limes span.numup,
.limes span.overdn {
    font-size: 70%;
}</style>

<div class="eq-c">
<span class="limes"><span class="numup">14</span><span class="overdn">6</span>
</span>C →
<span class="limes"><span class="numup">14</span><span class="overdn">7</span>
</span>N + <span class="sy">ν<span class="onsmall">–</span></span>
</div>

Ancienne méthode

1. ouvrir word, cliquer sur insertion puis équation
   
   

2. choisir l'équation désirée et la mettre en forme. Attention à ce que le curseur ne soit pas trop près de l'image, faire éventuellement plusieurs retourn chariot

   
   

3. envoyer l'image de la fenêtre dans le clipboard en tapant ALT + Impr_ecran
   

4. ouvrir mspaint et coller l'image par CTRL + V
   

5. sélectionner à la souris la zone correspondant à l'équation puis taper CTRL + C
   

6. créer une nouvelle image avec la séquence CTRL +N , CTRL +V , enregistrez sous
   

On obtient à l'affichage des images d'équations comme celles-ci: