CSS font-variant-position property
The font-variant-position property in CSS is identified for controlling the usage of alternate and smaller glyphs which are positioned as subscript or superscript. These glyphs are positioned related to the baseline of the font, which does not change. They are typically used in <sup> and <sub> elements. When the use of these glyphs gets activated, the whole set of characters of the run gets rendered using a fallback method that synthesizes the glyphs.
Syntax for font-variant-position property:
Following is the syntax for the font-variant-position property.
font-variant-position: normal | sub | super
Example: CSS font-variant-position property
Here in the example below, we are using the font-variant-position property with different border styles, colors, and their different values. In this case, we have given the font-variant-position property using all the values of this property- normal, super, and sub. Thus, the text gets aligned accordingly as normal in the normal usual way and the other text gets aligned in the row, which is a bit superior to the normal one and the subtext gets aligned to the row a bit lower than the normal one.
<!DOCTYPE html>
<html>
<head>
<title>The font-variant-position property in CSS</title>
<style type="text/css">
p {
display: inline;
}
.normal {
font-variant-position: normal;
}
.super {
font-variant-position: super;
}
.sub {
font-variant-position: sub;
}
</style>
</head>
<body>
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
</body>
</html>
Output:
Example 2: CSS font-variant-position property
Here in the example below, we are using the font-variant-position property with different border styles, colors and their different values. In this case, we have given the font-variant-position property values as super ans sub. Hence, the super text gets aligned in the row, which is a bit superior than the normal one and the sub text gets aligned to the row a bit lower than the normal one. So the paragraph breaks down into several parts according to the values specified by us.
<!DOCTYPE html>
<html>
<head>
<title>The font-variant-position property in CSS</title>
<style type="text/css">
p {
color: deeppink;
display: inline;
}
.super {
font-variant-position: super;
}
.sub {
font-variant-position: sub;
}
</style>
</head>
<body>
<p class="super">Study Tonight is the best place</p>
<p class="sub">to learn digital in a simplified way</p>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
no |
no |
| Edge |
no |
no |
| Firefox |
34 |
34 |
| Internet Explorer |
no |
no |
| Opera |
no |
no |
| Safari |
no |
no |
| Webview Android |
no |
no |
| Chrome Android |
no |
no |
| Firefox Android |
34 |
34 |
| Opera Android |
no |
no |
| IOS Safari |
no |
no |
| Samsung Internet |
no |
no |
Conclusion
The initial value for the font-variant-position property in CSS is normal. This property is applicable to all elements and also to the ::first-letter and ::first-line. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
