3

(TeX レンダラーや MathML を使用するのではなく) HTML/CSS/jQuery を使用して分数を記述できるようにしたいと考えています。現時点では、分子と分母の両方に1 つの項がある場合に機能する単純な分数を作成するための優れた回避策がありますが、複数の項を使用し始めると、かなりひどいものに見えます。例として、以下を使用します。

<sup><font size=-2>x<sup>2</sup> + 3x + 5</font></sup>/<sub><font size=-2>2x</font></sub>

生産...

× 2 + 3x + 5 / 2x

私が望むのは、バックスラッシュではなく、分数を定義する美しい水平線です。divタグをそのまま使用してみましborder-bottomたが、出力はまだかなりひどいです:

  <div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div>
  <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div>

生産...

分数の div タグ

私が探しているのは、HTML/CSS/jQuery の一部です...

  • 最も長い分子または分母の幅にまたがる、容易に識別できる水平線があります。
  • 現在のテキストとインラインで表示されます（テキストの行の高さをわずかに超えることはできますが、継ぎ目からはみ出したくありません）。と
  • （必ずしも必要ではありませんが、上に素敵なチェリーがあります）イタリック体の文字（数字や括弧ではありません）。

これはできますか？どのように？ありがとう！

4

5 に答える 5

4

これを試してください: http://www.mathjax.org/

https://mathoverflow.net/で使用されています

于 2012-04-22T10:46:48.020 に答える
3

わかりました。あなたがしていたことを行うためのより良い方法を見つけました。追加の CSS はなく、表形式のマジックだけです。

<table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div></td>
</tr>
</table>

テーブルの自動中央揃え:D

テキストを追加するには、さらに<td>s を追加します。テキスト<td>と数学<td>は分けてください。<tr>新しい行にもう 1 つ追加します。

<table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div></td>
<td>. If you feel bored, solve this as well:</td>
<td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">y<sup>2</sup> + 3x+5y<sup>5</sup> + 5</div>
    <div style="font-size:small;text-align:center;">1000</div>
  </div></td>
</tr>
<tr>
<td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div></td>
<td>. If you feel bored, solve this as well:</td>
<td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">y<sup>2</sup> + 3x+5y<sup>5</sup> + 5</div>
    <div style="font-size:small;text-align:center;">1000</div>
  </div></td>
</tr>
</table>
于 2012-04-22T14:38:46.783 に答える
3

これがLaTeXの目的です。これは、実装が優れていると思われるjQueryプラグインです：http://blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html

于 2012-04-22T10:47:15.157 に答える
2

個人的にはMathJaxをお勧めします。(HTmL/CSSを使用)

ただし、TeX レンダラーに頼りたくない場合は、Chrome インスペクターを使用して MathJax 部分の背後にある CSS を調査することをお勧めします。

私のこの回答に移動しますCtrl-- Shift（IChromeで）、分数にインスペクターの虫眼鏡を使用します。次に、サイドペインで CSS を確認します。

于 2012-04-22T10:55:36.933 に答える
1

簡単なjsfiddleを作成しました

div私の解決策は非常に似ているので、 sとbordersがそれをひどく見せたとあなたが言ったとき、あなたが何を意味するのかよくわかりません。

spansとsだけを使用しborderます。

完璧ではありません。テキストが中央に揃えられませんが、TeXレンダラーに代わる優れた方法です。

于 2012-04-22T11:22:12.397 に答える