CSS - font-variant-position Property

The font-variant-position CSS property is used to control the usage of alternate, smaller glyphs that are placed or positioned as supercsript or subscript. These glyphs are positioned relative to the baseline of the font.

Possible Values

  • normal: Deactivates usage of alternate superscript and subscript glyphs.

  • sub: Activates usage of alternate subscript glyphs. If an alternate glyph is not available for any character, all the characters are rendered using synthesized glyphs.

  • super: Activates usage of alternate superscript glyphs. If an alternate glyph is not available for any character, all the characters are rendered using synthesized glyphs.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontVariantPosition = "normal | sub | super";

CSS font-variant-position - Basic Example

Here is an example:

<html>
<head>
<style>
   div {
      border: 1px solid red;
      margin: 5px;
      padding: 2px;
      width: 150px;
   }
   p{
      display: inline-block;
   }
   p.normal {
      font-variant-position: normal;
   }
   p.sub {
      font-variant-position:sub;
   }
   p.super {
      font-variant-position:super;
   }  
</style>
</head>
<body>
   <div>
      <h3>Normal: </h3>
      <p class="normal">Normal</p>
   </div>
   <div>
      <h3>Sub: </h3>
      <p class="sub">Subscript</p>
   </div>
   <div>
      <h3>Super: </h3>
      <p class="super">Superscript</p>
   </div>
</body>
</html>
Advertisements