如何在视频字幕/字幕 (VTT) 中添加上标符号

Posted 2023-03-07

【中文标题】如何在视频字幕/字幕 (VTT) 中添加上标符号

【英文标题】：How can I add a superscript symbol to video subtitle/captions (VTT)

【发布时间】：2021-10-14 19:37:41

【问题描述】：

我正在尝试在视频字幕上添加参考编号作为上标。

有没有办法应用 或其他上标格式化标签来达到与代码 sn-p 相同的预期结果？

https://codepen.io/fraigo/pen/ExvVEze

<div>Expected: Subtitle line<sup>1,2,3</sup></div>
<video poster="img/video-background.aa0792cb.jpg" preload src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" playsinline class="video-content" controls="controls"  > 
  <track label="English" default="" kind="subtitles" srclang="en" src="data:text/vtt;charset=utf-8;base64,V0VCVlRUIEZJTEUNCg0KMQ0KMDA6MDA6MDAuMTAwIC0tPiAwMDowMDowNS4wMDANClN1YnRpdGxlIGxpbmU8c3VwPjEsMiwzPC9zdXA+">
</video>

VTT 文件内容（base64 编码为data:text/vtt;charset=utf-8;base64,V0VCVlRUIEZJTEUNCg0KMQ0KMDA6MDA6MDAuMTAwIC0tPiAwMDowMDowNS4wMDANClN1YnRpdGxlIGxpbmU8c3VwPjEsMiwzPC9zdXA+）

WEBVTT FILE

1
00:00:00.100 --> 00:00:05.000
Subtitle line<sup>1,2,3</sup>

【问题讨论】：

我知道您可以使用 ::cue 选择器将 CSS 添加到字幕中。 codepen.io/ste-xx/pen/mdMPXbE 但不幸的是 ::cue 选择器不支持垂直对齐 developer.mozilla.org/en-US/docs/Web/CSS/::cue

【参考方案1】：

按照@ste-xx 的建议，我尝试了https://developer.mozilla.org/en-US/docs/Web/CSS/::cue 中列出的不同 CSS 属性（允许 ::cue CSS 属性），但它们都不能将上标文本的垂直位置更改为行首.

所以我最终使用了 unicode 上标字符，而不是依赖 <sup></sup> 标签。仅添加了一些样式以突出显示更改。

顺便说一句，我使用“小逗号”（U+FE50）作为分隔符，但这个字符使用了我无法删除的宽空格分隔符。

¹﹐²﹐³

现在我正在寻找更好的“上标逗号”替代字符以使其看起来更好。

/*
WEBVTT FILE

1
00:00:00.100 --> 00:00:05.000
Subtitle line<c.sup>¹﹐²﹐³</c.sup>
*/

::cue(.sup)
  color: yellow;
  font-family: sans-serif;
  font-stretch: condensed;

<div>Expected: Subtitle line<sup>1,2,3</sup></div>
<video poster="img/video-background.aa0792cb.jpg" preload src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" playsinline class="video-content" controls="controls"  > 
  <track label="English" default="" kind="subtitles" srclang="en" src="data:text/vtt;charset=utf-8;base64,V0VCVlRUIEZJTEUNCg0KMQ0KMDA6MDA6MDAuMTAwIC0tPiAwMDowMDowNS4wMDANClN1YnRpdGxlIGxpbmU8Yy5zdXA+wrnvuZDCsu+5kMKzPC9jLnN1cD4=">
</video>