videoyoutubesubtitlewebvtt

Positioning subtitles on YouTube with WebVTT


According to YouTube's documentation on subtitle formats, it supports positioning closed captions using WebVTT - as seen in this video. I was able to use align:start position:100% to successfully align captions to the right of the video viewport, but any variation of align-left or align-end that I try simply reverts to the default (centre) alignment.

The line-left syntax from Example 7 in the W3C's WebVTT spec states:

The "line-left" or "line-right" only refers to the physical side of the box to which the "position" setting applies, in a way which is agnostic regarding the horizontal or vertical direction of the cue. It does not affect or relate to the direction or position of the text itself within the box.

But when I try to use this to explicitly specify a left align, I get an error from YouTube when uploading the file (line 17 refers to the 3rd cue - the actual error is the line-left on line 18):

enter image description here

WEBVTT
Kind: captions
Language: en

1
00:00:16.439 --> 00:00:20.998 align:start position:100%    // Successfully aligns right
میرے کنّاں دے چمکن جھمکے
Mere kannaan de chamkan jhumke
Sparkling jewels adorn my ears

2
00:00:21.038 --> 00:00:25.037 align:left position:0%       // Silently fails; falls back to centre alignment
میرے کنّاں دے چمکن جھمکے
Mere kannaan de chamkan jhumke
Sparkling jewels adorn my ears

3
00:00:25.837 --> 00:00:30.037 align:left position:0%,line-left      // Fails with errors
مینوں ویکھے ہوا وی پئی گھم کے 
Mainoon wekhe hawa wi pai ghum ke
Even the breeze turns around to get a glimpse of me

Is the line-left/line-right syntax not supported by YouTube at all, or am I just using it wrong? If it's not, how can I force my subtitles to align left?

Note that although I have the first line of each cue in Punjabi, the subtitle file itself for the video is uploaded as English (United Kingdom), and this is also made explicit by the Language: en tag at the beginning of the files, so this is not a Right-To-Left issue.


Solution

  • I've posted this answer purely to document what I used to get the positioning working but I'll be glad to accept an answer from anyone who's better than me at figuring out what the specs say, and in doing so can explain exactly how positioning in WebVTT works.

    Since first writing up this question, and after a lot of reading the specs and testing against them, I managed to stumble on the right permutation of code needed to solve this issue, with some caveats.

    For the most part, you can use:

    <timecode> align:left position:0% size:50% to left-align captions

    <timecode> align:right position:100% size:50% to right-align them

    <timecode> line:0% to position them at the top of the video

    ...at least in my particular case. However, this approach seems to fail completely on longer lines, which fall back to being centre-aligned.

    I also don't understand why, but the size directive always needed to be around 50% in my video: setting it to too low or too high a value - including 100%, as would be the case in CSS - also seems to fail.