web-dev-qa-db-ja.com

ウェブ上の数学の方程式

数学の方程式をWebでレンダリングするにはどうすればよいですか?私はすでにLaTeXの数学モードに精通しています。

43
Justin R.

これは少し苦痛であることがわかりました。

MathML を使用できますが、ブラウザーのサポートはまだ不明確です。ラテックスから始めている場合は、htmlに変換するためのいくつかのオプションがありますが、それらはすべて、実際の方程式を画像にレンダリングしてインライン化することになります。

(PDFか何かに頼らない限り)それほどきれいなものはありません。何が最適かは、コンテンツの種類、方程式の数、方程式の複雑さによって多少異なります。

ここ はまともな要約です。

25
simon

他の答えは時代遅れです。 2012年の時点では、美しい数学は簡単に記述でき、作成してレンダリングできます。このテクノロジーは MathJax と呼ばれます。 MathOverflow および数百の数学ブログの静かなアクションでそれを見ることができます。

MathJaxは、すべての最新のブラウザーで機能する数学用のオープンソースのJavaScript表示エンジンです。読者のためのこれ以上の設定はありません。ブラウザプラグインはもうありません。フォントのインストールはもう必要ありません…機能するだけです。

Mathjaxは信頼性が高く、邪魔にならないので、数学を書くだけで済みます。これは、ほとんどの科学者や数学者が使い慣れている簡潔な構文であるTex(Latex)で行います(数十年にわたる優れたチュートリアルを共有しています)。 Mathjaxの場合、HTMLの2つのドル記号の間にインラインでTexコードを記述するだけです。

$$ a\ne 0 $$の場合、$$ ax ^ 2 + bx + c = 0 $$に対する2つの解があり、それらは$$ x = {-b\pm\sqrt {b ^ 2-4ac}\2a以上} $$

Mathjaxを使用して数式をレンダリングするには、HTMLヘッダーにJavaScript行を挿入します。

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

Wordpress、Tumblr、Bloggerなどのプラットフォームで公開する場合、これを行うプラグインがギャラリーにあります( Wordpress )。

Mathjaxはどのように数学をレンダリングしますか? Javascriptを使用すると、ほんの一瞬で数学を美しいHTMLおよびCSS(著しくラテックスに似ています)にレンダリングします。ブラウザがMathMLをサポートしている場合は、それを使用して数学をレンダリングすることもできますが、それは重要ではありません。エンドユーザーのワークフローが簡単であり、その背後にあるテクノロジーが原因ではないため、これは人気のある成功です。

アカウントをお持ちの場合は、WikipediaでMathpng(png画像以上)の使用を選択できます。探す Special:Preferences /外観。


MathMLはばかげています。人間が読めるものでも、人間が書けるものでもありません(2次方程式は 800文字 -Texでは50です)。それは単なる 別の無意味なXML言語 です。ありがたいことに、ほとんどのブラウザーがサポートする前に、それは時代遅れです。 TexやMathjaxのHTML-CSSほど見た目もよくありません!

29
Colonel Panic

私の2つのお気に入りのアプローチ:

18
jmbr

jsMathパッケージは、LaTeXマークアップとネイティブフォントを使用する別のオプションです。彼らのウェブページからの引用 http://www.math.union.edu/~dpvc/jsMath/

JsMathパッケージは、Windows、Macintosh OS X、Linux、およびその他の種類のUNIXで複数のブラウザーにわたって機能するHTMLページに数学を含める方法を提供します。これは、数学を表現するために画像を使用する従来の方法の多くの欠点を克服します。jsMathはネイティブフォントを使用するため、ブラウザーでテキストのサイズを変更するとサイズが変更され、プリンターの最大解像度で印刷されます。 Webページで数学を表示するために、何十もの画像がダウンロードされるのを待つ必要はありません。画像を生成するためにWebページを前処理する必要がなく、数学がTeX形式で入力されるので、Webページの作成と保守が簡単なので、Webページの作成者にとっても利点があります。

たとえば this page または that one を参照してください。

11
Fanfan

ほとんどの人が理解しているよりも多くの数学をHTMLで直接行うことができます。これらの notes を参照してください。

LaTeXをレンダリングする唯一の安全な方法は、出力を画像として保存することです。一部のサイトは、その場でこれを行うためのツールを使用しようとしますが、それらは確実に機能しません。たとえば、一部のブログでは、これはWebページに直接アクセスした場合に機能しますが、Feedburner/Googleリーダーにアクセスした場合には機能しません。

FirefoxとIEの両方で、MathMLブラウザーサポートでひどい経験をしました。試さないでください。未だに。たぶん数年後。

これが site で、LaTeXをgifにコンパイルするために使用します。

HTMLの代わりにPDFを使用したい場合は、物事がはるかに簡単になります。LaTeXドキュメントを作成し、pdflatexを使用してPDFにコンパイルするだけです。 PDFルート、興味​​があるかもしれません LaTeXファイルに著者、キーワードなどのPDFプロパティ を含める方法== 。また、 このページ は、LaTeXをマークアップしてPDFにリンクを作成する方法を説明しています。

7
John D. Cook

Katex

Khan Academy の開発者数名が、Texに基づいた Katex と呼ばれる超高速ライブラリをリリースしました=:

  • 速い
  • 高品質
  • 自己完結型;そして、
  • サーバーでレンダリングできます

素晴らしいモダンなオプションのように見えます。

Katex sample

7
Joshua Pinter

texvcはLaTeX数学方程式をpngまたはHTMLに変換できます。

1
jfclavette

LaTeXと MathML がこれを行う唯一の「正しい」方法です。ただし、それぞれに厳しい制限があります。その他のオプションは、画像(後で数式を編集する必要がある場合は実際には最適ではありません)または複雑なHTML(トレーニングが必要ですが、実行できます)です。

1
Jeremy

これを行うためのオープンソースのjavascriptモジュールをjqmathという名前で作成しました。 http://mathscribe.com/author/jqmath.html を参照してください。数式はTeXに似た単純な構文で入力し、jqmathはブラウザーに応じて数式をMathMLまたは単純なHTMLとCSSに変換します。これは、画像を使用するよりも効率的でアクセスしやすいです。

ちなみに、ここで他の回答に記載されている要約とメモの一部は、かなり古くなっています。また、Firefoxは現在MathMLをサポートしており、webkit(ChromeとSafari)はナイトリービルドでそれをリリースしていますが、まだリリースされていません。 MathPlayerプラグインがある場合、Internet ExplorerはMathMLをレンダリングします。 OperaスタイルシートでMathMLを偽造します。MathMLはHTML 5標準の一部であるため、おそらくこれらのすべてのブラウザーがネイティブでサポートしますが、それよりも早くサポートされます。それまでは、jqmathの出力は表示されません。 TeXと同じくらい良いですが、それは確かに読みやすく、今後のWebページには間違いなく優れたソリューションです。

1
Dave Barton

過去にこれにASCIIMathMLを使用しました。これは基本的にJavaScriptライブラリであり、IEでプラグインを使用してパフォーマンスを最適化できますが、IE&Firefox/Mozillaでもプラグインなしで動作します(少し遅いですが) )構文はLaTeXのサブセットをサポートしますが、違いにより混乱が生じるため、ユーザーの出所によってはユーザーを混乱させる可能性があります。

ここにいくつかのリンクがありますので、自分で確認できます。

完璧ではなく、すべてのブラウザー(Safariなど)で機能するわけではありませんが、Webのいくらか選択的なサブセットではありますが、少なくとも現在は機能しています。

1
krohrbaugh

私のウィキではLaTeXの数式を「オンデマンド」でレンダリングしています。基本的に、私は各wikiセクションからlatexコードを抽出し、それを.texファイルに入れます(ファイル名はlatexのmd5sumであるため、同じコードが再度使用される場合、同じtexが使用されるため、同じ画像が使用されます)。 。次に、texファイルは毎分cronタスクによってラテックスコンパイルされ、最初に.psが生成され、次に変換プログラムで.png(元のmd5で再度名前が付けられます)が生成されます。 wikiエントリは、latexテキストをこのpngを参照するimgタグで置き換えます(テキストリーダーの場合は、元のlatexコードをaltとして使用します)。

このようにしたい場合は、ラテックスをできるだけ消毒するようにveryに注意してください。\inputのようなラテックスには、絶対に通過させたくないコマンドがあります。それらを使用できる人なら誰でも、サーバーディスクに読み取り可能なファイルを含め、結果のラテックス出力に含めることができるからです。

この問題を解決するために、(wikipedia名声の)Mediawikiには、latex入力をサニタイズする特別なプラグインがありますが、2つの理由で使用したくありませんでした。1つはmediawikiを使用しなかったこと、もう1つはOCamlで作成したこと、そしてわからない言語を台無しにしたい。

1
Stefano Borini

MediaWikiはLaTeXマークアップ(または類似のもの)を入力して、それを表示するための最良の方法を動的に決定できるようにするという印象を持っています。現在のところ、可能な限りHTMLを使用して小さな表現や画像を表現し、他の方法では表現できない複雑な表現を表現しています。いつかは、ブラウザがサポートを開始した場合、MathMLなど、他のあらゆる方法が最新の技術になる可能性があると思います。したがって、MediaWikiをWebサイトエンジンであるかのように使用すると、将来のあらゆるものとの上位互換性があることがわかると思います。

0
skiphoppy

画像を使用する場合、視覚障害者向けのリーダーで方程式を読むことができますか?したい人もいます。

0
thursdaysgeek

LatexIt と呼ばれる小さなMacアプリがあり、LaTeX方程式をPDFやPNGなどに簡単に変換できます。

(KeynoteまたはPowerPointでスライドの数式を作成するために使用しています。ドラッグアンドドロップのサポートがあるのでとても便利です。数式をどこにでも「ドラッグ」して挿入できます。)

0
Frank

LaTeXサーバーを介してオンザフライで方程式画像を生成できます。

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

WordPressを使用している場合は、WordPress( http://wordpress.org/extend/plugins/latex/ )プラグインにLaTeXを使用できます。

0
riza

現在、クライアント側のMathMLレンダリングの状態は、広く採用する準備ができていません。つまり、MathMLを画像としてレンダリングする必要があります。これを行う方法は、環境によって異なります。

自分のサーバーにrootアクセスできますか?あなたはそれにソフトウェアをインストールすることに満足していますか?この場合、独自の画像をレンダリングできます。実行中のブログソフトウェアやWikiの場合、通常はプラットフォームの機能を利用するプラグインを見つけることができます。多くの数式を書くことを計画している場合、これは通常、アイデアのシナリオです。

独自の画像をホストする場合は、事前にレンダリングするか、mimetex.cgiなどの拡張機能を使用できます。任意のMathML式のレンダリングを許可すると、他のWebサイトがイメージレンダラーにホットリンクする危険性があります。ホットリンクを防止するためにWebサーバーにフィルターを設定すると、フィードリーダーを介してサイトを閲覧しているユーザーもブロックされます。

独自の画像をレンダリングできない場合、またはレンダリングする式が数個しかない場合は、通常、別のサービスに画像を生成させ、サイト上の画像にホットリンクを設定できます。もちろん、欠点は別のサイトに依存していることです。別のサイトは、画像を提供しても見返りがありません。

他のサービスの例(他のコメントで言及されている)には次のものが含まれます:* http://www.artofproblemsolving.com/LaTeX/AoPS_L_TeXer.phpaltテキストhttp://alt2.artofproblemsolving.com/Forum/latexrender/pictures/a/f/c/afc183343d84d030898f589bac12a8d9cf04558a.gif * http://www.forkosh.com/mimetex.htmlmimetex.cgi http://www.forkosh.dreamhost.com/ mimetex.cgi?c =%5Csqrt%7Ba%5E2 + b%5E2%7D

Mimetexを使用する利点は、数式を簡単に変更して再レンダリングできることです。

0
brianegge