CODEWITHSUNDEEP
youtubecaptionsubtitlettml
uwe
uwe

Reputation: 4077

Youtube Timed Text Caption box alignment issue

I want to be able to show 2 lines of captions/subtitles on a youtube video using the youtube timed text (.ytt) format

<?xml version="1.0" encoding="utf-8"?>
<timedtext format="3">
<head>
<wp id="0" ap="0" ah="0" av="0" />
<ws id="0" ju="0" pd="0" sd="0" />
<pen id="0" sz="100" fs="0" />
</head>
<body>
<p t="1" d="4988" wp="0" ws="0"><s></s><s p="0">​ ROW 1: XXXXXXXXXX </s>
<s p="0"> ​​ROW 2: XXXXXXXXXX </s></p>
</body></timedtext>

The caption shows correctly with the background box aligned: enter image description here

However, as soon as I change the font to fs="1" (mono space) or add a color fc="#FF0000" the background boxes shift. enter image description here

Is there another way to add the 2 lines of paragraphs to keep the background box aligned? Btw, I'm using the ytt format instead of the ttml format because I need to be able to set the font to monospace and add a font color.

Upvotes: 1

Views: 462

Answers (3)

uwe
uwe

Reputation: 4077

After playing with the format a bunch more I finally got it to work. The key is the extra <s></s> and each <s> paragraph on its own line. Also, extra spacing is now needed at the beginning and end of the text

<?xml version="1.0" encoding="utf-8"?>
<timedtext format="3">
<head>
<wp id="0" ap="0" ah="0" av="0" />
<ws id="0" ju="0" pd="0" sd="0" />
<pen id="0" sz="100" fs="1" />
</head>
<body>
<p t="1" d="4988" wp="0" ws="0">
<s></s>
<s p="0"> ROW 1: XXXXXXXXXX </s>
<s p="0"> ROW 2: XXXXXXXXXX </s>
</p>
</body></timedtext>

enter image description here

Upvotes: 0

JShobbyist
JShobbyist

Reputation: 600

Using multiple spans has a bug. Try this out. Hope it helps.
In the code below, place a zero-width space after the first span.

<p t="1" d="4988" wp="0" ws="0"><s></s><s p="0">​ ROW 1: XXXXXXXXXX </s>
<s p="0"> ​​ROW 2: XXXXXXXXXX </s></p>

add &#8203; between span. try use the code below:

<p t="1" d="4988" wp="0" ws="0"><s></s>&#8203;<s p="0">​ROW 1: XXXXXXXXXX </s>
<s p="0">ROW 2: XXXXXXXXXX </s></p>

Upvotes: 0

mlegrix
mlegrix

Reputation: 799

I'm not sure if there is another way. In your case I would make sure that the spacing around the line break matches.

AFAIK, a default padding of one white-space character is present at the beginning and end of the paragraph. But adding a line break doesn't add by default this white-space character to the end of the first line and beginning of the second line. We need to add them back in :

<p t="1" d="4988" wp="0" ws="0"><s></s><s p="0">ROW 1: XXXXXXXXXX&#32;</s>&#8203;<s p="0">&#8203;
&#32;ROW 2: XXXXXXXXXX</s></p>

In addition, I would suggest to use Unicode characters for white-space characters &#32; and zero width space &#8203;.

Upvotes: 0

Related Questions