cClaude.rocks ☕ Le blog

[Nouvelles technologies, sciences et coups de gueule…]

Menu
😤 Ce billet a été édité le : 2021-11-16

Ce billet utilise des notations MathML qui ne sont supportées correctement que par Firefox et Safari (parmi les navigateurs communs), sur les autres navigateurs vous devrez utiliser une extension complémentaire pour obtenir un affichage correct (Support de MathML par les navigateurs).

Google a délibérément retiré le support de MathML de chrome/chromium, semble-t-il, pour des raisons de performances…

Edge devrait supporter MathML (ayant des sources contradictoires, merci de me confirmer si vous le pouvez)



MathML

Il est possible d’ajouter des équations scientifiques à vos pages web en utilisant le standard MathML.

i-th row [ a11 a12 a13 ... a1n : : : ... : ai1 ai2 ai3 ... ain : : : : an1 an2 an3 ... a n n ] [ x1 x2 x3 : xn ]

 

x maps to y = f n ( x ) = ( 1 + 1 x n ) n

 

a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 ! 5 ! f ( 4 ) ( η ) , a η b

 



Présentation

MathML est un langage basé sur XML permettant de décrire des équations mathématiques.

MathML ne s’occupe pas uniquement de la présentation mais aussi du sens des différentes composantes des formules mathématiques. On distingue donc les balises de présentation (presentation markup) des balises décrivant la formule, le contenu (content markup).

Si MathML est insuffisant pour vos besoins, regardez OpenMath un système permettant d’inclure des balises sémantiques. Mais vous allez voir que MathML est déjà très puissant.

Voici une rapide introduction à MathML.



Introduction

D’abord vous devrez mettre votre formule dans une balise math en utilisant la syntaxe suivante :

<math xmlns="http://www.w3.org/1998/Math/MathML">

… votre équation ici …

</math>

Écrivons notre première équation : x+2=0

Il faut commencer par identifier les différentes parties :

type Balise
x identificateur (nombre) <mi> Identifiant
+ opérateur <mo> Opérateur, clôture, séparateur ou accent
2 nombre <mn> Nombre
= opérateur <mo> Opérateur, clôture, séparateur ou accent
0 nombre <mn> Nombre

Le code HTML sera :

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>x</mi>
  <mo>+</mo>
  <mn>2</mn>
  <mo>=</mo>
  <mi>0</mi>
</math>

Bon, ce n’est pas très efficace pour celle-ci. Mais il faut garder à l’esprit que du coup on met un type sur chaque partie de l’équation et que celle-ci pourra être correctement interprétée par un programme.

On va complexifier un peu en ajoutant la notion de parenthèse et d’exposant : x+2x-5=x2-2x-15

Pour comprendre la syntaxe on va simplifier, écrivons x en MathML:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfenced>
  <mi>x</mi>
  </mfenced>
</math>

Mais attention <mfenced> <mi>x</mi> <mi>y</mi> </mfenced> donnera: xy

Pour écrire la première partie de notre équation x+2 nous devrons donc utiliser la balise mrow à l’intérieur de la balise mfenced comme ceci :

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfenced>
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
  </mfenced>
</math>
Description Balise
parenthèses <mfenced>
regroupement d’arguments <mrow>

Maintenant attardons-nous sur l’écriture de : x+2x-5

La nouveauté c’est juste le signe multiplié implicite entre les deux blocs de parenthèses. Cela s’écrit assez simplement, c’est un opérateur il sera entouré par la balise <mo> et lui-même s’écrit à l’aide de : &InvisibleTimes;

Description Syntaxe
Signe multiplié implicite <mrow>&InvisibleTimes;</mrow>

Cela donne donc :

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfenced>
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
  </mfenced>
  <mo>&InvisibleTimes;</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
      <mo>-</mo>
      <mn>5</mn>
    </mrow>
  </mfenced>
</math>

Il ne nous reste plus qu’à apprendre comment s’écrit une puissance comme : x2

Pour cela, on utilisera la balise msup comme cela :

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

Avant la dernière partie, voici une petite subtilité de présentation, la balise math peut prendre de nombreux attributs, mais nous nous limiterons ici à l’attribut display qui peut prendre deux valeurs inline ou block. Cela permet d’informer le moteur de rendu si l’on souhaite que l’affichage se fasse à la suite du contenu courant ou dans un bloc (ligne) séparé.

Exemple inline : x2 - <math display="inline" xmlns=... >...</math>

Exemple block : x2



À vous de jouer :

Et bien maintenant vous avez tout ce qu’il faut pour écrire cette équation x+2x-5=x2-2x-15 avec MathML, comme je suis gentil, je vous mets le début :



Références :

ᦿ


ℹ 2006 - 2024 | 🏠 Accueil du domaine | 🏡 Accueil du blog