Fuentes tipográficas

Funciones

Las fuentes tipográficas son objetos gráficos (archivos) que contienen los caracteres y símbolos que vemos en un monitor. Recordamos que una cadena Unicode únicamente almacena el código de los caracteres (codepoints) sin ningún tipo de información sobre como deben ser dibujados. Se conoce como glifo al gráfico asociado a un carácter y, en un fichero de fuente, hay tantos glifos como codepoints pueda representar la tipografía. El emparejamiento entre codepoints y sus correspondientes glifos lo lleva a cabo el sub-sistema gráfico del sistema operativo (Listado 1) (Figura 1).

1
2
3
4

Font *font = font_create("Comic Sans MS" 28, 0);
draw_font(ctx, font);
draw_text(ctx, "Hello World", 200, 250);
font_destroy(&font);

1. Crear fuentes

A la hora de mostrar textos en interfaces gráficas es necesario establecer una tipografía, de lo contrario el sistema no sabría como renderizarla. Siempre existirá alguna fuente definida por defecto, pero podemos cambiarla a la hora de personalizar la apariencia de nuestros textos.

• Utiliza font_create para crear una nueva fuente.
• Utiliza font_family para obtener el tipo de letra de la fuente.
• Utiliza draw_font para establecer la fuente en contextos 2D.
• Utiliza label_font para cambiar la fuente asociada a un control Label.

La característica más representativa del diseño de una tipografía es la familia a la que pertenece (font family o typeface) (Figura 2). Cada computador tiene instaladas una serie de familias que no tienen porqué coincidir con las incorporadas en otra máquina. Este es un hecho importante a tener en cuenta ya que, en pro de la portabilidad, no debemos asumir que una determinada familia tipográfica vaya a estar presente en todas las máquinas que ejecuten el programa. Sentencias del tipo:

1

Font *font = font_create("Comic Sans MS", 28, 0);

no serán del todo portables, ya que no tenemos la certeza de que la tipografía Comic Sans MS esté instalada en todos los ordenadores. Tenemos dos alternativas para garantizar la existencia de una determinada fuente:

• Utiliza font_system para obtener la fuente por defecto del sistema operativo. Siempre estará disponible pero su apariencia será diferente según el sistema operativo.
• Utiliza font_regular_size para obtener el tamaño predefinido para botones y otros controles.
• Utiliza font_installed_families para obtener la lista de familias instaladas en la máquina y elegir la que más se adapte a nuestros propósitos.

2. Fuente del sistema

Como acabamos de mencionar, siempre hay una fuente por defecto asociada al entorno de ventanas y que, en cierta manera, le otorga parte de su personalidad. Utilizar esta fuente nos garantiza la correcta integración de nuestro programa en todos los sistemas donde se ejecute, haciendo nuestro código totalmente portable (Figura 3). Los controles de interfaz como Button o Label tienen asociada por defecto la fuente del sistema en tamaño regular. La correspondencia de font_system en las diferentes plataformas es:

• Segoe UI: Windows Vista, 7, 8, 10.
• Tahoma: Windows XP.
• San Francisco: macOS Mojave, High Sierra, Sierra, Mac OSX El Capitan.
• Helvetica Neue: Mac OSX Yosemite.
• Lucida Grande: Mac OSX Mavericks, Mountain Lion, Lion, Snow Leopard.
• Ubuntu: Linux Ubuntu.
• Piboto: Linux Raspbian.

Además de la fuente del sistema tenemos disponible otra fuente monoespacio por defecto (Figura 4). Estas tipografías imitan a las máquinas de escribir antiguas, donde todos los caracteres ocupan el mismo espacio. Suelen utilizarse para documentos técnicos o archivos de código fuente.

• Utiliza font_monospace para crear una tipografía monoespacio genérica.

3. Características de las fuentes

Además de la familia, podremos ajustar el tamaño y el estilo de la fuente. El tamaño hace referencia a la altura promedio (en píxeles) de los caracteres que componen la tipográfica, donde no se tiene en cuenta los márgenes ni los desplazamientos en relación al baseline (Figura 5). A la altura total de una línea de texto se la conoce como cell height y, por norma general, será algo superior al tamaño de la fuente char height.

También podemos cambiar el estilo del texto, estableciendo sus atributos a través del parámetro style combinando los valores de fstyle_t (Figura 6).

• ekFBOLD. Negrita.
• ekFITALIC. Itálica.
• ekFUNDERLINE. Subrayado.
• ekFSTRIKEOUT. Tachado.

3.1. Tamaño en puntos

Por defecto, el tamaño de la fuente se expresa en píxeles, pero puede cambiarse añadiendo ekFPOINTS al parámetro style. Esta unidad está relacionada con las fuentes impresas en papel. Aquí aparece el concepto DPI (dots per inch) que indica la cantidad de gotas de tinta aisladas que un dispositivo de impresión puede emitir por pulgada métrica. En tipografía se establece el criterio de 72 DPI’s, por tanto, el tamaño de un punto es 0.35mm aproximadamente. De esta forma es sencillo calcular el tamaño de letra a partir de los puntos: 12pt=4.2mm, 36pt=12.7mm ó 72pt=25.4mm (1 pulgada). Esta es la unidad utilizada en procesadores de texto, que ya estos trabajan en base a un tamaño de página de impresión. El problema llega cuando queremos representar fuentes expresadas en puntos en una pantalla, ya que no existe una correspondencia exacta entre píxeles y milímetros. El tamaño final del pixel depende de la resolución y del tamaño físico del monitor. Se precisa un convenio de conversión entre píxeles y pulgadas, lo que da lugar al término PPI (pixels per inch). Tradicionalmente, en sistemas Windows se establece 96 PPI mientras que en los iMac de Apple es de 72 PPI. Esto provoca que las fuentes expresadas en puntos sean un 33% más grandes en Windows (Figura 7). Además en el sistema de Microsoft es posible configurar el PPI por el usuario, lo que añade más incertidumbre sobre el tamaño final de los textos en pantalla.

4. Fuentes Bitmap y Outline

En los primeros computadores las tipografías se creaban como gráficos de raster Bitmap Fonts (Figura 8). Cada carácter se ajustaba a una celda de tamaño fijo donde se marcaban aquellos píxeles que lo componían. El mayor problema es que no escalan bien. A medida que hacemos más grande el texto en pantalla más se hace patente el efecto dentado de los píxeles.

En 1982 Adobe lanza el formato PostScript que incluía las conocidas como Outline Fonts (Figura 9). Este formato contiene una descripción geométrica de cada símbolo basada en líneas y curvas de Bezier. De esta forma se evita el efecto pixelado de las bitmap, ya que al escalar el carácter se vuelven a computar los píxeles que lo componen en un proceso conocido como rasterización. A finales de los 80’s Apple lanza el formato TrueType y le vende una licencia a Microsoft que lo incorpora en Windows 3.1, abriendo la puerta del mercado masivo a las fuentes vectoriales. Hoy en día todos los sistemas trabajan con fuentes escalables, teniendo en TrueType y OpenType los más claros representantes.

5. Unicode y glifos

Unicode es una tabla muy extensa. En la versión 11 (Junio 2018) hay registrados 137.374 codepoints y este número va creciendo en cada nueva revisión del estándar. Si la aplicación necesita de símbolos especiales (por encima del BMP-Basic Multilingual Plane) debemos cerciorarnos que las tipografías seleccionadas contengan glifos para ellos. Para ver la relación entre codepoints y glifos podemos utilizar la aplicación BabelMap (Figura 10), y dentro de ella la opción Font Analysis. A partir de un bloque Unicode mostrará aquellas fuentes instaladas que incluyen glifos para dicho rango. En macOS tenemos una aplicación similar llamada Character Viewer y en Ubuntu otra denominada Character Map.

font_create ()

Crea una fuente tipográfica.

Font*
font_create(const char_t *family,
            const real32_t size,
            const uint32_t style);

Retorna

La fuente recién creada.

font_system ()

Crea una fuente tipográfica, con la familia por defecto del sistema.

Font*
font_system(const real32_t size,
            const uint32_t style);

Retorna

La fuente recién creada.

font_monospace ()

Crea una fuente tipográfica, con la familia mono-espacio por defecto del sistema.

Font*
font_monospace(const real32_t size,
               const uint32_t style);

Retorna

La fuente recién creada.

font_with_style ()

Crea una copia de una fuente existente, cambiando el estilo.

Font*
font_with_style(const Font *font,
                const uint32_t style);

Retorna

Una copia de font con otro estilo.

font_copy ()

Crea una copia exacta de una fuente tipográfica.

Font*
font_copy(const Font *font);

Retorna

La copia de font.

Observaciones

Las fuentes son objetos inmutables. Copiar realmente significa incrementar un contador interno sin llegar a clonar el objeto. No obstante, la aplicación debe destruir la copia con font_destroy al igual que las creadas con cualquier otro constructor.

font_destroy ()

Destruye la fuente.

void
font_destroy(Font **font);

font_equals ()

Compara dos fuentes. Se consideran iguales si tienen la misma familia, tamaño y estilo.

bool_t
font_equals(const Font *font1,
            const Font *font2);

Retorna

TRUE si son iguales, FALSE si no.

font_regular_size ()

Obtiene el tamaño de la fuente por defecto para los controles de interfaz.

real32_t
font_regular_size(void);

Retorna

El tamaño por defecto en píxeles.

font_small_size ()

Obtiene el tamaño pequeño de la fuente por defecto para los controles de interfaz.

real32_t
font_small_size(void);

Retorna

El tamaño en píxeles.

Observaciones

Este tamaño es ligeramente menor que el obtenido por font_regular_size.

font_mini_size ()

Obtiene el tamaño mini de la fuente por defecto para los controles de interfaz.

real32_t
font_mini_size(void);

Retorna

El tamaño en píxeles.

Observaciones

Este tamaño es ligeramente menor que el obtenido por font_small_size.

font_family ()

Obtiene la familia tipográfica de la fuente.

const char_t*
font_family(const Font *font);

Retorna

La familia tipográfica en UTF8.

font_size ()

Obtiene el tamaño de la fuente.

real32_t
font_size(const Font *font);

Retorna

El tamaño. Las unidades depende el parámetro style.

font_height ()

Obtiene la altura de la celda o línea de texto con esta fuente.

real32_t
font_height(const Font *font);

Retorna

Altura de la celda.

font_style ()

Obtiene el estilo de la fuente.

uint32_t
font_style(const Font *font);

Retorna

El estilo. Combinación de valores de la estructura fstyle_t. Pe: ekFBOLD | ekFITALIC.

font_extents ()

Obtiene el tamaño en píxeles de una cadena de texto, en función de la fuente.

void
font_extents(const Font *font,
             const char_t *text,
             const real32_t refwidth,
             real32_t *width,
             real32_t *height);

font_exists_family ()

Comprueba si una familia tipográfica está instalada en el sistema operativo.

bool_t
font_exists_family(const char_t *family);

Retorna

TRUE si existe la familia, FALSE si no.

font_installed_families ()

Obtiene una lista con los nombres de todas las familias tipográficas instaladas en el sistema operativo.

ArrPt(String)*
font_installed_families(void);

1
2
3

ArrPt(String) *families = font_installed_families();
...
arrpt_destroy(&families, str_destroy, String);

Retorna

Array de String con los nombres de las familias, ordenadas alfabéticamente. Debe ser destruido con arrpt_destroy.

font_native ()

Obtiene la fuente en el formato nativo de cada plataforma.

void*
font_native(const Font *font);

Retorna

La fuente nativa. HFONT en Windows, PangoFontDescription en Linux y NSFont en macOS.