Come costruire "cifre minuscole" (ad es. Cifre di testo)?

Esiste un modo accettato per regolare glifi dei caratteri al fine di simulare figure di testo ?

sfondo

Le cifre del testo sono cifre "minuscole". Normalmente usi cifre minuscole in cui usi anche testo minuscolo (ad esempio nel mezzo di una frase).

Le tastiere non sono mai state create con cifre maiuscole e minuscole; e Unicode non li codifica specificamente, in quanto "non sono considerati personaggi separati da figure allineate, ma solo un modo diverso di scrivere gli stessi personaggi".

Il che mi porta alla mia domanda; qual è il modo accettato per creare figure minuscole da quelle "maiuscole" standard di un font?

Wikipedia menziona che normalmente :

012sono x-altezza
68 hanno ascendenti
34579 hanno discensori

inserisci qui la descrizione dell'immagine

Il mio primo tentativo (in Photoshop) sarebbe:

smush 012
nudge 34579 verso il basso
lascia 68 dove sono:

inserisci qui la descrizione dell'immagine

Ma le figure disorientate (0, 1, 2) sembrano decisamente spiacevoli.

Se il consorzio Unicode suggerisce che le "cifre minuscole" possono essere semplicemente costruite da quelle "maiuscole" - cosa raccomandano di fare?

Idealmente in HTML

Il mio obiettivo finale è quello di visualizzare il testo in minuscolo in un browser. so che alcuni caratteri (ad es. la Georgia) mostrano già tutte le cifre in minuscolo:

inserisci qui la descrizione dell'immagine

Ma non sto chiedendo come passare all'utilizzo della Georgia ; sto chiedendo come costruire figure di rivestimento da quelle non di rivestimento.

E poiché questo è per la visualizzazione sul web, mi rendo conto che probabilmente finirò per applicare la formattazione per carattere:

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

Rendering come:

inserisci qui la descrizione dell'immagine

Che, ancora una volta, non sembra così piacevole come penso che dovrebbe.

Ehi guarda, un soldo!

inserisci qui la descrizione dell'immagine

— Ian Boyd
fonte

Risposte:

La risposta molto breve è "No".

Le figure oldstyle ("minuscole") sono disegnate in modo specifico in questo modo. I caratteri Legacy Postscript e TrueType, per la maggior parte, contengono solo figure tabulari, che sono allineate o vecchio stile secondo il modo in cui il carattere è progettato.

Il consorzio Unicode non sta suggerendo che le figure di rivestimento possano essere distorte in figure di vecchio stile, semplicemente che esiste un solo set di valori Unicode per le cifre 0-9, indipendentemente dal fatto che ci siano più glifi per ogni cifra.

Molti tipi di carattere OpenType contengono sia figure di rivestimento che di vecchio stile, sia in larghezza tabulare che proporzionale, con le figure di rivestimento tabellare come al solito default. Questi sono tutti disponibili per le applicazioni compatibili con OpenType, in genere tramite un'impostazione delle preferenze in uno stile di carattere o di paragrafo. Condividono i valori Unicode, ma sono glifi alternativi disegnati separatamente che esistono (o non) come contorni nel software del font. (Delle famiglie di caratteri nel tuo CSS, Calibri ha figure vecchio stile, ma l'interfaccia utente di Segoe no.)

Da un punto di vista tipografico, non solo non esiste un modo accettato per fare ciò che chiedi, direi che non esiste nemmeno un modo accettabile . Come hai scoperto, cercare di arrivarci spostando le linee di base e distorcendo le figure del rivestimento sembra orribile.

— Alan Gilbertson
fonte

Buona risposta, ma sembra porsi la domanda quando i browser saranno pienamente consapevoli di OpenType, al punto da poter specificare nel CSS quale stile di numeri usare quando un font contiene entrambi.

— e100,

È anche importante sottolineare che non esiste alcun modo per garantire che "Segoe UI", "Calibri", e neppure sans-serif sia il carattere effettivamente visualizzato. I valori esatti della baseline e dell'altezza x usati possono sembrare ancora più terribili in Arbitrary Olde Style che l'utente ha installato.

— horatio,

Qualche idea sul perché il Consorzio Unicode non ha codificato glifi separati per le lettere maiuscole e minuscole, ma ha codificato glifi separati per maiuscole A( U+0041), minuscole a( U+0061) e persino sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ ᴀ( U+1D00)? Vale a dire quale potrebbe essere il ragionamento che esclude le lettere maiuscole e minuscole separate, ma include lettere maiuscole e minuscole separate?

— Ian Boyd,

E infine, puoi nominare un font OpenType che contenga sia cifre "maiuscole" che "minuscole" ?

— Ian Boyd,

@IanBoyd: i caratteri maiuscoli e minuscoli regolari hanno un significato distinto e quindi passare da uno all'altro è molto più di una scelta stilistica. I numeri maiuscoli e minuscoli hanno un significato identico, tuttavia, e quindi semplicemente non sono nulla che Unicode voglia codificare - per lo stesso motivo per cui non esistono codifiche specifiche per corsivo, maiuscole, minuscole e simili. I caratteri maiuscoli che trovi sono codificati solo perché hanno un significato distinto in fonetica e non dovrebbero essere usati per enfatizzare (per questo, dovresti usare le funzionalità OpenType o simili).

— Wrzlprmft

Il modo corretto di visualizzare cifre / numeri minuscoli o "Figure in stile antico" è utilizzare i CSS per selezionare una funzione di carattere adatta. Ovviamente, il carattere utilizzato dovrebbe quindi supportare questa funzione di carattere in primo luogo. Il supporto del mondo reale con i caratteri web non sembra essere troppo forte.

L'impostazione CSS che stai cercando è

font-feature-settings: "onum";

e la documentazione:

MDN: font-feature-settings

La documentazione delle funzionalità OpenType, e onumin particolare delle funzionalità, è disponibile nel registro dei tag Microsoft OpenType Layout .

Documentazione alternativa sulle funzionalità dei caratteri è disponibile nell'articolo Come codificare le funzionalità OpenType nei CSS .

Ufficialmente, dovresti usare

font-variant-numeric: oldstyle-nums;

ma il supporto per questo sembra essere ancora più debole secondo il riferimento di compatibilità del browser di Mozilla .

In teoria, questo è meglio perché non si riferisce direttamente alle funzionalità OpenType, quindi dovrebbe funzionare anche con caratteri non OpenType. Allo stesso modo dovresti usare:

font-variant: small-caps;

per abilitare i caratteri maiuscoli . Do Non utilizzare la funzione OpenType impostazione come

font-feature-settings: "smcp";

per ottenere questo effetto perché la font-variantproprietà è già ben supportata.

— Mikko Rantalainen
fonte

No, non vorresti mai usarlo font-variant: small-caps;perché creava maiuscoletti FAKE . Usa sempre l'altro e usa sempre i caratteri OpenType. Semplice e risolto.

— tchrist

Secondo la definizione ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ) è acceptablese la small-capsfunzione è falsa. Questo non è un requisito e un agente utente di alta qualità farebbe la cosa giusta (mappandolo alla funzione OpenType). Concordo sul fatto che se preferisci non apportare modifiche invece di maiuscoletti falsi, dovresti utilizzarlo font-feature-settings. Di solito i piccoli tappi falsi sono meglio che non avere alcun effetto.

— Mikko Rantalainen,