How To Represent Fractions In Html

I want to represent fractions in html and the code I am using now is this: ³⁄₈ And it looks like this: But I want to repre

Solution 1:

It is not possible through pure HTML. But you can create that type of fraction using a bit of CSS.

.fraction {
  position: relative;
  width: 1em;
  font-size: 2em;
}
.numerator {
  border-bottom: 2px solid black;
  text-align: center;
}
.denominator {
  border-right: 2px solid black;
  width: 0.75em;
  text-align: center;
}

<div class="fraction">
  <div class="numerator">3</div>
  <div class="denominator">8</div>
</div>

Solution 2:

You can use mathjax. It's the defacto library for math rendering. However, it is not lightweight. Note that google chose not to support mathml

Alternately, use html/css. A fraction is just two divs stacked on top of each other with a border in the middle.