[英]How can I write a complex fraction using HTML/CSS/jQuery?
I'd like to be able to write a fraction using HTML/CSS/jQuery (rather than using a TeX renderer or even MathML). 我希望能够使用HTML / CSS / jQuery编写一个分数(而不是使用TeX渲染器甚至是MathML)。 At the moment there's a great workaround for writing simple fractions that works if you just have one term for both the numerator and the denominator, but once you start using more than one term it looks rather horrible.
目前有一个很好的解决方法来编写简单的分数,如果你只有一个分子和分母的术语 ,但是一旦你开始使用多个术语,它看起来相当可怕。 As an example, using:
例如,使用:
<sup><font size=-2>x<sup>2</sup> + 3x + 5</font></sup>/<sub><font size=-2>2x</font></sub>
produces... 生产...
x 2 + 3x + 5 / 2x x 2 + 3x + 5 / 2x
What I'd like is a beautiful horizontal line to define the fraction rather than a backslash. 我想要的是一个漂亮的水平线来定义分数而不是反斜杠。 I've tried using
div
tags with border-bottom
as such, but the output is still quite awful: 我已经尝试过使用带有
border-bottom
div
标签,但输出仍然非常糟糕:
<div style="float:left;">Substitute 4 for 'x' in the equation: </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>
produces... 生产...
What I'm looking for is a HTML/CSS/jQuery fraction that... 我正在寻找的是HTML / CSS / jQuery分数......
Can this be done? 可以这样做吗? How?
怎么样? Thanks!
谢谢!
Try this: http://www.mathjax.org/ 试试这个: http : //www.mathjax.org/
It's used over at https://mathoverflow.net/ 它在https://mathoverflow.net/上使用
This is what LaTeX is for. 这就是LaTeX的用途。 Here's a jQuery plugin which seems to have a nice implementation: http://blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html
这是一个jQuery插件,似乎有一个很好的实现: http : //blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html
Alright, I found a better way to do what you were doing. 好吧,我找到了一个更好的方法去做你正在做的事情。 No extra CSS, just some tabular magic.
没有额外的CSS,只是一些表格魔术。
<table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: </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>
Tables auto-center-align :D 表自动居中对齐:D
For more text, add more <td>
s. 有关更多文字,请添加更多
<td>
。 Keep text- <td>
s and math- <td>
s separate. 保持text-
<td>
和math- <td>
分开。 Add another <tr>
for a new line. 为新行添加另一个
<tr>
。
<table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: </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: </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>
I would personally suggest MathJax . 我个人建议使用MathJax 。 (it uses HTmL/CSS)
(它使用HTmL / CSS)
But, if you do not want to resort to a TeX renderer, then you may want to investigate the CSS behind a MathJax fraction with Chrome Inspector. 但是,如果您不想使用TeX渲染器,那么您可能需要使用Chrome Inspector调查MathJax分数背后的CSS。
Go to this answer of mine , Ctrl - Shift - I (in Chrome), use the inspector magnifying glass on the fraction. 转到我的这个答案 , Ctrl - Shift - I (在Chrome中),在分数上使用检查器放大镜。 Then check out the CSS in the sidepane.
然后查看侧窗内的CSS。
I've made a quick jsfiddle 我做了一个快速的小提琴
I'm not sure quite what you mean when you said that div
s and border
s made it look awful, becuase my solution is quite similar. 当你说
div
和border
使它看起来很糟糕时,我不太清楚你的意思,因为我的解决方案非常相似。
It just uses span
s and border
s. 它只使用
span
s和border
s。
It's not perfect: the text does not get aligned to the center, but it's a nice quick alternative to a TeX renderer. 它并不完美:文本没有与中心对齐,但它是TeX渲染器的一个很好的快速替代品。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.