¿Cómo construir "dígitos en minúscula" (es decir, figuras de texto)?


12

¿Existe una forma aceptada de ajustar los glifos de fuente para simular figuras de texto ?

ingrese la descripción de la imagen aquí

Antecedentes

Las figuras de texto son dígitos "en minúsculas". Normalmente usa dígitos en minúscula donde también usa texto en minúscula (por ejemplo, en el medio de una oración).

Los teclados nunca se crearon con dígitos en mayúscula y minúscula; y Unicode no los codifica específicamente, ya que "no se consideran caracteres separados de las figuras de revestimiento, solo una forma diferente de escribir los mismos caracteres".

Lo cual me lleva a mi pregunta; ¿Cuál es la forma aceptada de crear figuras en minúsculas a partir de las "mayúsculas" estándar de una fuente?

Wikipedia menciona que normalmente :

  • 012son de xaltura
  • 68 tener ascendentes
  • 34579 tener descendientes

ingrese la descripción de la imagen aquí

Mi primer intento (en photoshop) sería:

  • smush 012
  • empujar 34579 hacia abajo
  • deja 68 donde están:

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Pero las figuras desvainadas (0, 1, 2) se ven claramente desagradables.

Si el consorcio Unicode sugiere que los "dígitos minúsculos" pueden construirse simplemente a partir de los "mayúsculas", ¿qué recomiendan que haga?

Idealmente en HTML

Mi objetivo final es mostrar texto en minúsculas en un navegador. Sé que algunas fuentes (por ejemplo, Georgia) ya muestran todos sus dígitos en minúsculas:

ingrese la descripción de la imagen aquí

Pero no estoy preguntando cómo cambiar a usar Georgia ; Estoy preguntando cómo construir figuras de revestimiento a partir de figuras sin revestimiento.

Y dado que esto es para mostrar en la web, me doy cuenta de que probablemente terminaría teniendo que aplicar el formato por carácter:

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

Representación como:

ingrese la descripción de la imagen aquí

Lo cual, nuevamente, no parece tan agradable como creo que debería ser.

Hey mira, un centavo!

ingrese la descripción de la imagen aquí

Respuestas:


11

La respuesta muy corta es "No."

Las figuras de estilo antiguo ("minúsculas") se dibujan específicamente de esa manera. Las fuentes PostScript y TrueType heredadas, en su mayor parte, contienen solo figuras tabulares, que son de forro o de estilo antiguo de acuerdo con la forma en que está diseñada la fuente.

El Consorcio Unicode no sugiere que las figuras de revestimiento se puedan distorsionar en figuras de estilo antiguo, simplemente que solo hay un conjunto de valores Unicode para los dígitos 0-9, independientemente de si hay múltiples glifos para cada dígito.

Muchas fuentes OpenType contienen figuras de revestimiento y de estilo antiguo, tanto en ancho tabular como proporcional, siendo las figuras de revestimiento tabular el valor predeterminado habitual. Todos estos están disponibles para aplicaciones que son compatibles con OpenType, generalmente a través de una configuración de preferencias en un estilo de carácter o párrafo. Comparten valores Unicode, pero se dibujan separadamente glifos alternativos que existen (o no) como esquemas en el software de fuentes. (De las familias de fuentes en su CSS, Calibri tiene figuras de estilo antiguo, pero Segoe UI no).

Desde un punto de vista tipográfico, no solo no hay una forma aceptada de hacer lo que pides, yo diría que tampoco hay una forma aceptable . Como has descubierto, tratar de llegar cambiando las líneas de base y distorsionando las figuras de revestimiento se ve horrible.


Buena respuesta, pero parece plantear la pregunta de cuándo los navegadores serán completamente compatibles con OpenType, hasta el punto de poder especificar en CSS qué estilo de números usar cuando una fuente contiene ambos.
e100

1
También es un punto importante que no hay forma de garantizar que "Segoe UI", "Calibri", ni siquiera sans-serif muestren la fuente real. La línea base exacta y los valores de altura x utilizados pueden parecer aún más horribles en el estilo antiguo arbitrario que el usuario ha instalado.
horatio

Cualquier idea de por qué el Consorcio Unicode no codificar glifos separadas para mayúsculas y minúsculas dígitos, pero hizo codificar glifos independientes para mayúsculas A( U+0041), minúsculas a( U+0061), e incluso cᴀᴘɪᴛᴀʟ sᴍᴀʟʟ ( U+1D00)? Es decir, ¿cuál podría ser el razonamiento que excluye dígitos separados en mayúsculas y minúsculas, pero incluye letras separadas en mayúsculas y minúsculas?
Ian Boyd

Y finalmente, ¿puede nombrar una fuente OpenType que contenga dígitos "mayúsculas" y "minúsculas" ?
Ian Boyd

1
@IanBoyd: los caracteres regulares en mayúsculas y minúsculas tienen un significado distinto y, por lo tanto, cambiar entre ellos es mucho más que una elección estilística. Sin embargo, los números en mayúsculas y minúsculas tienen un significado idéntico y, por lo tanto, simplemente no son nada que Unicode quiera codificar, por la misma razón que no hay codificaciones específicas para cursiva, minúsculas, minúsculas y similares. Los caracteres de minúsculas que encuentre solo están codificados porque tienen un significado distinto en fonética y no deben usarse para enfatizar (para esto, debe usar características OpenType o similares).
Wrzlprmft

5

La forma correcta de representar dígitos / números en minúsculas o "figuras de estilo antiguo" es usar CSS para seleccionar una fuente adecuada. Obviamente, la fuente utilizada debería admitir esta función de fuente en primer lugar. El soporte del mundo real con webfonts no parece ser demasiado fuerte.

La configuración de CSS que está buscando es

font-feature-settings: "onum";

y la documentación:

La documentación de las características de OpenType, y la onumcaracterística en particular, se puede encontrar en el registro de etiquetas de diseño OpenType de Microsoft .

La documentación alternativa sobre las características de fuente está disponible en el artículo Cómo codificar características de OpenType en CSS .

Oficialmente, se supone que debes usar

font-variant-numeric: oldstyle-nums;

pero el soporte para eso parece ser aún más débil según la referencia de compatibilidad del navegador de Mozilla .

En teoría, esto es mejor porque no se refiere directamente a las características OpenType, por lo que también debería funcionar con fuentes que no sean OpenType. De la misma manera deberías usar:

font-variant: small-caps; 

para habilitar pequeñas mayúsculas . No , no utilizar la función de ajuste de OpenType como

font-feature-settings: "smcp";

para lograr este efecto porque la font-variantpropiedad ya está bien soportada.


No, nunca querrás usarlo font-variant: small-caps;porque eso crea FAKE small caps. Siempre use el otro, y siempre use fuentes OpenType. Simple y resuelto.
tchrist

Según la definición ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ) es acceptablesi la small-capscaracterística es falsa. Eso no es un requisito y el agente de usuario de alta calidad haría lo correcto (asignarlo a la función OpenType). Estoy de acuerdo en que si prefieres no tener cambios en lugar de pequeñas tapas falsas, debes usarlas font-feature-settings. Por lo general, las tapas pequeñas falsas son mejores que no tener ningún efecto.
Mikko Rantalainen
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.