Comment styliser et positionner des sous-titres WebVTT : paramètres de repère, blocs STYLE et CSS ::cue

En WebVTT, le positionnement et l’apparence reposent sur deux mécanismes différents. Les paramètres line, position, size, align et vertical définissent l’emplacement, l’alignement et les dimensions de la boîte d’un repère. Les blocs STYLE et le pseudo-élément CSS ::cue servent à modifier les propriétés visuelles prises en charge.

Cette séparation évite une erreur fréquente : tenter de déplacer un sous-titre avec du CSS de mise en page ordinaire. En WebVTT natif, la position appartient aux paramètres du repère. La couleur, la police ou l’arrière-plan appartiennent au style. Un fichier peut respecter la syntaxe de la spécification sans produire un rendu strictement identique dans tous les navigateurs, systèmes, lecteurs personnalisés ou services de diffusion.

Avant d’aller plus loin, consultez la définition d’un fichier VTT si vous découvrez le format. Le guide pour créer un fichier VTT reprend sa structure générale.

Associer la piste WebVTT à une vidéo HTML

L’élément HTML <track> relie une ressource externe de texte synchronisé à un élément <video>. Le standard HTML du WHATWG définit le traitement des pistes, de leur langue, de leur libellé et de leurs repères.

<video controls src="entretien.mp4">
  <track
    default
    kind="captions"
    srclang="fr"
    label="Français"
    src="sous-titres-fr.vtt">
</video>

La valeur kind="captions" convient à une piste qui restitue les dialogues, les effets sonores, les indications musicales et les autres informations audio utiles lorsque le son est indisponible ou difficile à percevoir. La valeur kind="subtitles" sert à une transcription ou une traduction des dialogues pour un public qui entend le son, mais ne le comprend pas. Pour une piste de sous-titres, srclang doit contenir une balise de langue BCP 47 valide, par exemple fr, fr-FR ou fr-CA.

L’attribut label fournit le nom présenté dans le menu du lecteur. L’attribut booléen default indique que la piste doit être activée lorsque les préférences de l’utilisateur n’en désignent pas une autre comme plus appropriée. Il ne faut donc pas l’utiliser pour contourner les choix du spectateur. Si un lecteur remplace le rendu natif des pistes de texte par sa propre couche de sous-titres, vérifiez séparément sa prise en charge de WebVTT.

Positionner les repères avec line, position, size et align

Les paramètres d’un repère se placent après son horodatage de fin. Ils sont séparés par des espaces, et leur nom est relié à leur valeur par deux-points. Les noms et mots-clés reconnus sont sensibles à la casse : écrivez-les en minuscules. Ne répétez pas le même paramètre sur une ligne d’horodatage.

WEBVTT

00:00:02.000 --> 00:00:05.000 line:85% position:50% size:70% align:center
Sous-titre centré près du bas de l’image.

00:00:06.000 --> 00:00:09.000 line:12% position:10%,line-left size:38% align:start
Étiquette placée dans la zone supérieure gauche.

La spécification WebVTT du W3C, publiée comme Candidate Recommendation Draft le 20 mai 2026, définit cinq paramètres principaux de placement :

Choisir une ligne avec line

Pour un repère horizontal, line règle la position verticale. Une valeur numérique sans signe de pourcentage utilise un placement par lignes. Les nombres positifs sont comptés depuis le haut, à partir de la ligne 0, tandis que les nombres négatifs sont comptés depuis le bas. Ainsi, line:-1 demande la dernière ligne disponible.

00:00:10.000 --> 00:00:13.000 line:-1
Repère placé sur la dernière ligne disponible.

Une valeur en pourcentage demande un décalage proportionnel dans la fenêtre vidéo et désactive l’alignement sur des lignes numérotées. Elle peut être suivie, après une virgule, de start, center ou end pour préciser quelle partie de la boîte est alignée sur ce décalage.

00:00:14.000 --> 00:00:17.000 line:20%,start
Repère proche du haut, avec le début de la boîte sur le décalage.

Ce placement peut dégager une zone occupée en permanence par un bandeau, un titre ou une incrustation. Il ne suit toutefois pas un visage ou un objet en mouvement : ce réglage n’est pas un système de suivi visuel.

Délimiter une zone avec position et size

Pour un texte horizontal, position indique un point sur la largeur de la fenêtre vidéo. La valeur facultative située après la virgule précise quelle partie de la boîte est attachée à ce point. Avec position:10%,line-left size:35%, le côté line-left est ancré à 10 % et la boîte occupe 35 % de la largeur.

00:00:18.000 --> 00:00:22.000 position:10%,line-left size:35% align:start
<v Amélie>Je suis entrée par ce côté.

00:00:18.000 --> 00:00:22.000 position:90%,line-right size:35% align:end
<v Karim>Et moi par l’autre côté.

position place la boîte, tandis que align aligne le texte dans cette boîte. Il ne faut pas employer align comme substitut à un placement explicite. Les valeurs logiques start et end suivent la direction de base de chaque ligne. Les valeurs left et right correspondent à des côtés physiques.

Réduire size diminue également l’espace disponible pour le texte. Une boîte de 35 % peut fonctionner pour une réplique courte et provoquer trop de retours à la ligne après une modification ou une traduction.

Comprendre le changement d’axes en écriture verticale

vertical:rl produit des lignes verticales qui progressent vers la gauche. vertical:lr les fait progresser vers la droite. Après activation de l’écriture verticale, line contrôle la position horizontale, position la position verticale et size la hauteur de la boîte.

00:00:23.000 --> 00:00:27.000 vertical:rl line:0 position:10% size:45% align:start
Texte vertical

Ce mode répond à des besoins réels d’écriture verticale. Il ne doit pas être considéré comme une simple rotation décorative de sous-titres français. Les régions WebVTT constituent également un cas particulier : la spécification ne définit les régions que pour les repères horizontaux.

Intégrer le style dans le fichier avec un bloc STYLE

Un bloc STYLE conserve les règles visuelles compatibles dans le fichier VTT. Il doit se trouver après l’en-tête WEBVTT et les éventuelles métadonnées d’en-tête, mais avant le premier repère. Un bloc STYLE placé après le premier repère n’est pas traité comme un bloc de style valide.

WEBVTT

STYLE
::cue {
  color: white;
  background-color: rgb(0 0 0 / 70%);
  font-family: sans-serif;
  text-shadow: 0 1px 2px black;
}

00:00:02.000 --> 00:00:05.000
Un sous-titre auquel le style global est appliqué.

Une ligne vide met fin au bloc. Il ne faut donc pas insérer de ligne entièrement vide au milieu de la feuille CSS embarquée. La séquence --> utilisée comme flèche d’horodatage est également interdite dans le bloc. Plusieurs blocs STYLE peuvent précéder le premier repère, avec des blocs de commentaire NOTE entre eux.

Le bloc STYLE ne contrôle pas le placement. Des déclarations ordinaires comme left, top, margin, transform ou position:absolute ne remplacent pas line et position. Les propriétés qui ne font pas partie de l’ensemble admis pour les repères sont ignorées par le modèle de traitement défini dans la spécification.

Employer CSS ::cue dans la page Web

Lorsque vous contrôlez la page contenant la vidéo, les règles ::cue peuvent être placées dans la feuille CSS du document. Un sélecteur de vidéo permet de limiter leur portée aux éléments correspondants.

video.formation::cue {
  color: white;
  background-color: rgb(0 0 0 / 72%);
  font-family: system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.3;
  text-shadow: 0 1px 2px black;
}

La spécification WebVTT autorise un ensemble défini de propriétés CSS pour les repères. Il comprend la couleur, les propriétés d’arrière-plan, les propriétés de police, la hauteur de ligne, l’opacité, la visibilité, la décoration du texte, l’ombre, le contour, l’espace blanc ainsi que des propriétés liées au texte combiné vertical et à la position du ruby. Les autres propriétés doivent être ignorées par le modèle de style WebVTT défini dans la spécification.

Il ne faut notamment pas compter sur les propriétés habituelles de boîte et de mise en page telles que padding, border-radius, Flexbox, Grid ou les transformations. Le pseudo-élément ne donne pas accès à une boîte HTML ordinaire. Utilisez les paramètres de repère pour le placement.

Le CSS de la page facilite une identité visuelle commune à plusieurs vidéos. Le bloc STYLE accompagne le fichier lorsqu’il est réutilisé ailleurs. Aucune de ces solutions ne dispense de tester la destination : un lecteur personnalisé peut remplacer le rendu natif, et un logiciel de montage ou un service de publication peut retirer ou ignorer certaines informations. Pour préparer ce type de transfert, consultez le guide sur la transcription VTT pour les monteurs vidéo.

Cibler un mot, un locuteur, une langue ou un repère

Le texte d’un repère WebVTT accepte un vocabulaire limité de balises, et non du HTML arbitraire. Il comprend notamment <b>, <i>, <u>, <c> pour les classes, <v> pour les voix, <lang> pour un changement de langue, ainsi que <ruby> et <rt>.

WEBVTT

STYLE
::cue(.amelie) {
  color: cyan;
}
::cue(.karim) {
  color: yellow;
}
::cue(i) {
  font-style: italic;
}

00:00:02.000 --> 00:00:05.000
<v.amelie Amélie>La porte est ouverte.

00:00:05.000 --> 00:00:08.000
<v.karim Karim>Je la vois. <i>Bruits de pas</i>

Une annotation de voix peut aussi être ciblée par un sélecteur d’attribut :

video::cue(v[voice="Amélie"]) {
  color: cyan;
}

Pour appliquer une règle à un seul repère, ajoutez un identifiant sur la ligne qui précède les horodatages, puis utilisez un sélecteur d’identifiant. Des caractères spéciaux ou un identifiant commençant par un chiffre peuvent nécessiter un échappement CSS ; un nom simple réduit donc les erreurs.

WEBVTT

STYLE
::cue(#titre-intro) {
  font-weight: bold;
  color: yellow;
}

titre-intro
00:00:00.000 --> 00:00:03.500 line:10% size:80%
Premier chapitre

Ne faites pas reposer une information essentielle uniquement sur la couleur. Le nom du locuteur, un effet sonore ou une emphase doit rester compréhensible si les préférences du spectateur ou le lecteur modifient la palette prévue.

Exemple complet de fichier VTT positionné et stylisé

WEBVTT

STYLE
::cue {
  color: white;
  background-color: rgb(0 0 0 / 70%);
  font-family: sans-serif;
  text-shadow: 0 1px 2px black;
}
::cue(.amelie) {
  color: cyan;
}
::cue(.karim) {
  color: yellow;
}

00:00:01.000 --> 00:00:04.000 line:-1 position:50% size:75% align:center
L’entretien commence.

00:00:04.000 --> 00:00:08.000 line:78% position:8%,line-left size:40% align:start
<v.amelie Amélie>Mon bureau se trouve à gauche.

00:00:05.500 --> 00:00:09.500 line:78% position:92%,line-right size:40% align:end
<v.karim Karim>Le mien est à droite.

00:00:10.000 --> 00:00:13.000 line:12% position:50% size:65% align:center
<i>Une notification apparaît au bas de l’écran.</i>

Le dernier repère est placé vers le haut afin de ne pas masquer la notification décrite. Les répliques d’Amélie et de Karim utilisent deux zones distinctes et se chevauchent dans le temps. Cette composition doit être testée avec les phrases définitives : la largeur du lecteur, le rapport d’image, la police, les commandes superposées et la gestion des collisions peuvent modifier le résultat.

Liste de contrôle avant publication

1. Vérifiez la structure. L’en-tête WEBVTT vient en premier, et des lignes vides séparent les blocs.
2. Contrôlez chaque horodatage. Une erreur de temps peut empêcher le traitement correct d’un repère, indépendamment de son style.
3. Testez plusieurs largeurs. Une boîte dimensionnée par size peut provoquer des retours à la ligne différents selon le lecteur.
4. Relisez les traductions longues. Les mêmes coordonnées ne conviennent pas nécessairement à toutes les langues.
5. Respectez les préférences utilisateur. Le rendu natif peut prendre en compte une taille, une couleur ou un contraste choisis par le spectateur.
6. Essayez chaque environnement cible. Vérifiez les navigateurs, appareils, lecteurs intégrés, logiciels de montage et services de publication réellement utilisés.
7. Conservez une copie maître sans style. Si une destination supprime les styles, vous pourrez créer une variante adaptée sans perdre le texte corrigé ni les horodatages.

Si vous partez d’un enregistrement audio ou vidéo, préparez d’abord un texte et des horodatages corrects. Le guide de transcription VTT présente ce flux de travail, et l’article sur la manière de convertir un audio en VTT couvre la création de la piste. Ajoutez ensuite seulement les paramètres de placement et les styles nécessaires pour préserver la lisibilité sans masquer les informations visuelles importantes.