Fuentes

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 se dibujarán. 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.

• Utiliza font_installed_families para obtener la lista de todas las familias instaladas en la máquina.

2. Fuente del sistema

• Utiliza font_system para crear una fuente con la familia predeterminada.
• Utiliza font_regular_size para obtener el tamaño de fuente de la interfaz.

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). Controles como Button o Label tienen asociada por defecto la fuente del sistema en tamaño regular. Las más conocidas son:

• Segoe UI: Windows Vista, 7, 8, 10, 11.
• Tahoma: Windows XP.
• San Francisco: Mac OSX El Capitan y posteriores.
• Helvetica Neue: Mac OSX Yosemite.
• Lucida Grande: Mac OSX Mavericks, Mountain Lion, Lion, Snow Leopard.
• Ubuntu: Linux Ubuntu.
• Piboto: Linux Raspbian.
• Cantarell: Kali Linux.

3. Fuente monoespaciada

Además de la fuente del sistema tenemos disponible otra fuente monoespaciada 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.
• Utiliza font_is_monospace para comprobar si una fuente es monoespaciada.
• Utiliza font_installed_monospace para obtener todas las fuentes monoespaciadas instaladas.

En general, los sistemas de escritorio no ofrecen una fuente monoespaciada por defecto. NAppGUI seleccionará la más apropiada en cada caso buscando entre las fuentes instaladas:

• Windows: Consolas, Courier New.
• macOS: SF Mono, Menlo, Monaco, Andale Mono, Courier New.
• Linux: Ubuntu Mono, DejaVu Sans Mono, Courier New.

A partir de macOS Catalina, se ofrece una fuente de sistema monoespaciada.

4. Estilo de la fuente

• Utiliza font_style para obtener el estilo.

Además de la familia, dispondremos de ciertas propiedades (estilo) que también influirán en su apariencia. Se agrupan en el parámetro style del constructor, combinando los valores de fstyle_t (Figura 5).

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

5. Tamaño y métricas

• Utiliza font_size para obtener el tamaño de la fuente.
• Utiliza font_height para obtener el tamaño de línea.
• Utiliza font_ascent para obtener la medida encima del baseline.
• Utiliza font_descent para obtener la medida debajo del baseline.
• Utiliza font_leading para obtener el margen de línea.
• Utiliza font_extents para obtener la medida de un texto.

Si bien el tamaño de letra (size) es la única métrica que podemos configurar al crear una fuente, existen diferentes medidas asociadas que nos pueden ser útiles a la hora de trabajar con gráficos vectoriales (Figura 6). La más utilizada será la altura de línea (height), en general, algo superior al tamaño de letra ya que incluye un pequeño margen vertical (leading).

5.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.

6. 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.

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

Observaciones

Ver Fuente del sistema.

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.

Observaciones

Ver Fuente monoespaciada.

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.

Observaciones

Ver Fuente del sistema.

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.

Observaciones

Ver Tamaño y métricas.

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 línea.

Observaciones

Ver Tamaño y métricas.

font_ascent ()

Obtiene la medida de la fuente por encima del baseline.

real32_t
font_ascent(const Font *font);

Retorna

Medida superior.

Observaciones

Ver Tamaño y métricas.

font_descent ()

Obtiene la medida de la fuente por debajo del baseline.

real32_t
font_descent(const Font *font);

Retorna

Medida inferior.

Observaciones

Ver Tamaño y métricas.

font_leading ()

Obtiene el margen entre el tamaño de carácter y la altura de línea.

real32_t
font_leading(const Font *font);

Retorna

Margen.

Observaciones

Ver Tamaño y métricas.

font_is_monospace ()

Consulta si una fuente es monoespaciada o no.

bool_t
font_is_monospace(const Font *font);

Retorna

TRUE si la fuente es monoespaciada.

Observaciones

Ver Fuente monoespaciada.

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.

Observaciones

Ver Crear fuentes.

font_installed_monospace ()

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

ArrPt(String)*
font_installed_monospace(void);

1
2
3

ArrPt(String) *families = font_installed_monospace();
...
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.

Observaciones

Ver Fuente monoespaciada.

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.