Guide détaillé de la syntaxe des sous-titres WebVTT : guide de développement et de débogage des horodatages au style

La première ligne d'un fichier WebVTT standard doit être la déclaration WEBVTT. La déclaration peut être suivie d'un espace et d'un texte de description de fichier, et les différents blocs structurels sont séparés par des lignes vides. La plupart des lecteurs HTML5 ne parviennent pas à analyser correctement les fichiers qui ne contiennent pas l'en-tête WEBVTT.

Les blocs de commentaires NOTE sont utilisés pour ajouter des annotations de développement ou des descriptions de sous-titres, et prennent en charge le contenu sur une ou plusieurs lignes. Ils ne sont pas rendus ni affichés par les lecteurs. Pendant le développement et le débogage, les blocs NOTE peuvent être utilisés pour marquer les paragraphes de sous-titres nécessitant une modification, sans affecter le résultat de lecture final.

Chaque cue de sous-titre se compose d'un horodatage et d'un texte d'affichage. Le format d'horodatage prend en charge deux styles de séparateur de millisecondes : le point et la virgule. La plupart des navigateurs modernes ne prennent en charge que la notation avec point.

Le champ heure dans les horodatages est optionnel. Les sous-titres d'une durée totale inférieure à une heure peuvent omettre le champ heure, ce qui donne le format MM:SS.sss. Le format complet est HH:MM:SS.sss. L'heure de début et l'heure de fin sont séparées par le symbole -->.

WebVTT prend en charge six balises en ligne standard pour modifier le style d'affichage d'une partie du texte. Parmi celles-ci, b, i et u correspondent respectivement au gras, à l'italique et au souligné, en suivant les mêmes règles que les balises HTML correspondantes. Les développeurs peuvent les utiliser directement lors de l'écriture manuelle.

La balise ruby est utilisée pour les annotations pinyin, la balise lang est utilisée pour marquer du texte dans différentes langues, et la balise voice est utilisée pour étiqueter le locuteur. Ces balises sont principalement utilisées pour la classification des métadonnées, et les lecteurs peuvent implémenter un rendu différencié sur cette base.

Le pseudo-élément ::cue est un pseudo-élément CSS dédié fourni pour les sous-titres WebVTT. Les développeurs peuvent utiliser ce pseudo-élément pour modifier le style par défaut de tous les sous-titres sur une page web, et il prend en charge les propriétés CSS courantes comme color, font et background.

Les blocs STYLE sont utilisés pour définir des styles globaux ou spécifiques à une cue à l'intérieur du fichier WebVTT. Les blocs REGION sont utilisés pour définir des régions de rendu de sous-titres, et prennent en charge l'affichage de différents sous-titres dans plusieurs régions simultanément, ce qui est couramment utilisé pour l'affichage côte à côte de sous-titres multilingues.

L'élément HTML5 track est utilisé pour importer des fichiers de sous-titres WebVTT externes. L'attribut kind de l'élément track définit le type de sous-titre, qui a cinq valeurs possibles : subtitles, captions, descriptions, chapters, metadata.

Parmi celles-ci, subtitles correspondent aux sous-titres traduits généraux, captions correspondent aux sous-titres pour les utilisateurs sourds ou malentendants incluant des annotations de sons environnementaux, chapters correspondent à la navigation par chapitres, et metadata stocke les métadonnées de page et n'est pas affiché. Différents lecteurs gèrent l'attribut kind avec un comportement différencié.