How to write fraction in html without converting equation in image ?

Here we are going to know How do you write a fraction in code? How do you write one and a half in HTML?, How do you make a fraction in a text box?, How do you display fractions in JavaScript? 

Related Keywords: fraction in html w3schools, how to write 1/2 in html, horizontal fraction html, how to write mixed fraction in html, 3/4 in html, 1/4 in html, how to write numerator and denominator in html, fraction entity code.

How to write fraction in html without converting equation in image ?

  Follow Us  

How do you write a fraction in code?

There are several methods to write fraction. We can use latex to write fraction. Creating image in google doc or any other app. Hosting images on other place than your own. But all these methods either uses image or URL or general fraction for example 1/2. But most people want to write a fraction like .

Steps to Write Fraction In Blogger

Now we are going to learn how to write fraction like this . I am not talking about 1/2 this type of fraction. Here is the step to write fraction like .

To write fraction using HTML code follow the following steps. To add fraction you have to go through two steps:

1. Add Custom CSS in Blogger Theme.
2. Use custom code to write fraction.

Add CSS Code For Fraction

1. Go to blogger dashboard.
2. Go to theme.
3. Click on drop down menu next to Edit Theme.
4. Select Edit HTML.
5. Find CSS format.
6. Copy the following CSS for fraction.

   .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;
   }

7. Paste it in the CSS section.
8. Save your theme.

Add Custom Code For Fraction

After completing first step that is adding CSS in your blogger theme, now you have to add this custom HTML code for fraction in every post where you want to add fraction. 

By using this code you can write any fractional equation it may be smaller and simpler one or bigger or complex one.

Step to add custom Code for fraction:

1. Go to blogger dashboard.
2. Go to post.
3. Create post.
4. Switch your post from Composed view to HTML view.
5. Copy the following code.

   1 <div class="frac">
       <span>1</span>
       <span class="symbol">/</span>
       <span class="bottom">2</span>
       
   </div>

6. Paste the code in HTML view of your post.
7. Change the numerical values as your need to get the desired fraction.
8. Note: This fraction displayed as 1/2 in composed view but it appears in original posted post for visitors.

Video Tutorial

Subscribe OnTeque