0

I'm trying to add reference numbers as superscript on video subtitles.

Is there any way to apply or another superscript formatting tag to achieve the same expected result as in the code snippet?

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>

The VTT file content (base64 encoded as 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>
F.Igor
  • 4,119
  • 1
  • 18
  • 26
  • 1
    I know that you can add CSS to a subtitle with the ::cue selector. https://codepen.io/ste-xx/pen/mdMPXbE but unfortunately vertical-align is not supported for the ::cue selector https://developer.mozilla.org/en-US/docs/Web/CSS/::cue – ste-xx Oct 18 '21 at 13:17

1 Answers1

0

Following the suggestion of @ste-xx I've tried different CSS properties listed at https://developer.mozilla.org/en-US/docs/Web/CSS/::cue (permitted ::cue CSS properties) but none of them could change the vertical position of the superscript text to the top of the line.

So I've ended up using unicode superscript characters instead of relying on <sup></sup> tags. Only added some styling to highlight the change.

By the way, I'm using "small comma" (U+FE50) as separator, but this character is using a wide space separator I can't remove.

¹﹐²﹐³

Now I'm looking for a better "superscript comma" alternative character to make it look better.

/*
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>
F.Igor
  • 4,119
  • 1
  • 18
  • 26