Comment construire des «chiffres en minuscules» (c'est-à-dire des chiffres de texte)?


12

Existe-t-il un moyen accepté d'ajuster les glyphes de police afin de simuler des figures de texte ?

entrez la description de l'image ici

Contexte

Les chiffres du texte sont des chiffres "minuscules". Vous utilisez normalement des chiffres en minuscules où vous utilisez également du texte en minuscules (par exemple au milieu d'une phrase).

Les claviers n'ont jamais été créés avec des chiffres en majuscules et en minuscules; et Unicode ne les encode pas spécifiquement, car "ils ne sont pas considérés comme des caractères distincts des figures de doublure, seulement comme une manière différente d'écrire les mêmes caractères".

Ce qui m'amène à ma question; quelle est la manière acceptée de créer des chiffres en minuscules à partir des «majuscules» standard d'une police?

Wikipedia mentionne que normalement :

  • 012sont x-hauteur
  • 68 avoir des ascendeurs
  • 34579 avoir des descendants

entrez la description de l'image ici

Ma première tentative (dans Photoshop) serait de:

  • smush 012
  • pousser 34579 vers le bas
  • laisser 68 où ils sont:

entrez la description de l'image ici

entrez la description de l'image ici

Mais les chiffres du skwooshed (0, 1, 2) sont nettement désagréables.

Si le consortium Unicode suggère que les "chiffres en minuscules" peuvent simplement être construits à partir de ceux "en majuscules" - que recommandent-ils de faire?

Idéalement en HTML

Mon objectif final est d'afficher du texte en minuscules dans un navigateur. je sais que certaines polices (par exemple la Géorgie) affichent déjà tous leurs chiffres en minuscules:

entrez la description de l'image ici

Mais je ne demande pas comment passer à l'utilisation de la Géorgie ; je demande comment construire des figures de doublure à partir de celles qui ne le sont pas.

Et puisque c'est pour l'affichage sur le web, je me rends compte que je finirais probablement par devoir appliquer une mise en forme par caractère:

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

Rendu comme:

entrez la description de l'image ici

Ce qui, encore une fois, ne semble pas aussi agréable que je le pense.

Hé, regarde, un sou!

entrez la description de l'image ici

Réponses:


11

La réponse très courte est "Non".

Les figures à l'ancienne ("minuscules") sont spécifiquement dessinées de cette façon. Les polices PostScript et TrueType héritées, pour la plupart, ne contiennent que des chiffres tabulaires, qui sont alignés ou à l'ancienne selon la façon dont la police est conçue.

Le consortium Unicode ne suggère pas que les chiffres de doublure peuvent être déformés en chiffres de style ancien, simplement qu'il n'y a qu'un seul ensemble de valeurs Unicode pour les chiffres 0-9, qu'il y ait ou non plusieurs glyphes pour chaque chiffre.

De nombreuses polices OpenType contiennent à la fois des lignes et des chiffres à l'ancienne, dans des largeurs tabulaires et proportionnelles, les chiffres des lignes tabulaires étant la valeur par défaut habituelle. Ils sont tous disponibles pour les applications compatibles OpenType, généralement via un paramètre de préférence dans un style de caractère ou de paragraphe. Ils partagent des valeurs Unicode, mais ce sont des glyphes alternatifs dessinés séparément qui existent (ou n'existent pas) en tant que contours dans le logiciel de police. (Parmi les familles de polices de votre CSS, Calibri a des figures à l'ancienne, mais pas Segoe UI.)

D'un point de vue typographique, non seulement il n'y a pas de moyen accepté de faire ce que vous demandez, mais je dirais qu'il n'y a pas non plus de moyen acceptable . Comme vous l'avez découvert, essayer d'y arriver en déplaçant les lignes de base et en déformant les chiffres de la doublure semble horrible.


Bonne réponse, mais cela semble poser la question de savoir quand les navigateurs seront pleinement compatibles avec OpenType, au point de pouvoir spécifier en CSS le style de nombres à utiliser lorsqu'une police contient les deux.
e100

1
Il est également important de noter qu'il n'y a aucun moyen de garantir que "Segoe UI", "Calibri", ni même sans-serif, la police réelle est affichée. La ligne de base exacte et les valeurs de hauteur x utilisées peuvent sembler encore plus horribles dans le style arbitraire ancien que l'utilisateur a installé.
horatio

Avez-vous une idée des raisons pour lesquelles le consortium Unicode n'a pas codé des glyphes séparés pour les chiffres majuscules et minuscules, mais a codé des glyphes distincts pour les majuscules A( U+0041), les minuscules a( U+0061) et même sᴍᴀʟʟ cᴍᴀʟʟ ( U+1D00)? C'est-à-dire quel pourrait être le raisonnement qui exclut les chiffres séparés en majuscules et en minuscules, mais inclut les lettres séparées en majuscules et en minuscules?
Ian Boyd

Et enfin, pouvez-vous nommer une police OpenType qui contient à la fois des chiffres "majuscules" et "minuscules" ?
Ian Boyd

1
@IanBoyd: Les caractères majuscules et minuscules normaux ont une signification distincte et donc basculer entre eux est bien plus qu'un choix stylistique. Cependant, les nombres en majuscules et en minuscules ont une signification identique et ne sont donc tout simplement rien que Unicode veut coder - pour la même raison qu'il n'y a pas de codage spécifique pour l'italique, les petites majuscules, les minuscules et similaires. Les caractères en petites majuscules que vous trouvez ne sont encodés que parce qu'ils ont une signification distincte en phonétique et ne doivent pas être utilisés pour l'accentuation (pour cela, vous devez utiliser les fonctionnalités OpenType ou similaires).
Wrzlprmft

5

La bonne façon d'afficher des chiffres / chiffres en minuscules ou des «chiffres à l'ancienne» consiste à utiliser CSS pour sélectionner une police appropriée. De toute évidence, la police utilisée devrait alors prendre en charge cette fonctionnalité de police en premier lieu. Le support du monde réel avec les polices Web ne semble pas être trop fort.

Le paramètre CSS que vous recherchez est

font-feature-settings: "onum";

et la documentation:

La documentation des fonctionnalités OpenType, et des onumfonctionnalités en particulier, peut être trouvée dans le registre des balises OpenType Layout de Microsoft .

Une documentation alternative sur les fonctionnalités des polices est disponible dans l'article Comment coder les fonctionnalités OpenType en CSS .

Officiellement, vous êtes censé utiliser

font-variant-numeric: oldstyle-nums;

mais la prise en charge de cela semble encore plus faible selon la référence de compatibilité du navigateur de Mozilla .

En théorie, c'est mieux car il ne fait pas directement référence aux fonctionnalités OpenType, il devrait donc également fonctionner avec des polices non OpenType. De la même manière, vous devez utiliser:

font-variant: small-caps; 

pour activer les petites majuscules . N'utilisez pas le paramètre de fonctionnalité OpenType tel que

font-feature-settings: "smcp";

pour obtenir cet effet car la font-variantpropriété est déjà bien supportée.


Non, vous ne voulez jamais l'utiliser font-variant: small-caps;car cela crée des fausses petites capitalisations. Utilisez toujours l'autre et utilisez toujours les polices OpenType. Simple et résolu.
tchrist

Selon la définition ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ), c'est acceptablesi la small-capsfonctionnalité est truquée. Ce n'est pas une exigence et un agent utilisateur de haute qualité ferait la bonne chose (mappez-le à la fonctionnalité OpenType). Je suis d'accord que si vous préférez ne pas avoir de changement au lieu de fausses petites capitalisations, vous devriez utiliser font-feature-settings. Habituellement, les fausses petites capitalisations valent mieux que de n'avoir aucun effet.
Mikko Rantalainen
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.