0

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

有什么方法可以申请或另一个上标格式标记来实现与代码片段中相同的预期结果？

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" width="480" height="270"> 
  <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>
4

1 回答 1

0

根据@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" width="480" height="270"> 
  <track label="English" default="" kind="subtitles" srclang="en" src="data:text/vtt;charset=utf-8;base64,V0VCVlRUIEZJTEUNCg0KMQ0KMDA6MDA6MDAuMTAwIC0tPiAwMDowMDowNS4wMDANClN1YnRpdGxlIGxpbmU8Yy5zdXA+wrnvuZDCsu+5kMKzPC9jLnN1cD4=">
</video>

于 2021-10-18T19:20:02.583 回答