Przejdź do treści

CSS / Czcionki

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 - interpretuje Firefox 34)

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 <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:

H2O mc2

Komentarze

Zobacz więcej komentarzy

Facebook