Как написать сложную дробь с помощью HTML/CSS/jQuery?

Я хотел бы иметь возможность писать дробь, используя HTML/CSS/jQuery (вместо использования средства визуализации TeX или даже MathML). На данный момент существует отличный обходной путь для написания простых дробей, который работает, если у вас есть только один член как для числителя, так и для знаменателя, но как только вы начинаете использовать более одного члена, это выглядит довольно ужасно. Например, используя:

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

производит...

x2 + 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, которая...

  • имеет легко различимую горизонтальную линию, охватывающую ширину самого длинного числителя или знаменателя;
  • появляется встроенным в текущий текст (он может немного превышать высоту строки текста, но я не хочу, чтобы он вырывался из швов); а также
  • (не обязательно, но приятная вишенка) выделенные курсивом буквы (не цифры и не скобки).

Можно ли это сделать? Как? Спасибо!


html jquery css fractions
person rs77    schedule 22.04.2012    source источник
comment
<font> теги? Серьезно?!   -  person ThiefMaster    schedule 22.04.2012

Ответы (5)


arrow_upward
3
arrow_downward

Хорошо, я нашел лучший способ сделать то, что вы делали. Никакого дополнительного 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>. Держите text-<td>s и math-<td>s отдельно. Добавьте еще <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>
person Manishearth    schedule 22.04.2012
comment
Спасибо, Манишерт!! Поскольку ваш ответ использует меньше HTML и CSS, чем мой, я м собираюсь наградить вас ответ. Большое спасибо за вашу помощь! - person rs77; 23.04.2012

arrow_upward
4
arrow_downward

Попробуйте это: http://www.mathjax.org/

Он используется на https://mathoverflow.net/.

person ilivewithian    schedule 22.04.2012
comment
Спасибо @ilivewithian - хотя мне не нужен рендерер TeX. - person rs77; 22.04.2012

arrow_upward
3
arrow_downward

Для этого и нужен LaTeX. Вот плагин jQuery, который, кажется, имеет хорошую реализацию: http://blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html

person Josh Davenport    schedule 22.04.2012
comment
Спасибо, Джош. Я стараюсь отойти от всего, что требует внешнего рендеринга дроби. - person rs77; 22.04.2012

arrow_upward
2
arrow_downward

Я бы лично предложил MathJax. (он использует HTML/CSS)

Но если вы не хотите прибегать к средству визуализации TeX, вы можете исследовать CSS за фракцией MathJax с помощью Chrome Inspector.

Перейдите к этому моему ответу, Ctrl-Shift -I (в Chrome), используйте увеличительное стекло инспектора на фракции. Затем проверьте CSS на боковой панели.

person Manishearth    schedule 22.04.2012
comment
Спасибо, Manishearth, я не могу поверить, что добавлено дополнительное количество HTML и CSS! Как отмечалось выше, я бы предпочел не использовать MathJax. - person rs77; 22.04.2012
comment
@ rs77 Я знаю, что вы не хотите его использовать, я подумал, что вы можете проверить CSS, удалить лишнее и использовать аналогичный CSS для fracs. - person Manishearth; 22.04.2012
comment
@rs77: я опубликовал еще один ответ, который очень просто основан на вашем примере. Я разместил его отдельно, так как он принципиально отличается от этого ответа. - person Manishearth; 22.04.2012

arrow_upward
1
arrow_downward

Я быстро сделал jsfiddle

Я не совсем понимаю, что вы имеете в виду, когда говорите, что div и border выглядят ужасно, потому что мое решение очень похоже.

Он просто использует spans и borders.

Это не идеально: текст не выравнивается по центру, но это хорошая быстрая альтернатива средству визуализации TeX.

person ACarter    schedule 22.04.2012
comment
Спасибо АКартер. Я никогда не думал использовать span, но становится трудно центрировать вопрос относительно горизонтальной дробной линии, когда есть <br/>. Я думаю, что нашел решение, за исключением вишенки! - person rs77; 22.04.2012