如何使用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 + 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

好吧，我找到了一個更好的方式來做你正在做的事情。沒有額外的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>秒。保留文字 - <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 2

試試這個：http://www.mathjax.org/

它使用了在https://mathoverflow.net/

Answer 3

這是LaTeX是。這裏有一個jQuery插件，它似乎有一個很好的實現：http://blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html

Answer 4

我個人建議MathJax。 （它使用HTmL/CSS）

但是，如果您不想求助於TeX渲染器，那麼您可能需要使用Chrome Inspector調查MathJax分數後面的CSS。

轉到this answer of mine，按Ctrl - 移 - （在Chrome）i，使用的檢查放大鏡上的分數。然後檢查側面欄中的CSS。

Answer 5

I've made a quick jsfiddle

我不知道你相當的意思是，當你說div S和border已經指出來看看可怕，監守我的解決方案是非常相似的。

它只是使用span s和border s。

這並不完美：文本沒有與中心對齊，但它是TeX渲染器的快速替代方案。