How to write rational number in html

Question

Can any one tell me how to write this type of rational numbers in html browser? I tried so many ways but it doesn't works.

Answer 1

Here you go:

s<sup>2</sup>&frasl;<sub>7</sub> &times; <sup>4</sup>&frasl;<sub>3</sub>?

If you prefer having a straight line instead of /, use this:

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle; 
    letter-spacing: 0.001em;
    text-align: center;
    
    }
.frac > span { 
    display: block; 
    padding: 0.1em; 
    }
.frac span.bottom {border-top: thin solid black;}
.frac span.symbol {display: none;}

s

    <div class="frac">
        <span>2</span>
        <span class="symbol">/</span>
        <span class="bottom">7</span>
        
    </div>
    &times;
    <div class="frac">
        <span>4</span>
        <span class="symbol">/</span>
        <span class="bottom">3</span>
        
    </div>

?

You can also achieve this with a little bit of pure JavaScript like:

var elem = document.getElementById("fractions");

/**Fraction one*/
elem.innerHTML = frac(2, 7);
elem.innerHTML = elem.innerHTML + ' × ';
elem.innerHTML = elem.innerHTML + frac(4, 3);


/**Fraction two*/

elem.innerHTML = elem.innerHTML + "<BR /><BR />" + frac(10, 6);
elem.innerHTML = elem.innerHTML + ' &times; ';
elem.innerHTML = elem.innerHTML + frac(9, 5);

function frac(num1, num2)
{ 
  return '<div class="frac"><span>'+num1+'</span><span class="bottom">'+num2+'</span></div>';
}

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle; 
    letter-spacing: 0.001em;
    text-align: center;
    
    }
.frac > span { 
    display: block; 
    padding: 0.1em; 
    }
.frac span.bottom {border-top: thin solid black;}
.symbol {display: none;}

<div id ="fractions"></div>

Answer 2

You can do it exactly like this using css.

<p>S <span class="frac"><sup>2</sup><span>/</span><sub>7</sub></span>.</p>


 span.frac {
      display: inline-block;
      font-size: 50%;
      text-align: center;
    }
    span.frac > sup {
      display: block;
      border-bottom: 1px solid;
      font: inherit;
    }
    span.frac > span {
      display: none;
    }
    span.frac > sub {
      display: block;
      font: inherit;
    }

Here is a fiddle.