Qué es el Font Boosting

Un navegador móvil usa un viewport de layout de unos 980 píxeles de ancho por defecto. Si el desarrollador no aporta otras posibilidades, las líneas de texto serán mucho más largas que el ancho de la pantalla, apareciendo con un tamaño de fuente diminuto. Tras la presentación de la página el usuario puede hacer zoom para que el tamaño del texto sea legible, pero las líneas continuarán siendo más largas que el ancho de pantalla. Aún puede desplazarse por cada línea hacia la derecha y luego volver a la izquierda. Pero es muy incómodo para leer un texto muy largo.

Los navegadores intentan solucionar este problema con un algoritmo aumentador de texto que, de forma automática y al cargar la página (o también al hacer doble toque sobre la página o una parte de ella), incrementa el tamaño de la fuente de texto para que sea legible. Al mismo tiempo ajusta el ancho del viewport para que el texto no sobresalga del ancho de pantalla.

Los distintos navegadores no han unificado las denominaciones. Nombres como text inflating, text autosizing, font boosting o text size adjust son usados para definir una funcionalidad más o menos similar. No debe confundirse con la propiedad CSS font-size-adjust que no tiene nada que ver con esto.

En este tema usaré el término font boosting para referirme a esa funcionalidad de ajuste automático de texto en los navegadores móviles.

Hay un borrador del editor W3C denominado Ajuste de Tamaño de Texto en Móviles (CSS Mobile Text Size Adjustment Module Level 1) donde se expone la propiedad text-size-adjust. Admite los valores none, auto y un porcentaje. Con none se desactiva el ajuste automático de texto, con auto se activa y con el porcentaje se activa a esa proporción. Pero este documento no está ni siquiera en fase previa de estándar (Working Draft), por lo que puede sufrir modificaciones o incluso que no llegue a ser aplicado. La situación parece ser la siguiente:

  • El algoritmo de ajuste automático de texto sólo tiene aplicación en navegadores móviles. No se implementa en navegadores de sobremesa.
  • Firefox Mobile (Gecko) aplica el algoritmo Text Inflation y soporta text-size-adjust desde la versión 11.0 con prefijo -moz.
  • Safari iOS aplica ese ajuste de texto, soportando text-size-adjust con prefijo -webkit.
  • La versiones 18 a 24 de Chrome para Android implementa ese algoritmo denominándolo font boosting. Soporta -webkit-text-size-adjust. A partir de la versión 25 esa funcionalidad pasa a denominarse text autosizing pero ya no soporta text-size-adjust (al menos hasta la actual 29).
  • Windows Phone OS 8.0 también tiene esa funcionalidad, soportando -ms-text-size-adjust.
  • Opera Mobile (desde versión 14) aplica también ajuste de texto, pero no tiene soporte para text-size-adjust (al menos hasta la actual versión 15)

Las siguientes referencias nos pueden aclarar más cosas:

Probando font boosting en algunos navegadores móviles

El navegador del Android 4.2.2 que viene instalado por defecto en el móvil Samsung S4 tiene un ajuste de configuración que denomina aumentador de texto. Esta utilidad, que no existía en versiones anteriores a la 4, se puede configurar en los ajustes de accesibilidad del navegador. Viene activado por defecto:

Ajuste font bosting activado
Ajuste de texto automático en el navegador Chromium 18 que viene instalado con el móvil Samsung con Android 4.2.2

Ese navegador, que podemos denominar Chromium, es del Webkit 535.19 versión 18 (equiparable al Chrome 18). En ese móvil también podemos instalar al mismo tiempo el navegador Chrome. Con la versión actual Chrome 29 Webkit [Blink] 537.36 vemos que no tiene la configuración de font boosting, aunque si aplica ese algoritmo. Los otros dos navegadores que también tengo instalados en el Samsung S4 son Firefox 23 y Opera 15. Ambos también aplican font boosting. En Firefox no encuentro ninguna configuración para desactivarlo. En Opera si está la configuración de ajustar texto (aunque si lo activamos significa lo contrario, que desactivamos el font boosting o ampliación de texto).

Para probar esta funcionalidad hacemos la página de ejemplo font boosting 1, una página que no incluye el elemento HTML <meta name="viewport">. Este es el código eliminando el texto de los párrafos:

Las siguientes capturas de pantalla son del navegador Chromium 18, aunque comentaré también el resultado en los otros tres navegadores Chrome 29, Firefox 23 y Opera 15. Si desactivamos la configuración del font boosting en los navegadores Chromium y Opera, puesto que en Chrome y Firefox no es aparentemente posible, la página se nos presenta así en Chromium y Opera:

Font bosting
Sin font boosting y sin meta viewport

La página se renderiza en un viewport de mayor tamaño que el ancho de pantalla y por eso el tamaño de la fuente del texto se hace muy pequeño. En este caso el navegador no aplica ningún efecto de font boosting y el texto es totalmente ilegible por su diminuto tamaño, a no ser que hagamos zoom sobre el mismo. Si volvemos a activar la configuración del font boosting en Chromium y Opera veremos en éstos así como en Chrome y Firefox (que siempre tienen activado el font boosting) algo similar a esta captura en Chromium:

Font boosting
Con font boosting y sin meta viewport

Se observa que el algoritmo de ampliación de texto se aplica sobre los cuerpos de texto solamente. Los elementos previos (icono y encabezado) no se amplian en la misma proporción que lo hace el resto. Podemos ver un detalle de la misma superficie en la parte superior izquierda de esa página en distintos navegadores tal como se presenta tras la carga y sin ejecutar ninguna otra acción en el móvil (como zoom o doble toque). Recordemos que el ejemplo anterior no tiene el meta viewport. La última captura es de la misma página pero agregándole esa meta etiqueta, en cuyo caso el navegador no aplicará font boosting. Esta vista nos permite ver la disposición original de la página y en que medida el font boosting modifica el layout del autor.

Font boosting en Chrome 18
Con font boosting en Chromium 18
 
Font boosting en Chrome 29
Con font boosting en Chrome 29
 
Font boosting en Opera 15
Con font boosting en Opera 15
 
Font boosting en Firefox 23
Con font boosting en Firefox 23
 
Sin font boosting en Chromium 18
Con meta viewport en Chromium 18, no se aplica font boosting y no se modifica el layout

Si agregamos la meta etiqueta viewport aparecerá como en la siguiente captura de pantalla en los cuatro navegadores (ejemplo font boosting 2). Se observa que todo el conjunto se adapta al ancho de pantalla en las proporciones originales.

Font bosting
Con meta etiqueta viewport el navegador no aplica font boosting.

La ejecución con el meta viewport es la misma tanto si está o no activado el font boosting. Con esa meta etiqueta hemos forzado para que el navegador use el ancho de pantalla para presentar la página, no aplicándose el algoritmo del font boosting. Es la situación óptima, pues el texto y contenidos se presentan ajustados a la pantalla, con sus proporciones originales y, sobre todo, legibles.

Font boosting y meta etiqueta viewport agregada con JavaScript

En un tema anterior sobre adaptación de dispositivos expuse el apartado sobre la regla @viewport y la meta-etiqueta viewport. Decía que esa regla sería la adecuada para incorporar el viewport del ancho de pantalla, pero que no es soportada por todos los navegadores y que la especificación aún está por determinar. Incorporar la meta etiqueta viewport es posible, pero si tenemos muchas páginas que modificar agregando ese meta luego cuando deseemos usar la regla tendremos que volver a modificar esas páginas para quitar ese elemento.

La solución propuesta era agregar la meta etiqueta con JavaScript con un código como el siguiente que vamos a agregar a nuestros ejemplos anteriores:


//Archivo carga-meta.js var metaViewport = document.createElement("meta"); metaViewport.name = "viewport"; metaViewport.content = "width=device-width, initial-scale=1.0"; document.getElementsByTagName("head")[0].appendChild(metaViewport);

Lo hacemos vinculándolo desde un archivo de forma asíncrona:


<script src="carga-meta.js" async></script>

Resulta entonces que el navegador Chromium (y sólo este) si aplicará el font boosting incrementando enormemente el tamaño de la fuente (ejemplo font boosting 3):

Font bosting
Aplicando meta viewport con JavaScript en Chromium 18 y con font boosting activado.

Por suerte podemos desactivar el font boosting usando un parche:


<style> div { max-height: 100000px; } </style> <script src="carga-meta.js" async></script>

Ese max-height en todos los <div> desactiva el font boosting (ejemplo font boosting 4)

Font bosting
Usando max-height: 100000px en los <div>

De esa forma logramos que tenga la misma apariencia visual que la del segundo ejemplo usando el meta viewport.

Uso de max-height en los div para desactivar font boosting

Dije antes que Chromium 18 y Opera 15 tenían un ajuste de configuración para desactivar el font boosting, mientras que Chrome 29 y Firefox 23 no disponían de esa posibilidad. Usando la propiedad max-height podemos desactivar el font boosting en los cuatro navegadores (incluso aunque el ajuste de configuración esté activado en Opera o Chromium), como muestran estas cuatro capturas parciales de pantalla de Chromium, Chrome, Firefox y Opera del ejemplo font boosting 5, una página que no incluye el meta viewport:

Font bosting desactivado en Chromium 18
Chromium 18
 
Font bosting desactivado en Chrome 29
Chrome 29
 
Font bosting desactivado en Firefox 23
Firefox 23
 
Font bosting desactivado en Opera 15
Opera 15

La página se presenta renderizada en el viewport inicial que es mucho más ancho que la pantalla, luego ajusta para meter toda la página en el ancho de pantalla y por eso resulta un tamaño de texto diminuto. Esto es evidencia de que no se está aplicando ningún font boosting.

No me es fácil entender cómo funciona el algoritmo de font boosting, pero pienso que aplicamos max-height en todos los <div> dado que el algoritmo de font boosting actúa marcando los contenedores de tipo %Block ascendientes de otros que contienen texto que supere cierta longitud. Es decir, si se encuentran por ejemplo párrafos <p> con mucho texto entonces se marcan los ascendientes. Si no hay ninguno será <body> o, en todo caso, <html>. Pero en mi caso suelo usar un contenedor <div id="total"> exactamente por debajo de <body> que alberga todo el contenido de la página. Los ejemplos anteriores también lo tienen, como puede comprobar en el código expuesto más arriba. Por lo tanto basta con dar máxima altura a los <div> para conseguir desactivar el font boosting, puesto que éste no será aplicado en contenedores con altura distinta de auto. Al especificar una máxima altura el algoritmo parece descartar estos contenedores ascendientes como objetivo para aumentar el texto de alguno de sus descendientes. Usamos un valor de 100000px puesto que es previsible que ningún <div> pueda llegar a alcanzar esa altura.

Usando text-size-adjust para desactivar font boosting

Por otro lado podríamos usar la propiedad text-size-adjust con valor none para desactivar el font boosting. En la página de ejemplo font boosting 6 hemos agregado el estilo text-size-adjust: none usando los prefijos -webkit, -moz y -ms, con este resultado en los navegadores que tengo instalados en el Samsung S4 con Android 4.2.2:

Font bosting SI desactivado en Firefox 23
Font bosting SI desactivado en Firefox 23
 
Font bosting NO desactivado en Chromium 18
Font bosting NO desactivado en Chromium 18
 
Font bosting NO desactivado en Chrome 29
Font bosting NO desactivado en Chrome 29
 
Font bosting NO desactivado en Opera 15
Font bosting NO desactivado en Opera 15

Vemos que sólo Firefox 23 desactiva el font boosting. Los otros navegadores ignoran esta propiedad de estilo.