Subtítulos que no se mueven cuando las palabras se iluminan

Hasta hoy habíamos probado cada etapa por separado: leer la página, escribir el guion gráfico, grabar el navegador, poner la voz, renderizar. Esta mañana las encadenamos de verdad. Entró una dirección web real y salieron un plan, una grabación, una narración, un MP4 y una miniatura diseñada.

La estructura aguantó. El vídeo alternaba sus tipos de escena como queríamos, con una línea de tiempo, una gran cifra y un rótulo, cada uno con un movimiento a la altura de su frase. Luego nuestro control de calidad automático, que revisa cada vídeo, señaló los subtítulos.

No nos quedamos con la nota. Extrajimos los fotogramas uno a uno y miramos.

Nuestros subtítulos son estilo karaoke. La frase está abajo del todo y la palabra que se pronuncia se ilumina dentro de una pequeña píldora. Esa píldora le daba a la palabra activa un poco de margen extra a cada lado.

Así que cada vez que el resaltado avanzaba, la línea se recolocaba. Una frase que cabía mientras se iluminaba una palabra corta podía ensancharse lo justo para tocar el borde cuando le tocaba a una palabra larga.

Duraba solo unos fotogramas, por eso un reproductor en pausa casi siempre se veía perfecto. Pero esos fotogramas son justo cuando el espectador está leyendo.

La idea del arreglo es sencilla: mientras la imagen se mueve, la maquetación no. Hicimos dos cambios.

• Cada palabra lleva ahora el mismo margen, iluminada o no. Mover el resaltado solo cambia cómo se pinta la palabra, su fondo, su tamaño, una ligera inclinación, y nada de eso puede desplazar la línea. Ajustamos el espacio entre palabras para recuperar sitio.
• Las frases largas se reducen con suavidad. A partir de unos 30 caracteres el subtítulo encoge, nunca por debajo de 0,72 de su tamaño normal, para que incluso una palabra compuesta larga quepa en la zona segura con su píldora.

Lo comprobamos como de verdad cuenta: renderizamos la misma frase que tocaba el borde, en la cadena real, y leímos cada fotograma. Una línea, centrada, entera dentro de la imagen, también en cada paso del resaltado de una palabra a la siguiente.

El mismo vídeo mostraba un segundo detalle que mejorar. En una escena de afirmación, la palabra destacada apenas se veía.

Pintamos las palabras clave con un degradado hecho con los colores de marca del sitio, porque un vídeo debe parecerse a la empresa que presenta. Pero un sitio oscuro da una pareja de colores oscuros, y un degradado oscuro sobre fondo oscuro no destaca nada. Nuestro propio sitio, pagetovid.com, es oscuro, así que lo vimos con nuestros ojos.

Añadimos una sola protección, textGradient, y la usamos en todos los sitios donde pintamos palabras así: afirmaciones destacadas, cifras, el gran número central, contadores y las comillas de cita. Cuando los colores de marca no destacan sobre la escena, una pareja legible ocupa su lugar. La comprobación compara el brillo de los colores con el de la escena: una marca oscura sobre un tema oscuro, o pálida sobre uno claro, se aparta justo cuando iba a desaparecer.

Para quien hace un vídeo, el resultado es discreto, y de eso se trata. La línea que lees se queda quieta, el resaltado sigue a la voz y las palabras en las que se apoya el vídeo siempre se ven, uses los colores que uses.

También nos dejó dos costumbres. Una nota automática nos dice dónde mirar; los fotogramas nos dicen por qué. Y todo lo que cambia durante la reproducción, un resaltado, un zoom, una transición, se prueba en movimiento, fotograma a fotograma, nunca sobre una imagen congelada.

Mira cómo se unen subtítulos, voz e imágenes en la página de funciones, o pega tu propia dirección en /new y mira cómo se iluminan las palabras.