javascript - HTML、CSS、Javascript を使用してプルーフ ツリーを表示するにはどうすればよいですか?

Question

Web ページ内に自然演繹のスタイルで証明木を表示したい。JSONファイルからデータを取得します。

このようなものを表示する最良の方法は何ですか? cssだけで可能ですか？または、このようなことができるライブラリはありますか？最終的にはインタラクティブにする必要があるため、画像としてレンダリングすることはできません。また、このツリーはかなり大きくなる可能性があることにも言及する必要があります。

例：

更新: 最終結果がどのように見えるかのより良い例:

Answer 1

最も簡単な解決策は、ラテックス JavaScript レンダラーであるmathjaxです。また、他にも同様のレンダリング オプションがかなりあります。

あるいは、数学方程式を書くための w3c 標準であるMathMLを見ることもできます。悲しいことに、現在、ここに見られるように、それに対するサポートはかなり不足していますが、長期的には素晴らしい解決策になるでしょう. さらに、前述のMathJaxは、 MathML をまだサポートしていないブラウザーでMathML shimとして使用できます。

MathJax shimに関する唯一の懸念は、対話型にすると、MathML をサポートするブラウザーとサポートしないブラウザーでコードとの相互作用が異なることですが、それにもかかわらず、すでにバインドされている場合を除いて、私は個人的に MathML にアドバイスしますLaTeXに。

あなたの更新に基づいて、それがMathMLまたはLaTeXで表現できるかどうかはわかりません.キャンバスに描画するか、後でインタラクティブ性が必要な場合はSVGに設定するしかないのではないかと心配しています. しかし、慣れていなければ簡単なことではないことはすでにご存じだと思います。

---

Mathjax に対話機能を追加するには:

1. MathML を入力として使用する
2. HTML/CSS を出力として使用する
3. showMathMenu:falseコア MathJax 構成に追加して、MathJax コンテキスト メニューを無効にします。
4. MathML マークアップに ID を含めます (文字通り<mo id="someid">の例)
5. たとえばjQueryを使用して、MathJaxが終了した後にidにバインドします(つまり$("#someid").on("mousemove",function(){...}))

完全に機能するデモはこちらにあります。等号の上に移動して、アラートをトリガーします。