youtubecaptionsubtitlettml

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.


Solution

  • 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