Des sous-titres immobiles pendant que les mots s'allument

Jusqu'ici, nous avions testé chaque étape séparément : lire la page, écrire le storyboard, filmer le navigateur, poser la voix, faire le rendu. Ce matin, nous les avons enchaînées pour de vrai. Une adresse web réelle est entrée ; un plan, un enregistrement, une narration, un MP4 et une miniature soignée en sont sortis.

La structure a tenu. Le film alternait ses types de scènes comme prévu, avec une frise, un grand chiffre et un carton titre, chacun animé avec une énergie à la mesure de sa phrase. Puis notre contrôle qualité automatique, qui regarde chaque film produit, a signalé les sous-titres.

Nous ne nous sommes pas contentés de la note. Nous avons extrait les images une à une, et nous avons regardé.

Nos sous-titres sont de style karaoké. La phrase est posée en bas de l'image, et le mot prononcé s'allume dans une petite pastille. Cette pastille ajoutait au mot actif un peu de marge de chaque côté.

Ainsi, à chaque fois que la surbrillance avançait, la ligne se réorganisait. Une phrase qui tenait pendant qu'un mot court était allumé pouvait s'élargir juste assez pour toucher le bord quand un mot long prenait le relais.

Cela ne durait que quelques images, ce qui explique qu'un lecteur en pause semblait presque toujours impeccable. Mais ces quelques images sont précisément celles où le spectateur lit.

L'idée du correctif est simple : quand l'image bouge, la mise en page, elle, ne bouge pas. Nous avons fait deux changements.

• Chaque mot porte désormais la même marge, allumé ou non. Déplacer la surbrillance ne change que la façon dont le mot est peint, son fond, sa taille, une légère inclinaison, et rien de tout cela ne peut décaler la ligne. Nous avons resserré l'espace entre les mots pour rendre la place.
• Les phrases longues réduisent légèrement. Au-delà d'une trentaine de caractères, le sous-titre rétrécit, jamais sous 0,72 de sa taille normale, pour qu'un long mot composé tienne dans la zone sûre avec sa pastille.

Nous avons vérifié de la seule façon qui compte : nous avons rendu exactement la phrase qui touchait le bord, dans la vraie chaîne, et lu chaque image. Une ligne, centrée, entièrement dans le cadre, y compris à chaque passage de la surbrillance d'un mot au suivant.

Le même film montrait un second détail à corriger. Dans une scène d'affirmation, le mot mis en valeur se voyait mal.

Nous peignons les mots clés avec un dégradé tiré des couleurs de la marque, parce qu'un film doit ressembler à l'entreprise qu'il présente. Mais un site sombre donne une paire de couleurs sombres, et un dégradé sombre sur un fond sombre n'a rien d'une mise en valeur. Notre propre site, pagetovid.com, est sombre : nous l'avons constaté de nos yeux.

Nous avons ajouté une seule garde, textGradient, appliquée partout où des mots sont peints ainsi : mise en valeur des affirmations, chiffres clés, grand nombre central, compteurs et guillemet de citation. Quand les couleurs de la marque ne ressortent pas sur la scène, une paire lisible prend leur place. Le contrôle compare la luminosité des couleurs à celle de la scène : une marque sombre sur un thème sombre, ou pâle sur un thème clair, s'efface au moment précis où elle disparaîtrait.

Pour qui fait une vidéo, le résultat est discret, et c'est tout l'intérêt. La ligne que vous lisez reste en place, la surbrillance suit la voix, et les mots sur lesquels le film s'appuie restent visibles, quelles que soient les couleurs de votre site.

Cela a aussi installé deux habitudes. Une note automatique nous dit où regarder ; les images nous disent pourquoi. Et tout ce qui change pendant la lecture, une surbrillance, un zoom, une transition, se teste en mouvement, image par image, jamais sur une image figée.

Découvrez comment sous-titres, voix et images s'assemblent sur la page fonctionnalités, ou collez votre propre adresse sur /new et regardez les mots s'allumer.