Desactivar Font Boosting
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.
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 soportatext-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:
- En Mozilla (Firefox) hay una descripción del problema Improving font size readability on Firefox for Android. En Developer Mozilla hay una página para exponer la propiedad
text-size-adjust
. - En lo que respecta a Chrome podemos encontrar cosas en Webkit Bugzilla y también en Chromium Issues.
- En la página iOS Developer (Safari) se expone la funcionalidad de ajuste de tamaño de texto.
- En la página de Web Development for Windows Phone también expone el ajuste de texto con CSS.
- En la página Font Inflation, Fennec, and You explica con detalle el funcionamiento de font inflation.
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:
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:
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:
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.
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.
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):
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)
<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:
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:
Vemos que sólo Firefox 23 desactiva el font boosting. Los otros navegadores ignoran esta propiedad de estilo.