How can I add a superscript symbol to video subtitle/captions (VTT) - subtitle

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>

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>

Related

How to stop TinyMCE to change the image size after editing its name?

I control the size of my image in a page by CSS imgType.
<img class="imgType" style="..." src="/image1.jpg" alt="..." />
If I edit the image to change its name only (the fields width & height stay empty and save the content of the editor, tiny writes a value for both the width and height.
<img class="imgType" style="..." src="/image2.jpg" alt="..." width="249" height="145" />
I tried to use object_resizing : false, but it does not do anything.
How can I stop tiny to write these values?
You can remove the image dimensions from the Insert/Edit Image dialog with:
image_dimensions: false
Docs:
https://www.tiny.cloud/docs/tinymce/6/image/#image_dimensions

Use pt (point) font sizes in summernote instead of px (pixel) sizing

I would like summernote to return font sizes in PT rather than PX. Any ideas. I have tried editing summernote.js but cannot find where the list of default font sizes is specified.
use pt rather than px, summernote automatically convert the font size in px.
Example -> if you set font size 36pt rather than 36px, summernote automatically convert 36pt to 48px.
If you use preview code in summernote editor,
<p><span style="font-size: 36px;">Hello</span><br/>
<span style="font-size: 36pt;">Hello</span></p>
output:
Hello -> 36px
Hello -> 48px

Adding a caption to IMG SRC when you need the text to stay on the right

how would I add a small caption under this image while keeping the text to the right?
<img src=".jpg" alt="lorum ipsum" width="350" height="240" class="alignleft size-medium wp-image-159" >
Many thanks.

Replacing Svg text with plain text in firefox

I've made a shape with a text inside and save it as svg (in ilustrator). The font I've chosen (AndaleMono) is working properly on Chrome, Safari and Opera, but Firefox is rendering another default font.
I would like to display the text in the shape in the browsers that can display the 'custom' font and display in Firefox a 'paragraph' tag with the text font taken from a #font-face rule.
The html tree looks something like this:
<svg class="text-shape">
<polygon points="-13.878,39.319 47.762,-3.634 389.206,108.691 323.906,147.925 "/>
<text transform="matrix(1 0 0 1 25.9165 19.0337)"><tspan x="0" y="0" font-family="'AndaleMono'" font-size="12">O es una </tspan><tspan x="-20.665" y="14.4" font-family="'AndaleMono'" font-size="12">mesa de centro </tspan><tspan x="-13.328" y="28.8" font-family="'AndaleMono'" font-size="12">cortada a laser</tspan></text>
</svg>
<p>O es una mesa de centro cortada a laser</p>
The svg element should be only displayed in the proper browser (and not displaying the paragraph tag) and viceversa.
Thanks

google-code-prettify xml indention

I have added line breaks in a generated xml doc.
<aa>"\n"
<bb>some text etc.</bb>"\n"
</aa>"\n"
this should end up as:
<aa>
<bb>some text etc.</bb>
</aa>
Is this possible with google-code-prettify - or should I do it myself in the code that generates the xml?
Thanks in advance
Prettify can style source code, but it does not re-indent or break lines.
It will preserve tags in your code so, so you can indent your code using line-breaks or you can use HTML layout to do that as in
<style>
code.prettyprint { display: block; white-space: pre-wrap }
div.el {margin-left: 2em}
</style>
<code class="prettyprint">
<div class=el><aa><div class=el><bb>...</bb></div></aa></div>
</code>
The <div class=el> uses margin-left to indent by a certain amount, and the pre-wrap causes line to wrap within the indented block.

Resources