Wariant pozycji czcionki {font-variant-position}

W jaki sposób dodać indeks dolny lub górny tak, aby sąsiednie linijki tekstu nie były między sobą nieestetycznie rozsunięte?

CSS 3

selektor { font-variant-position: wariant }

Selektorem może być dowolny znacznik, w którym można wpisywać tekst, ale zaleca się stosować tutaj sub - indeks dolny albo sup - indeks górny [zobacz: Wstawianie stylów].

Natomiast jako "wariant" należy wpisać:

normal - czcionka normalna (podstawowa)
sub - indeks dolny
super - indeks górny

W języku HTML istnieją znaczniki ... i ... 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 ... i ..., 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:

📋 Zaznacz kod ▶ Edytuj na żywo

@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 ... i ... - zwróć uwagę, że tym razem wysokość linii jest większa:

H₂O mc²

Przeglądarki

❌ Nie działa
	Chrome	Firefox	Edge	Opera	Safari	Poziom wsparcia min. 2,5 roku
`font-variant-position: wartość`	❌	34 2014-12-01	❌	❌	9.1 2016-03-21	40%
`font-variant-position: normal`	❌	≤72 2020-01-07	❌	❌	≤13.1 2020-03-24	40%
`font-variant-position: sub`	❌	≤72 2020-01-07	❌	❌	≤13.1 2020-03-24	40%
`font-variant-position: super`	❌	≤72 2020-01-07	❌	❌	≤13.1 2020-03-24	40%

Komentarze #

Bianca_2011
15.09.2021 18:39
super! :P
Fajnie to działa :lol:
Zobacz więcej
Błąd
01.07.2016 22:37
Znalazłem błąd:
„Natomiast w trybie zgodności ze standardami: xx-small = 10px, x-small = 10px, small = 12px, medium = 16px, large = 18px, x-large = 24px, xx-large = 32px (w tym przypadku wszystkie wartości są o jeden rozmiar mniejsze niż w trybie Quirks).”
Sprawdziłem rozmiary i w...
Zobacz więcej
Comandeer
01.02.2015 23:12
Nie bardzo rozumiem w czym problem… 2 czcionki to po prostu 2 polecenia @font-face
Zobacz więcej
niewazne
01.02.2015 23:00
jak zwykle "wszystko inne pomiędzy tematem" to takie moje wrażenie...autor napisał ad. osadzenia czcionki w css @font-face... a 2 czcionki osadzić to już nie wiadomo?
Zobacz więcej
Luke
22.07.2014 08:13
Comandeer: "w sumie dziwię się, że taką opcję dano devom…".
Oczywiście też mnie to denerwuje, jednak są aspekty, w których taka blokada ma zastosowanie - np. gry przeglądarkowe - i niestety nic poza tym mi nie przychodzi do głowy. :P
Zobacz więcej
Comandeer
21.07.2014 20:54
kurshtml: "Na marginesie: apeluję, nie blokujcie skalowania strony na przeglądarkach mobilnych tylko dlatego, że wydaje się, że skoro zrobiliście specjalną wersję RWD, to użytkownik nie będzie potrzebował używać funkcji skalowania.".
osobiście bojkotuję takie strony. to chyba najbardziej...
Zobacz więcej
Sławomir Kokłowski
21.07.2014 20:50
Sęk w tym, że prawie żaden użytkownik nie wie, gdzie przestawić domyślny rozmiar tekstu, jeśli ten, który określiła za niego przeglądarka, nie jest dla niego wygodny. W takim przypadku po prostu używa wbudowanego w przeglądarkę mechanizmu skalowania strony, a nie szuka opcji po ustawieniach.
Na...
Zobacz więcej
Comandeer
21.07.2014 20:46
kurshtml: "No właśnie nie wiem, co to szkodzi, żeby chociaż dla body ustawić "font-size: 16px"?".
nic nie szkodzi - wyszedłem z błędnego założenia, że taka faktycznie jest bazowa wielkość. mea culpa ;) ALE :D zgodnie ze specyfikacją CSS 2.1
http://www.w3.org/TR/CSS21/fonts.html#font...
Zobacz więcej
Sławomir Kokłowski
21.07.2014 20:37
No właśnie nie wiem, co to szkodzi, żeby chociaż dla body ustawić "font-size: 16px"? Argument, że lepiej zostawić przeglądarce możliwość określenia najlepszego rozmiaru bazowego fontu, jest nietrafiony - co opisałem. Poza tym skalowanie strony przeglądarki rozwiązały w inny sposób...
Zobacz więcej
Comandeer
21.07.2014 20:27
kurshtml: "To konkretny przykład którejś z wersji przeglądarki Opera pod Linuksa".
to raczej wyjątek. chociaż faktycznie, nie jestem w stanie znaleźć w specyfikacji odpowiedniego określenia. niemniej praktycznie wszystkie ustawiają to domyślnie na 16px. w ostateczności byłoby to jedyne px...
Zobacz więcej

Zobacz więcej komentarzy