3

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. enter image description here

lokesh
  • 690
  • 5
  • 13
  • Possible duplicate of [How to write fraction value using html?](http://stackoverflow.com/questions/7525977/how-to-write-fraction-value-using-html) – Steve Hartley Feb 10 '16 at 05:35
  • i mean i don't want "/" i want this "--" between numerator and denominator – lokesh Feb 10 '16 at 05:53
  • Sorry the link was quite hard to follow. Here is a fiddle from the duplicate question http://jsfiddle.net/0L01p4m4/ – Steve Hartley Feb 10 '16 at 05:55

4 Answers4

4

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 + ' &times; ';
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>
Luthando Ntsekwa
  • 4,192
  • 6
  • 23
  • 52
  • i already used this same code but i want as it is (How i show in image, i mean i don't want "/" i want this "--" between numerator and denominator) – lokesh Feb 10 '16 at 05:41
  • Great it works. But @Luthando Loot every time using this long code is difficult to me while prepare the solution.Is there any another way to solve this problem? – lokesh Feb 10 '16 at 09:36
  • i'm using simple web html page how can i implement this code in my page? – lokesh Feb 10 '16 at 10:28
  • 1
    @lokesh wrap the javascript code with a script tag ``, and then wrap the css with a style tag `` – Luthando Ntsekwa Feb 10 '16 at 10:35
1

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.

Charlie
  • 22,886
  • 11
  • 59
  • 90
0

You can use some java script libraries like :

Emad Armoun
  • 1,625
  • 2
  • 19
  • 32
0

For maximal compatibility, consider the following snippet in HTML 4.01 (without CSS, JavaScript, or any other modern gimmicks):

<table rules="rows">
  <tbody>
    <tr>
      <td rowspan="2">s&nbsp;</td>
      <td>2</td>
      <td rowspan="2">
        &times;
      </td>
      <td>4</td>
    </tr>
    <tr>            
      <td>7</td>
      <td>3</td>  
    </tr>
  </tbody>
</table>

output in Firefox

AlMa0
  • 101
  • 1