<sub> and <sup> tags can be treated as variants

This html code

<p>NO₂ Aₙ Mᵐᵉ Bib&#xf70d;&#xa7f3;ᵘᵉ Nᵃˡᵉ 1ᵉʳ 2&#xf70d;ᵐᵉ 1ˢᵗ 2ⁿᵈ 3ʳᵈ</p>

gives this result

NO₂ Aₙ Mᵐᵉ Bibꟳᵘᵉ Nᵃˡᵉ 1ᵉʳ 2ᵐᵉ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ

Using the font-feature-settings CSS property as follows:

sub {
display: inline;
vertical-align: baseline;
font-size: 100%;
line-height: 100%;
font-feature-settings: "subs" on;
-ms-font-feature-settings: "subs" on;
-moz-font-feature-settings: "subs" on;
-o-font-feature-settings: "subs" on;
-webkit-font-feature-settings: "subs" on;
}
sup {
display: inline;
vertical-align: baseline;
font-size: 100%;
line-height: 100%;
font-feature-settings: "sups" on;
-moz-font-feature-settings: "sups" on;
-ms-font-feature-settings: "sups" on;
-o-font-feature-settings: "sups" on;
-webkit-font-feature-settings: "sups" on;
}

this html code

<p>NO₂ A_n M^me Bib^èque N^ale 1^er 2^ème 1^st 2^nd 3^rd 4^th</p>

should give the same result

NO₂ A_n M^me Bib^èque N^ale 1^er 2^ème 1^st 2^nd 3^rd 4^th