Przejdź do treści

Wariant liczb czcionki {font-variant-numeric}

Co zrobić, aby liczby w kolumnach tabeli z danymi były ułożone równo pod sobą? W jaki sposób wyświetlić licznik i mianownik rozdzielone kreską ułamkową?

CSS 3

selektor { font-variant-numeric: warianty }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "warianty" należy podać konkretne ustawienia formatowania liczb w tekście. Możliwe są tutaj dwa sposoby:
  1. normal - domyślne ustawienia
  2. Dowolna liczba poniższych wartości rozdzielonych spacjami:
    • ordinal - liczba porządkowa, np. w języku angielskim wyraz first (co oznacza: pierwszy) możemy zapisać skrótowo jako: 1st
    • slashed-zero - cyfra zero może zostać przekreślona ukośną kreską, aby nie pomylić jej z wielką literą "O"
    • lining-nums albo oldstyle-nums - cyfry leżące na jednej linii albo nieco poprzesuwane w górę i w dół (przypominające ręcznie wypełniane zestawienia np. w starych księgach przychodów i rozchodów)
    • proportional-nums albo tabular-nums - każda cyfra może mieć różną szerokość albo wszystkie cyfry będą tej samej szerokości (dzięki czemu jeśli umieścimy je np. w tabeli z jakimiś danymi, liczby w tej samej kolumnie będą ze sobą wyrównane)
    • diagonal-fractions albo stacked-fractions - ułamki z ukośną albo poziomą kreską ułamkową

    Możliwe jest łączenie powyższych wariantów - np.: "font-variant-numeric: slashed-zero tabular-nums diagonal-fractions".

W tekście oprócz wyrazów składających się z liter często występują również dane liczbowe. Przyjęło się wyświetlać takie dane w określonym formacie.

Na przykład proste ułamki zwykłe występujące w tekście często zapisujemy z ukośną kreską ułamkową oraz nieco pomniejszonym licznikiem i mianownikiem: ½. Taki znak jednak nie występuje na klawiaturze, dlatego łatwiej jest wpisać po prostu: 1/2, a następnie przekształcić tekst w taki sposób, aby wyglądał jak ułamek. Pozwala na to wariant czcionki: diagonal-fractions.

Innym typowym zastosowaniem liczb w tekście są różnorodne zestawienia tabelaryczne. W celach estetycznych, ale również dla wygody czytania zwykle zależy nam, aby liczby występujące w tej samej kolumnie tabeli były ze sobą wyrównane. Można to uzyskać za pomocą czcionki monotypicznej, ale jej wygląd nie zawsze musi pasować do reszty tekstu. Dlatego czasami lepsze efekty daje przekształcenie znaków cyfr w bieżącej czcionce w taki sposób, aby wszystkie zajmowały taką samą szerokość. Pozwala na to wariant czcionki: tabular-nums.

Niestety nie każda czcionka udostępnia wszystkie warianty formatowania liczb. Niedostępne mogą być zwłaszcza warianty: ordinal, slashed-zero i stacked-fractions. Ponadto jeżeli czcionka nie będzie zawierać wariantu tabular-nums, przeglądarka może zasymulować podobny efekt dopasowując odstępy między sąsiednimi liczbami. W niektórych przypadkach wymaga to jednak aby były one rozdzielone fizycznym znakiem spacji.

Przykład {font-variant-numeric}

1 2/3 456790 (font-variant-numeric: normal)
1 2 3 4 (font-variant-numeric: ordinal)
1 2/3 456790 (font-variant-numeric: slashed-zero)
1 2/3 456790 (font-variant-numeric: lining-nums)
1 2/3 456790 (font-variant-numeric: oldstyle-nums)
1 2/3 456790 (font-variant-numeric: diagonal-fractions)
1 2/3 456790 (font-variant-numeric: stacked-fractions)

Poniżej widać efekt uzyskany przy użyciu "font-variant-numeric: proportional-nums":

1 1 1 1 1 11111
9 9 9 9 9 99999

A tak wygląda ten sam tekst przy użyciu "font-variant-numeric: tabular-nums":

1 1 1 1 1 11111
9 9 9 9 9 99999

Zwróć uwagę, że o ile dla wariantu tabular-nums w pięciu pierwszych kolumnach prawdopodobnie zobaczysz wyrównane ze sobą cyfry 1 i 9, to dla kolejnych liczb może już tak nie być. Dzieje się tak, ponieważ pomiędzy cyframi w liczbach 11111 i 99999 nie umieszczono znaków spacji, więc przeglądarka nie może odpowiednio dopasować przerw między nimi. Jeżeli widzisz cyfry wyrównane we wszystkich kolumnach, znaczy to, że Twoja przeglądarka radzi sobie z tym lepiej.

I na koniec dla porównania ten sam tekst, ale w ogóle bez użycia font-variant-numeric:

1 1 1 1 1 11111
9 9 9 9 9 99999

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
font-variant-numeric: wartość52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
font-variant-numeric: diagonal-fractions52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
font-variant-numeric: lining-nums52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
font-variant-numeric: normal52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
font-variant-numeric: oldstyle-nums52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
font-variant-numeric: ordinal52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
font-variant-numeric: proportional-nums52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
font-variant-numeric: slashed-zero52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
font-variant-numeric: stacked-fractions52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
font-variant-numeric: tabular-nums52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21

Komentarze

Zobacz więcej komentarzy

Facebook