如何使用HTML / CSS / jQuery编写复杂的分数？

Question

我希望能够使用HTML / CSS / jQuery编写分数（而不是使用TeX渲染器甚至是MathML）。目前有一个很好的解决方法来编写简单的分数，如果你只有分子和分母的一个术语，但是一旦你开始使用多个术语，它看起来相当可怕。例如，使用：

  

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

产生......

^{x 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>

...产生

我正在寻找的是HTML / CSS / jQuery分数......

• 有一条易于辨别的水平线，横跨最长分子或分母的宽度;
• 与当前文本一致显示（它可能略微超过文本的行高，但我不希望它突破它的接缝）;和
• （不是真的有必要，但顶部有一个漂亮的樱桃）斜体字母（不是数字或括号）。

可以这样做吗？怎么样？谢谢！

Answer 1

试试这个：http://www.mathjax.org/

它在https://mathoverflow.net/

处使用

Answer 2

这是LaTeX的用途。这是一个jQuery插件，似乎有一个很好的实现：http://blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html

Answer 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>

表格auto-center-align：D

要获取更多文字，请添加更多<td> s。保持文字 - <td>和数学 - <td>分开。为新行添加另一个<tr>。

<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>

Answer 4

我个人建议MathJax。 （它使用HTmL / CSS）

但是，如果您不想使用TeX渲染器，那么您可能需要使用Chrome Inspector调查MathJax分数背后的CSS。

转到this answer of mine， Ctrl - Shift - I （在Chrome中），在分数上使用检查器放大镜。然后查看侧窗内的CSS。

Answer 5

I've made a quick jsfiddle

当你说div和border使它看起来很糟糕时，我不确定你的意思，因为我的解决方案非常相似。

它只使用span和border s。

它并不完美：文字没有与中心对齐，但它是TeX渲染器的一个很好的快速替代品。