Search code examples
htmlcssfractions

Best way to create an element resembling a fraction?

I have tried many ways, including the following:

<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
  <tbody>
    <tr><td style="text-align: center;padding: 5px; border-bottom: 1px solid black;">3</td></tr>
    <tr><td style="text-align: center; padding: 5px;">5</td></tr>
  </tbody>
</table>

and

<span class="fraction">
    <span>5</span>
    <span>3</span>
</span>
<style type="text/css">
.fraction{
    display:inline-block;
    vertical-align:middle;
}
.fraction>span{
    display:block;
}
.fraction>span:first-child{
    border-bottom:1px solid black;
}
</style>

So I was wondering, is there a better way using less elements? (For example, the first one used table, tbody, 2 trs & 2 tds)

Solution

  • If the layout doesn't have to be perfectly vertical :

    <sup>1</sup>&frasl;<sub>10</sub>

    which would produce : 1⁄10

    If it has to be vertical :

    your solution is one of the best I think.

    If you want to have an easy way to write fractions :

    You could use a Javascript library http://www.mathjax.org/ or http://mathscribe.com/author/jqmath.html for instance.

    If you want to look like Wikipedia :

    use images generated by a TeX distribution :)