web-dev-qa-db-fra.com

Équations mathématiques sur le Web

Comment puis-je afficher des équations mathématiques sur le Web? Je connais déjà le mode Math LaTeX.

43
Justin R.

Il s'avère que c'est un peu pénible.

Vous pouvez utiliser MathML , mais la prise en charge du navigateur est encore incertaine. Si vous commencez avec du latex, vous avez quelques options pour la conversion en html, mais elles finiront généralement par rendre les équations réelles en images et les intégrer.

Rien de si joli (sauf si vous avez recours au pdf ou à quelque chose). Le mieux dépendra un peu du type de contenu, du nombre d'équations et de la complexité des équations.

Ici est un bon résumé.

25
simon

Les autres réponses sont obsolètes. Depuis 2012, les belles mathématiques sont faciles à écrire et à rendre. La technologie s'appelle MathJax . Vous pouvez le voir en action silencieuse sur MathOverflow et des centaines de blogs mathématiques.

MathJax est un moteur d'affichage JavaScript open source pour les mathématiques qui fonctionne dans tous les navigateurs modernes. Plus de configuration pour les lecteurs. Plus de plugins de navigateur. Plus d'installations de polices… Ça marche.

Mathjax est fiable et discret, il vous suffit donc d'écrire les mathématiques. Vous le faites en Tex (Latex), une syntaxe concise avec laquelle la plupart des scientifiques et des mathématiciens sont familiers (et ont partagé des décennies de bons tutoriels). Pour Mathjax, vous écrivez simplement le code Tex en ligne dans votre HTML entre les signes double dollar, par exemple.

Lorsque $$ a\ne 0 $$, il existe deux solutions pour $$ ax ^ 2 + bx + c = 0 $$ et elles sont $$ x = {-b\pm\sqrt {b ^ 2-4ac}\plus de 2a}. $$

Pour utiliser Mathjax pour rendre vos calculs, mettez une ligne Javascript dans votre en-tête HTML:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>

Si vous publiez sur une plate-forme telle que Wordpress, Tumblr ou Blogger, il existe des plug-ins dans leurs galeries pour ce faire ( Wordpress ).

Comment Mathjax rend-il les mathématiques? Avec Javascript, il rend vos mathématiques en HTML et CSS magnifiques (ressemblant remarquablement à Latex) en une fraction de seconde. Si un navigateur prend en charge MathML, il peut également afficher les mathématiques, mais ce n'est pas important. C'est un succès populaire parce que le flux de travail de l'utilisateur final est facile, pas à cause de la technologie qui le sous-tend.

Vous pouvez choisir d'utiliser Mathjax (sur des images png) sur Wikipédia si vous avez un compte. Chercher Special:Preferences/Apparence.


MathML est ridicule. Ce n'est ni lisible ni écrit par l'homme (l'équation quadratique prend 800 caractères - c'est 50 en Tex). C'est juste n autre langage XML inutile . Heureusement, il est obsolète avant que la plupart des navigateurs ne le prennent en charge. Il n'est même pas regardez aussi bon que Tex-HTML ou CSS-Mathjax!

29
Colonel Panic

Mes deux approches préférées:

18
jmbr

Le package jsMath est une autre option qui utilise le balisage LaTeX et les polices natives. Citant de leur page Web http://www.math.union.edu/~dpvc/jsMath/ :

Le package jsMath fournit une méthode d'inclusion des mathématiques dans les pages HTML qui fonctionne sur plusieurs navigateurs sous Windows, Macintosh OS X, Linux et d'autres versions d'Unix. Il surmonte un certain nombre des lacunes de la méthode traditionnelle d'utilisation des images pour représenter les mathématiques: jsMath utilise des polices natives, donc elles redimensionnent lorsque vous modifiez la taille du texte dans votre navigateur, elles s'impriment à la pleine résolution de votre imprimante et vous vous n'avez pas à attendre que des dizaines d'images soient téléchargées pour voir les mathématiques dans une page Web. Il y a aussi des avantages pour les auteurs de pages Web, car il n'est pas nécessaire de prétraiter vos pages Web pour générer des images, et les mathématiques sont saisies sous forme TeX, il est donc facile de créer et de gérer vos pages Web.

Voir par exemple cette page ou celle-ci .

11
Fanfan

Vous pouvez faire plus de calculs directement en HTML que la plupart des gens ne le pensent. Voir ces notes .

Le seul moyen sûr de rendre LaTeX est d'enregistrer la sortie sous forme d'image. Certains sites essaient d'utiliser des outils pour le faire à la volée, et ils ne fonctionnent jamais de manière fiable. Par exemple, sur certains blogs, cela fonctionne si vous visitez directement la page Web, mais pas si vous passez par Feedburner/Google Reader.

J'ai eu une expérience terrible avec le support du navigateur MathML, à la fois dans Firefox et IE. N'essayez même pas. Pas encore. Peut-être dans quelques années.

Voici le site que j'utilise pour compiler LaTeX en gifs.

Si vous êtes prêt à utiliser PDF au lieu de HTML, les choses deviennent beaucoup plus faciles. Créez simplement votre document LaTeX et utilisez pdflatex pour le compiler en PDF. Si vous allez PDF route, vous pourriez être intéressé par comment inclure PDF propriétés comme l'auteur, les mots-clés, etc. dans votre fichier LaTeX En outre, cette page explique comment baliser le LaTeX pour créer des liens dans votre PDF.

7
John D. Cook

Katex

Un couple de développeurs de la Khan Academy a publié une bibliothèque rapide basée sur Tex appelée Katex =:

  • Vite
  • Haute qualité
  • Autonome; et,
  • Peut être rendu sur le serveur

Ressemble à une grande option moderne.

Katex sample

7
Joshua Pinter

texvc peut convertir les équations mathématiques de LaTeX en png ou HTML.

1
jfclavette

LaTeX et MathML sont les seules "bonnes" façons de le faire. Cependant, chacun a de graves limites. Les autres options sont des images (pas vraiment optimales si vous avez besoin de modifier les équations plus tard) ou du HTML complexe (nécessite une certaine formation mais peut être fait).

1
Jeremy

Pour ce faire, j'ai écrit un module javascript open source, nommé jqmath. Voir http://mathscribe.com/author/jqmath.html . Vous tapez des équations dans une syntaxe simplifiée de type TeX, et jqmath les convertit en MathML ou en HTML et CSS simples, selon le navigateur. C'est plus efficace et accessible que l'utilisation d'images.

Soit dit en passant, certains des résumés et notes mentionnés dans les autres réponses ici sont assez dépassés maintenant. De plus, Firefox prend désormais en charge MathML, et le webkit (Chrome et Safari) l'a dans ses versions nocturnes, bien qu'il ne l'ait pas encore publié. Internet Explorer affiche MathML si vous disposez du plug-in MathPlayer. Opera simule MathML avec une feuille de style. MathML fait partie de la norme HTML 5, donc vraisemblablement tous ces navigateurs le prendront nativement en charge plus tôt que tard. Il est vrai que jusque-là, la sortie de jqmath ne sera pas aussi bon que TeX, mais il est certainement lisible et est certainement une meilleure solution pour les pages Web à l'avenir.

1
Dave Barton

J'ai utilisé ASCIIMathML pour cela dans le passé. Il s'agit essentiellement d'une bibliothèque JavaScript et peut utiliser un plugin dans IE pour optimiser les performances, mais fonctionne également sans elle dans IE & Firefox/Mozilla (bien qu'un peu plus lent) La syntaxe prend en charge un sous-ensemble de LaTeX, mais les différences provoquent une certaine confusion, ce qui peut dérouter vos utilisateurs, selon leur origine.

Voici quelques liens pour que vous puissiez les vérifier vous-même:

Pas parfait et ne fonctionne pas dans tous les navigateurs (Safari, etc.) mais c'est quelque chose qui fonctionne au moins aujourd'hui, bien que dans un sous-ensemble quelque peu sélectif du Web.

1
krohrbaugh

Je rend les formules LaTeX "à la demande" dans mon wiki. Fondamentalement, j'extrais le code latex de chaque section wiki et le mets dans un fichier .tex (dont le nom de fichier est une somme md5 du latex, donc si le même code est utilisé à nouveau, le même tex et donc la même image sera utilisé) . Le fichier tex est ensuite compilé au latex par une tâche cron toutes les minutes, pour produire d'abord un .ps, puis avec le programme de conversion un .png (nommé de nouveau avec le md5 d'origine). L'entrée wiki remplace le texte latex par une balise img faisant référence à ce png (avec le code latex original comme alt, pour les lecteurs de texte).

Si vous voulez suivre cette voie, faites très attention à désinfecter votre latex autant que possible. il y a des commandes dans latex, comme\input, que vous ne voulez certainement pas laisser passer, car toute personne capable de les utiliser pourrait inclure n'importe quel fichier lisible sur votre disque serveur et l'inclure dans la sortie latex résultante.

Pour résoudre ce problème, Mediawiki (de renommée wikipedia) a un plugin spécial qui désinfecte l'entrée en latex, mais je ne voulais pas l'utiliser pour deux raisons: d'abord je n'ai pas utilisé mediawiki, ensuite il est écrit en OCaml et je n'ai pas fait '' Je ne veux pas jouer avec une langue que je ne connais pas.

1
Stefano Borini

J'ai l'impression que MediaWiki vous permettra d'entrer le balisage LaTeX (ou quelque chose de similaire) et de décider dynamiquement de la meilleure façon de l'afficher. Actuellement, je pense que le HTML est utilisé dans la mesure du possible pour les petites expressions et les images pour les expressions plus compliquées qui ne peuvent pas être représentées autrement; Je soupçonne qu'un jour, il pourra profiter de toutes les autres méthodes qui deviennent à la pointe de la technologie, c'est-à-dire MathML si les navigateurs commencent à le prendre en charge. Je pense donc que vous pourriez constater que si vous utilisez MediaWiki comme s'il s'agissait de votre moteur de site Web, vous serez compatible avec tout ce qui viendra à l'avenir.

0
skiphoppy

Si vous utilisez des images, un lecteur pour un utilisateur aveugle pourra-t-il lire l'équation? Certains voudront peut-être.

0
thursdaysgeek

Il existe une petite application Mac appelée LatexIt qui facilite la conversion des équations LaTeX au format PDF, PNG, etc.

(Je l'utilise pour créer des équations pour mes diapositives dans Keynote ou PowerPoint. C'est très bien, avec le support glisser-déposer, vous pouvez donc simplement "faire glisser" les équations n'importe où pour les insérer.)

0
Frank

Vous pouvez générer une image d'équation à la volée via un serveur LaTeX.

http://www.forkosh.com/mimetex.html

Si vous utilisez WordPress, vous pouvez utiliser LaTeX pour le plug-in WordPress ( http://wordpress.org/extend/plugins/latex/ ).

0
riza

Actuellement, l'état du rendu MathML côté client n'est pas prêt pour une large adoption. Cela signifie que vous avez vraiment besoin de rendre le MathML comme une image. La manière de procéder dépendra de votre environnement.

Avez-vous un accès root à votre propre serveur? Êtes-vous à l'aise d'y installer un logiciel? Dans ce cas, vous pouvez rendre vos propres images. Si vous utilisez un logiciel de blog ou un wiki, vous pouvez généralement trouver un plugin qui tirera parti des capacités de votre plate-forme. C'est généralement le scénario de l'idée si vous prévoyez d'écrire beaucoup d'expressions mathématiques.

Si vous hébergez vos propres images, vous pouvez soit les pré-rendre, soit utiliser une extension comme mimetex.cgi. Si vous autorisez le rendu d'expressions MathML arbitraires, vous courez le risque que d'autres sites Web se connectent à chaud à votre moteur de rendu d'image. Si vous placez un filtre sur votre serveur Web pour empêcher les liens dynamiques, les personnes qui consultent votre site via un lecteur de flux seront également bloquées.

Si vous ne pouvez pas restituer vos propres images, ou si vous n'avez que quelques expressions que vous souhaitez rendre, vous pouvez généralement demander à un autre service de générer l'image et de lier l'image à chaud sur votre site. L'inconvénient est bien sûr votre dépendance à un autre site, qui ne reçoit rien en retour pour vous servir des images.

Exemples d'autres services (comme mentionné dans d'autres commentaires): * http://www.artofproblemsolving.com/LaTeX/AoPS_L_TeXer.php : texte alternatif http: //alt2.artofproblemsolving .com/Forum/latexrender/images/a/f/c/afc183343d84d030898f589bac12a8d9cf04558a.gif * http://www.forkosh.com/mimetex.html : mimetex.cgi http://www.forkosh.dreamhost.com/mimetex.cgi?c=%5Csqrt%7Ba%5E2+b%5E2%7D

L'avantage d'utiliser mimetex est que l'on peut facilement changer la formule et la rendre à nouveau.

0
brianegge