3

我希望能够使用 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>

产生...

分数的 div 标签

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

  • 有一条横跨最长分子或分母宽度的易于辨别的水平线；
  • 与当前文本内联显示（它可能会稍微超过文本的行高，但我不希望它从接缝处爆裂）；和
  • （不是真的必要，但上面有一个漂亮的樱桃）斜体字母（不是数字或括号）。

这可以做到吗？如何？谢谢！

4

5 回答 5

4

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

它在https://mathoverflow.net/上使用过

于 2012-04-22T10:46:48.020 回答
3

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

于 2012-04-22T10:47:15.157 回答
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>为新行添加另一个。

<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 回答
2

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

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

转到我的这个答案，Ctrl- Shift- I（在 Chrome 中），在分数上使用检查器放大镜。然后查看侧窗格中的 CSS。

于 2012-04-22T10:55:36.933 回答
1

我做了一个快速的jsfiddle

当您说divs 和borders 让它看起来很糟糕时，我不太确定您的意思，因为我的解决方案非常相似。

它只使用spans 和borders。

它并不完美：文本没有与中心对齐，但它是 TeX 渲染器的一个不错的快速替代方案。

于 2012-04-22T11:22:12.397 回答