Wie konstruiere ich “Kleinbuchstaben” (zB Textfiguren)?

Gibt es eine akzeptierte Möglichkeit Glyphen zu simulieren , um zu justieren Text Zahlen ?

Hintergrund

Textabbildungen sind "Kleinbuchstaben". Normalerweise verwenden Sie Kleinbuchstaben, wenn Sie auch Kleinbuchstaben verwenden (z. B. in der Mitte eines Satzes).

Tastaturen wurden nie mit Groß- und Kleinbuchstaben erstellt. und Unicode codiert sie nicht speziell, da "sie nicht als separate Zeichen von Linienfiguren betrachtet werden, sondern nur als eine andere Art, dieselben Zeichen zu schreiben".

Was mich zu meiner Frage bringt; Was ist die akzeptierte Methode, um aus den Standard- "Großbuchstaben" einer Schriftart Kleinbuchstaben zu erstellen?

Wikipedia erwähnt, dass normalerweise :

012sind x-höhe
68 Aufsteiger haben
34579 Nachkommen haben

Bildbeschreibung hier eingeben

Mein erster Versuch (in Photoshop) wäre:

smush 012
Schub 34579 nach unten
Lass 68 wo sie sind:

Bildbeschreibung hier eingeben

Aber die skwooshed Zahlen (0, 1, 2) sehen ausgesprochen unangenehm aus.

Wenn das Unicode-Konsortium vorschlägt, dass "Kleinbuchstaben" einfach aus "Großbuchstaben" aufgebaut werden können - was empfehle ich?

Idealerweise in HTML

Mein Endziel ist es, Kleinbuchstaben in einem Browser anzuzeigen. Ich weiß, dass einige Schriftarten (z. B. Georgia) bereits alle ihre Ziffern in Kleinbuchstaben anzeigen :

Bildbeschreibung hier eingeben

Aber ich frage nicht, wie ich zu Georgia wechseln soll . Ich frage , wie man bauen Versalziffern aus Nicht-Futter diejenigen.

Und da dies für die Anzeige im Web vorgesehen ist, stelle ich fest, dass ich wahrscheinlich die Formatierung pro Zeichen anwenden muss:

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

Rendern als:

Bildbeschreibung hier eingeben

Was wiederum nicht so gut aussieht, wie ich es für richtig halte.

Hey schau, ein Penny!

Bildbeschreibung hier eingeben

typography text resize line-height Ian Boyd
quelle

Antworten:

Die sehr kurze Antwort lautet "Nein".

Oldstyle-Figuren ("Kleinbuchstaben") werden speziell auf diese Weise gezeichnet. Ältere Postscript- und TrueType-Schriftarten enthalten zum größten Teil nur tabellarische Abbildungen, die entsprechend der Art und Weise, in der die Schrift entworfen wurde, ausgekleidet oder altmodisch sind.

Das Unicode-Konsortium schlägt nicht vor, dass Auskleidungsfiguren in Oldstyle-Figuren verzerrt werden können. Es gibt lediglich einen Satz von Unicode-Werten für die Ziffern 0-9, unabhängig davon, ob für jede Ziffer mehrere Glyphen vorhanden sind.

Viele OpenType-Schriftarten enthalten sowohl Linier- als auch Oldstyle-Figuren in tabellarischer und proportionaler Breite, wobei die tabellarischen Linierfiguren der übliche Standard sind. Diese stehen allen Anwendungen zur Verfügung, die OpenType-fähig sind, normalerweise über eine Voreinstellung in einem Zeichen- oder Absatzstil. Sie haben Unicode-Werte gemeinsam, aber sie sind separat gezeichnete alternative Glyphen, die in der Schriftsoftware als Umrisse vorhanden sind (oder nicht). (Von den Schriftfamilien in Ihrem CSS hat Calibri Oldstyle-Figuren, die Benutzeroberfläche von Segoe jedoch nicht.)

Aus typografischer Sicht gibt es nicht nur keine akzeptierte Möglichkeit, das zu tun, was Sie verlangen, sondern ich würde auch sagen, dass es keine akzeptable Möglichkeit gibt. Wie Sie herausgefunden haben, sieht es schrecklich aus, wenn Sie versuchen, dorthin zu gelangen, indem Sie die Basislinien verschieben und die Linienfiguren verzerren.

Alan Gilbertson
quelle

Gute Antwort, aber es scheint die Frage zu stellen, wann Browser vollständig OpenType-fähig sein werden, sofern sie in der Lage sind, in CSS anzugeben, welcher Zahlenstil verwendet werden soll, wenn eine Schriftart beides enthält.

e100

Es ist auch ein wichtiger Hinweis, dass es keine Garantie dafür gibt, dass "Segoe UI", "Calibri" oder sogar eine serifenlose Schrift angezeigt wird. Die genauen Grundlinien- und x-Höhenwerte, die verwendet werden, sehen in Arbitrary Olde Style, den der Benutzer installiert hat, möglicherweise noch schlimmer aus.

Horatio

Jeder Einblick, warum das Unicode - Konsortium hat für Groß nicht kodieren separaten Glyphen und Klein Ziffern, aber tat kodieren getrennte Glyphen für Groß A( U+0041), Kleinbuchstaben a( U+0061) und sogar sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ ᴀ( U+1D00)? Das heißt, was könnte die Begründung sein, die getrennte Groß- und Kleinbuchstaben ausschließt, aber getrennte Groß- und Kleinbuchstaben enthält?

Ian Boyd

Und schließlich, können Sie eine OpenType-Schriftart benennen, die sowohl "Großbuchstaben" als auch "Kleinbuchstaben" enthält ?

Ian Boyd

@IanBoyd: Reguläre Groß- und Kleinbuchstaben haben unterschiedliche Bedeutungen und daher ist das Umschalten zwischen ihnen weit mehr als eine stilistische Entscheidung. Groß- und Kleinbuchstaben sind jedoch gleichbedeutend und daher nichts, was Unicode codieren möchte - aus dem gleichen Grund, dass es keine speziellen Codierungen für Kursivschrift, Kapitälchen, Kleinbuchstaben und Ähnliches gibt. Die Kleinbuchstaben, die Sie finden, werden nur codiert, weil sie in der Phonetik eine eindeutige Bedeutung haben und nicht zur Hervorhebung verwendet werden sollten (hierfür sollten Sie OpenType-Funktionen oder ähnliches verwenden).

Wrzlprmft

Die richtige Methode zum Rendern von Ziffern / Ziffern in Kleinbuchstaben oder "Oldstyle-Zahlen" ist die Verwendung von CSS zur Auswahl einer geeigneten Schriftartfunktion. Offensichtlich sollte die verwendete Schriftart diese Schriftartfunktion dann in erster Linie unterstützen. Die Unterstützung der realen Welt mit Webfonts scheint nicht zu stark zu sein.

Die gesuchte CSS-Einstellung lautet

font-feature-settings: "onum";

und die Dokumentation:

MDN: Font-Feature-Einstellungen

Die Dokumentation der OpenType-Funktionen und onuminsbesondere der Funktionen finden Sie in der OpenType Layout-Tag-Registrierung von Microsoft .

Eine alternative Dokumentation zu Schriftfunktionen finden Sie im Artikel So codieren Sie OpenType-Funktionen in CSS .

Offiziell solltest du verwenden

font-variant-numeric: oldstyle-nums;

Laut Mozillas Referenz zur Browserkompatibilität scheint die Unterstützung dafür jedoch noch schwächer zu sein .

Theoretisch ist dies besser, da es sich nicht direkt auf OpenType-Funktionen bezieht und daher auch mit Nicht-OpenType-Schriftarten funktionieren sollte. Auf die gleiche Weise sollten Sie verwenden:

font-variant: small-caps;

Small Caps aktivieren . Verwenden Sie keine OpenType-Funktionseinstellungen wie

font-feature-settings: "smcp";

um diesen effekt zu erzielen ist das font-varianteigentum schon gut unterstützt.

Mikko Rantalainen
quelle

Nein, du willst nie verwenden, font-variant: small-caps;weil das FAKE Small Caps schafft . Verwenden Sie immer die andere und immer OpenType-Schriftarten. Einfach und gelöst.

Donnerstag,

Entsprechend der Definition ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ) ist es, acceptablewenn das small-capsFeature gefälscht ist. Dies ist keine Voraussetzung, und ein qualitativ hochwertiger Benutzeragent würde das Richtige tun (ordnen Sie ihn der OpenType-Funktion zu). Ich bin damit einverstanden, dass Sie verwenden sollten, wenn Sie statt gefälschter Kapitälchen lieber keine Veränderung haben font-feature-settings. Normalerweise sind gefälschte Kapitälchen besser, als überhaupt keine Wirkung zu haben.

Mikko Rantalainen