Jak konstruować „małe litery” (tzn. Cyfry tekstowe)?

Czy istnieje akceptowany sposób dostosowywania glifów czcionek w celu symulacji cyfr tekstowych ?

tło

Liczby tekstowe to „małe litery”. Zazwyczaj używasz małych liter, a także małych liter (np. W środku zdania).

Klawiatury nigdy nie były tworzone z dużymi i małymi cyframi; a Unicode nie koduje ich specjalnie, ponieważ „nie są one traktowane jako odrębne znaki od rysunków, tylko inny sposób pisania tych samych znaków”.

Co prowadzi mnie do mojego pytania; jaki jest akceptowany sposób tworzenia małych liter ze standardowych „wielkich liter” czcionki?

Wikipedia wspomina, że normalnie :

012są - xwysokość
68 mieć wznoszące się
34579 mieć zstępujących

wprowadź opis zdjęcia tutaj

Moja pierwsza próba (w Photoshopie) to:

smush 012
szturchnij 34579 w dół
zostaw 68, gdzie są:

wprowadź opis zdjęcia tutaj

Ale wygięte postacie (0, 1, 2) wyglądają wyraźnie nieprzyjemnie.

Jeśli konsorcjum Unicode zasugeruje, że „małe litery” można po prostu zbudować z „wielkich liter” - co oni zalecają?

Idealnie w HTML

Moim celem końcowym jest wyświetlanie małych liter w przeglądarce. wiem, że niektóre czcionki (np. Georgia) wyświetlają już wszystkie cyfry jako małe litery:

wprowadź opis zdjęcia tutaj

Ale nie pytam, jak przejść na korzystanie z Gruzji ; pytam, jak skonstruować figury podszewkowe z tych bez podszewki.

A ponieważ jest to do wyświetlania w Internecie, zdaję sobie sprawę, że prawdopodobnie musiałbym zastosować formatowanie według znaków:

<!doctype html">
<html>
<head>
    <style type="text/css">
        body {
            font-family: "Segoe UI", "Calibri", sans-serif;
            font-size: larger;
        }

        .xheight {
            font-size: 1.5ex;
        }

        .descender {
            position: relative;
            bottom: -0.4ex;
        }
    </style>
</head>
<body>
    <p>In the year <span class="xheight">21</span><span class="descender">5</span><span>6</span> the Romulan war...
</body>
</html>

Renderowanie jako:

wprowadź opis zdjęcia tutaj

Co znowu nie wygląda tak przyjemnie, jak powinienem.

Cześć, grosz!

wprowadź opis zdjęcia tutaj

typography text resize line-height Ian Boyd
źródło

Odpowiedzi:

Bardzo krótka odpowiedź brzmi „nie”.

Rysunki w starym stylu („małe litery”) są specjalnie rysowane w ten sposób. Starsze czcionki Postscript i TrueType w przeważającej części zawierają tylko rysunki tabelaryczne, które są liniowane lub w starym stylu, zgodnie ze sposobem zaprojektowania czcionki.

Konsorcjum Unicode nie sugeruje, że cyfry podszewki mogą być zniekształcone na cyfry w starym stylu, po prostu, że istnieje tylko jeden zestaw wartości Unicode dla cyfr 0–9, niezależnie od tego, czy dla każdej cyfry jest wiele glifów.

Wiele czcionek OpenType zawiera zarówno rysunki podszewki, jak i rysunki w starym stylu, zarówno w szerokościach tabelarycznych, jak i proporcjonalnych, przy czym rysunki podszewek tabelarycznych są zwykle domyślne. Wszystkie są dostępne dla aplikacji obsługujących OpenType, zazwyczaj poprzez ustawienie preferencji w stylu znakowym lub akapitowym. Dzielą one wartości Unicode, ale są oddzielnie rysowanymi naprzemiennymi glifami, które istnieją (lub nie mają) jako kontury w oprogramowaniu czcionek. (Spośród rodzin czcionek w twoim CSS Calibri ma postacie w starym stylu, ale interfejs użytkownika Segoe nie.)

Z typograficznego punktu widzenia nie tylko nie ma akceptowalnego sposobu robienia tego, o co prosisz, powiedziałbym, że nie ma też akceptowalnego sposobu. Jak się przekonałeś, próba dotarcia do celu poprzez przesunięcie linii bazowych i zniekształcenie postaci podszewki wygląda okropnie.

Alan Gilbertson
źródło

Dobra odpowiedź, ale wydaje się rodzić pytanie, kiedy przeglądarki będą w pełni świadome OpenType, do tego stopnia, że w CSS można określić, który styl liczb ma być używany, gdy czcionka zawiera oba te elementy.

e100

Należy również zauważyć, że nie ma sposobu, aby zagwarantować, że „Segoe UI”, „Calibri”, a nawet sans-serif to wyświetlana czcionka. Dokładne użyte wartości linii bazowej i wysokości x mogą wyglądać jeszcze bardziej okropnie w Arbitralnym Olde Style, który użytkownik zainstalował.

horatio

Każdy wgląd dlaczego konsorcjum Unicode nie kodują oddzielne glify dla wielkich i małych cyfr, ale nie kodują oddzielne glify na wielkie litery A( U+0041), małe litery a( U+0061), a nawet sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ ᴀ( U+1D00)? To znaczy, jakie może być rozumowanie, które wyklucza oddzielne wielkie i małe cyfry, ale obejmuje osobne wielkie i małe litery?

Ian Boyd

I wreszcie, czy możesz nazwać czcionkę OpenType, która zawiera zarówno cyfry „wielkie”, jak i „małe” ?

Ian Boyd,

@IanBoyd: Zwykłe wielkie i małe litery mają różne znaczenia, dlatego przełączanie między nimi jest czymś więcej niż wyborem stylistycznym. Wielkie i małe litery mają jednak identyczne znaczenie, a zatem po prostu nie są niczym, co Unicode chce zakodować - z tego samego powodu, dla którego nie ma specyficznego kodowania dla kursywy, małych liter, małych i tym podobnych. Znaki małych liter są zakodowane tylko dlatego, że mają wyraźne znaczenie w fonetyce i nie należy ich używać do podkreślania (w tym celu należy użyć funkcji OpenType lub podobnych).

Wrzlprmft

Prawidłowym sposobem renderowania małych cyfr / cyfr lub „cyfr Oldstyle” jest użycie CSS do wybrania odpowiedniej funkcji czcionki. Oczywiście zastosowana czcionka powinna przede wszystkim obsługiwać tę funkcję czcionki. Rzeczywiste wsparcie dla stron internetowych nie wydaje się zbyt silne.

Ustawienie CSS, którego szukasz, to

font-feature-settings: "onum";

oraz dokumentacja:

MDN: ustawienia funkcji czcionek

Dokumentację funkcji OpenType, a onumw szczególności funkcji, można znaleźć w rejestrze znaczników OpenType Layout firmy Microsoft .

Alternatywna dokumentacja dotycząca funkcji czcionek jest dostępna w artykule Jak kodować funkcje OpenType w CSS .

Oficjalnie powinieneś użyć

font-variant-numeric: oldstyle-nums;

ale obsługa tego wydaje się jeszcze słabsza, zgodnie z odniesieniem do przeglądarki Mozilla .

Teoretycznie jest to lepsze, ponieważ nie odnosi się bezpośrednio do funkcji OpenType, więc powinno działać również z czcionkami innymi niż OpenType. W ten sam sposób powinieneś użyć:

font-variant: small-caps;

aby włączyć małe czapki . Czy nie używać takich jak ustawienie funkcji OpenType

font-feature-settings: "smcp";

aby osiągnąć ten efekt, ponieważ font-variantwłaściwość jest już dobrze obsługiwana.

Mikko Rantalainen
źródło

Nie, nigdy nie chcesz używać, font-variant: small-caps;ponieważ tworzą FAKE małe czapki. Zawsze używaj drugiego i zawsze używaj czcionek OpenType. Prosty i rozwiązany.

tchrist

Zgodnie z definicją ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ) to acceptablejeśli small-capsfunkcja jest sfałszowana. Nie jest to wymagane, a wysokiej jakości klient użytkownika zrobiłby coś dobrego (zamapowałby go na funkcję OpenType). Zgadzam się, że jeśli wolisz nie zmieniać, zamiast sfałszowanych małych czapek, powinieneś użyć font-feature-settings. Zwykle fałszywe małe czapki są lepsze niż brak efektu.

Mikko Rantalainen