Ecriture des Maths. en html

Par Ph. M, le 2 déc. 2012

Avant Propos

On a longtemps croisé sur le ouebe la solution latex2html qui produit autant d'images que nécessaire . Le contenu est alors fidèle au source LateX mais le rendu Le rendu n'est franchement pas terrible (images à taille fixe donc souvent décentrées par rapport au choix de la taille de police de votre brouteur) . http://www-lmpa.univ-littoral.fr/OLD/labo/themes/node24.html .

En faisant un petit effort , on peut intégrer pas mal de mathématique grâce aux caractères spéciaux :

Solution caractères spéciaux

Taper le caractère spécial directement à partir de votre clavier. De nos jours il semble raisonnable d'éditer vos fichier en utf-8.
Taper le code Unicode é pour é . Sans tableau de références, ce n'est pas facile...
Taper son nom encadré de & et ; .

Voici quelque exemples:

&Alpha	Α	&alpha	α	&Ropf	ℝ	&Nopf	ℕ
&Gamma	Γ	&gamma	γ	&Zopf	ℤ	&yopf	𝕪
&kappa	κ	&kappav	ϰ	&wopf	𝕨	&iopf	𝕚
&Phi	Φ	&phi	φ	&phiv	ϕ	&sigma	σ
&Sigma	Σ	&sigmav	ς

Mathematical Fracture (lettrefr encadrée de & et ;) : 𝔞 , 𝔅 , 𝔠 , ℭ Mathematical Script (lettrescr encadrée de & et ;) : 𝒶 , ℬ , 𝒸 , 𝒞

Quelques symboles:

&le	≤	&ap	≈	&ge	≥	&lt	<	&gt	>
&equals	=	&cong	≅	&equiv	≡	&ne	≠	&xmap	⟼
&harr	↔	&hArr	⇔	&rArr	⇒	&xrArr	⟹	&lArr	⇐
&xlArr	⟸	&isin	∈	&notin	∉	&Int	∬	&int	∫
&prod	∏	&sum	∑	&infin	∞	&frac35	⅗	&frac13	⅓
&perp	⊥	&par	∥	&parsl	⫽	&exist	∃	&nexist	∄
&forall	∀	&subset	⊂	&supset;	⊃

Vous trouverez bien évidemment tout sur le site du W3C exemples: ∇² = φ U_n+1=U_n + U_n-1 x² + β x + γ = 0 le même exemple avec un petit effort de présentation via un feuille de style (cf. tests-math.css associée à cette page html) U_n+1=U_n + U_n-1 x² + β x + γ = 0

Solution LateX / MathJax

www.mathjax.org \[ \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

La solution est confortable pour le mathématicien qui dispose de la plupart du temps de ses sources en LateX. En effet , il suffit de modifier légèrement l' entête de la page html et insérer vos extraits de codes LateX. Bien évidemment la bonne documentation se trouve ici . Mais ATTENTION , ce n'est pas la panacée car cela peut être très "lourd" et les pages peuvent être lente à charger (exécution des script, chargement des fontes.) Mais pour l'utilisateur , c'est très simple , il suffit juste de déclarer le script à utiliser et le serveur mathjax, avant de copier coller son code LateX.

modification de l'entête

Il suffit d'insérer les bons liens aux javascripts Mathjax dans l'entête de votre document html, ainsi que les bons paramètres de compilation Latex que vous passer à MathJax . Pour cette page :


<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  });
</script>
<script type="text/javascript" src="http://www-lmpa.univ-littoral.fr/js/mathjax/MathJax.js?config=TeX-AMS_HTML-full">;</script>

placement de votre code Latex dans le fichier html

Il suffit de copier/coller les extraits de votre source LateX entre les bornes $ bla bla $ ou $ blalbla $ pour un affichage en ligne comme ici : $ \alpha x^2 + \beta x + \gamma = 0 $ , et entre les bornes \[ bla bla \] pour un affichage en blocs comme ci-dessous :

\[ J_\alpha(x) = \sum\limits_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha} \]

Mais les équations de Lorenz qui sont encadrées d'un begin{aligned} et d'un end{aligned} se passent d'encadrement propre à MathJax:

\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}

Pourquoi html5 css3 ?

html5

La norme HTML a été profondément remaniée avec la version 5. De nombreux éléments sont ajoutés. Grosso modo il y a deux gros changement:

Tout d'abord il y a un chamboulement dans la hiérarchisation, sémantique d'une page html notamment avec l'apparition des éléments header, article, section, aside , footer . ( Avant on multipliait les div id= que l'on définissait soi-même dans une feuille de style ). Pas question ici de s'étendre à un public d'utilisateurs de LateX sur les éléments nav , header, article, section et footer . Attention: parti d'un squelette glané sur le Web, il y a une bourde (sans conséquence mais ce n'est pas propre!) au niveau de la hiérachie de cette page : les articles sont inclus dans une section . Après vérification sur W3C, il semble bien que section soit plutôt une partie d'un article ( comme en LateX ) . L'élément aside à l'air d'être défini comme un "à-côté contextuel". Il peut servir comme ici de menu latéral avec son élément nav (pour navigation - no comments) . Mais on peut également le retrouver à l'intérieur de chaque section, article par exemple pour citer vos sources ou proposer d'autres références.

Le 2ème gros changement est multimédia : introduction de nombreux éléments pour faciliter l'interactivité (applications , formulaires) ainsi que l'inclusion de vidéo son image (caption) dans les page html

Hauqt

CSS

CSS2-3 autorise désormais tout un tas d'effets spéciaux avec un simple ( simple car ASCII mais pas si simple que cela!) fichier de style alors qu'il fallait déployer tout un tas de ruses images de fond / javascript etc. Entre autres:

jeux d'ombres et coins arrondi,s
transparence et rotations,
effets de transitions,
...

archive page-perso.zip

contenu de l'archive page-perso.zip

L'archive est téléchargeable ICI . l'arborescence est comme suit:



├── enseignement.html
├── files
├── images
│   ├── logos
│   │   ├── cnrs.gif
│   │   ├── lmpa-ulco-tr-grey2.png
│   │   ├── lmpa-ulco-tr-grey.png
│   │   ├── lmpa-ulco-tr.png
│   │   ├── ulco-f.gif
│   │   └── Universite_Lille_Nord_de_France_logo-f.gif
│   ├── photo-chat.png
│   ├── photo.png
│   ├── pics
│   │   ├── doc-bib.png
│   │   ├── doc-doc.png
│   │   ├── doc-dvi.png
│   │   ├── doc-odt.png
│   │   ├── doc-pdf.png
│   │   ├── doc-ps.png
│   │   ├── doc-tex.png
│   │   ├── doc-txt.png
│   │   ├── external.gif
│   │   ├── pi.png
│   │   ├── wood_bg.jpg
│   │   └── wood_bg.png
├── index.html
├── perso.html
├── recherche.html
└── styles
    ├── perso.css
    ├── perso-2.css
    ├── perso-3.css
    └── tests-math.css

Pour faire vous même des essais , il suffit de dézipper cette archive dans votre espace public personnel (~/public_html ) et dans un premier temps éditer les 3 fichiers index.html, recherche.html et enseignement.html puis modifier le fichier de style perso.css à votre guise.

feuilles de styles

Sans feuille de styles, ces pages ressembleraient à ça . c'est exactement la même page que celle-ci simplement en enlevant l'instruction dans l'entête de la page enseignement.html . Ci-dessous les copies écran du même contenu sans feuille de style puis successivement avec les feuilles perso.css, perso2.css et enfin perso3.css

Remarque : Il y a là un essai de transition zoom hover ... histoire de voir qu'on peut effectivement le faire en CSS ... Ce n'est peut-être pas la meilleur méthode ( cf jsQuery ?!) . Les images sont également

Retour au paragraphe normal

Quelques essais en vrac

h3 que donne la table du fihier style

colonne1	colonne2	colonne2	colonne2
Rome	Oslo	paris	et puis blavblala `avec du code inf=`
hdf sk	23424	ZERZR	35353,865

test balise audio

Listes et blocs

liste class = liste-bordee

Item 1 s flsf
Item 2 blalblablablas
Item 3

titre h5 Blockquote , Geluck disait

Si tu donnes un poisson au mendiant , il mangera une fois. Si tu lui apprends à voler un poisson , il mangera toute sa vie...

After typing in cd D: at the command prompt, the output should show D:\>