Italique, gras, couleur : les balises dans les sous-titres SRT et VTT

Balises WebVTT documentées

Selon la documentation MDN, le texte d'un sous-titre WebVTT accepte :

• <i> italique, <b> gras, <u> souligné ;
• <c.classe> : classe stylable par CSS ;
• <v Nom> : indication de locuteur ;
• <lang fr> : passage dans une autre langue ;
• <ruby> avec <rt> : annotations ;
• des horodatages internes pour un effet « karaoké ».

Chaque balise ouvrante doit être fermée, sauf l'horodatage interne.

Et en SRT ?

Le SRT n'a pas de spécification officielle unique. Les balises <i>, <b>, <u> y sont répandues, parfois avec <font color="…">, mais chaque lecteur décide de ce qu'il affiche. Pour un fichier destiné à plusieurs plateformes, limitez-vous aux trois balises de base, voire à aucune.

Échappement

En WebVTT, les caractères & et < ne peuvent pas apparaître tels quels dans le texte : on écrit & et <. Dans un SRT, un « < » littéral risque d'être pris pour une balise par certains lecteurs ; évitez-le ou vérifiez le rendu.

À la conversion

• SRT → VTT : le texte et les balises de base sont conservés ; le convertisseur vous avertit de ce qu'il ne peut pas garantir.
• VTT → SRT : les éléments propres au VTT (positionnement, notes, classes, voix) n'ont pas d'équivalent en SRT ; ils sont perdus et listés.

Voir SRT ou VTT : les différences.

Bon usage

L'italique sert pour une voix hors champ, une langue étrangère ou un titre d'œuvre. Évitez les couleurs pour porter le sens : certains spectateurs ne les perçoivent pas ou ne les voient pas affichées.

Exemple

1
00:00:01,000 --> 00:00:03,500
Il a répondu : <i>« Peut-être. »</i>

Le même sous-titre en WebVTT s'écrit avec un point avant les millisecondes et reste identique pour le texte. Si le lecteur ne gère pas la balise, il affiche en général le texte sans la mise en forme, ou bien les balises elles-mêmes : testez dans le lecteur final avant de publier tout un fichier.

Positionner un sous-titre en WebVTT

Le WebVTT permet de déplacer un sous-titre, par exemple quand le bas de l'image montre une information importante. Les réglages se placent après l'horodatage, sur la même ligne :

00:00:12.000 --> 00:00:15.000 line:10%
Ce sous-titre s'affiche en haut de l'image.

Le réglage line fixe la position verticale, position et align la position horizontale et l'alignement. Le SRT n'a pas de mécanisme commun pour cela ; certains lecteurs comprennent des codes hérités d'autres formats, d'autres non.

Indiquer le locuteur avec la balise de voix

00:00:20.000 --> 00:00:22.500
<v Claire>Tu as vérifié le fichier ?

La balise <v> associe la réplique à un nom de locuteur, que le lecteur peut utiliser pour le style, sans forcément l'afficher. Pour que le spectateur voie le nom, écrivez-le aussi dans le texte.

Styler les sous-titres d'une page web

Dans une page HTML, le sélecteur CSS ::cue s'applique au texte des sous-titres d'une vidéo, et ::cue(.classe) au texte marqué par une balise de classe. Les propriétés acceptées sont limitées (couleur, fond, police, entre autres), et le rendu dépend du navigateur.

Questions fréquentes

Le gras est-il conseillé pour insister sur un mot ?

Avec modération : un sous-titre est lu vite, et un mot en gras attire l'œil au détriment du reste. L'italique reste la mise en forme la plus courante et la mieux reconnue.

Les plateformes vidéo affichent-elles les balises ?

Elles en reconnaissent certaines, ignorent les autres ou les retirent à l'import. Envoyez un court fichier de test et regardez le rendu avant de styler tout un film.