Geek asks and answers

How to write a complex part using HTML / CSS / jQuery?

I would like to write a fraction using HTML / CSS / jQuery (instead of using TeX or even MathML rendering). At the moment there is a great solution for writing simple fractions, which works if you have one term for the numerator and denominator, but as soon as you start using more than one term, it looks pretty terrible. For 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

What I need is a beautiful horizontal line to determine the fraction, not the backslash. I tried using tags divwith border-bottomas such, but the output is still pretty terrible:

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

produces ...

div tags for fraction

I am looking for an HTML / CSS / jQuery snippet that ...

  • , ;
  • ( , , );
  • ( , ) ( ).

? ? !

+3
5

, , . 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> math- <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>
+3

MathJax. ( HTmL/CSS)

TeX, CSS MathJax Chrome Inspector.

, Ctrl - Shift - I ( Chrome), . CSS .

+2

jsfiddle

I'm not sure what you mean when you said that divand bordermade it terrible, because my decision is very similar.

He simply uses spanand borders.

This is not ideal: the text is not centered, but it is a good quick alternative to rendering TeX.

+1
source

More articles:


All Articles