Formatting Fractions and Square Roots

This CSS reference page displays example code that shows how to style tags to create fractions and square roots for displaying mathematics.

FractionsAndSqrts.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's CSS</title>
    <style>
span.cFrac {
  display: inline-block;
  font-size: 50%;
  text-align: center;
  vertical-align: sub;
}
span.cFrac > sup {
  display: block;
  border-bottom: 1px solid;
  font: inherit;
}
span.cFrac > sub {
  display: block;
  font: inherit;
}
span.cSqrt {
  border-top: 1px solid;
}
    </style>
  </head>
  <body>
    <h1 style="font-weight: normal;"><i>y</i> = <span class="cFrac"><sup>1</sup><sub><i>x</i></sub></span></h3>
    <h1 style="font-weight: normal;"><i>z</i> = <span class="cFrac"><sup>1</sup><sub><i>x</i> + <i>y</i></sub></span></h3>
    <h1 style="font-weight: normal;"><i>x</i> =
      <span class="cFrac"><sup>-<i>b</i> &pm; &#x221A;<span class="cSqrt"><i>b</i>&sup2; - 4<i>ac</i></span>
      </sup><sub>2<i>a</i></sub></span></h1>
    <h1 style="font-weight: normal;"><i>y</i> = &#x221A;<span class="cSqrt"> <i>x</i>&sup3; + 1</span></h3>
  </body>
</html>

Core CSS

Formatting Fractions and Square Roots

FractionsAndSqrts.html

Output