Wariant pozycji czcionki {font-variant-position}

CSS 3

selektor { font-variant-position: wariant }

W języku HTML istnieją znaczniki <sub>...</sub> i <sup>...</sup> służące do tworzenia indeksów dolnych  i górnych w tekście. Co więcej w języku CSS mamy dodatkowo możliwość ustalania pozycji tekstu w pionie formatując nawet zwykły tekst w taki sposób, aby wyglądał jak indeks dolny lub górny: "vertical-align: sub" i "vertical-align: super". Jest jednak pewna wada obu tych metod. Aby indeks dolny czy górny zmieścił się w tekście i nie zachodził na sąsiadujące wiersze, wysokość linii musi zostać nieco powiększona. Powoduje to nieestetyczny efekt, kiedy sąsiednie linijki tekstu są od siebie bardziej odsunięte, ponieważ w jednej z nich pojawił się nawet tylko jeden indeks dolny lub górny.

Wadę tę eliminuje użycie właściwości font-variant-position, dzięki której mimo wprowadzenia indeksu w tekście, wysokość linii się nie zmienia. W większości przypadków zaleca się jednak stosowanie tej właściwości tylko do znaczników <sub>...</sub> i <sup>...</sup>, ponieważ niosą one ze sobą dodatkowe znaczenie semantyczne.

Mimo iż zgodnie ze specyfikacją CSS przeglądarki powinny zasymulować wygląd indeksu w tekście, nawet jeśli użyta czcionka nie udostępnia takiego wariantu, niestety nie jest to normą. Z tego powodu zaleca się stosować zapytania właściwości.

Dzięki użyciu zapytań właściwości poniższy arkusz stylów zostanie zastosowany tylko w przeglądarkach obsługujących wariant pozycji czcionki. W pozostałych przypadkach po wstawieniu w tekście indeksu dolnego lub górnego wysokość linii co prawda się powiększy, ale przynajmniej wygląd indeksów nie będzie popsuty:

@supports (font-variant-position: sub) {
	sub {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
		font-variant-position: sub;
	}
}
@supports (font-variant-position: super) {
	sup {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
		font-variant-position: super;
	}
}

Przykład {font-variant-position}

Dzięki zastosowaniu font-variant-position wysokość linii się nie zmienia - zobacz ramkę wokół poniższego tekstu (jeśli nie widzisz indeksu dolnego i górnego przy cyfrach 2, znaczy to, że Twoja przeglądarka nie obsługuje wariantu pozycji czcionki):

H2O mc2

Dla porównania tak wygląda tekst po użyciu standardowych znaczników <sub>...</sub> i <sup>...</sup> - zwróć uwagę, że tym razem wysokość linii jest większa:

H₂O mc²

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
font-variant-position: wartość	❌	34 2014-12-01	❌	❌	9.1 2016-03-21
font-variant-position: normal	❌	≤72 2020-01-07	❌	❌	≤13.1 2020-03-24
font-variant-position: sub	❌	≤72 2020-01-07	❌	❌	≤13.1 2020-03-24
font-variant-position: super	❌	≤72 2020-01-07	❌	❌	≤13.1 2020-03-24