Tutorial: How to Reposition Closed Captions in SL360

Have you ever wanted to move the closed captions in Storyline 360, only to find that it isn't possible? Maybe you've got a custom skin that has a bottom navigation bar that clashes with the captions? Or maybe you are designing for small screens and the captions are blocking the content on your slide?

In this tutorial, we will write some code that will reposition Storyline's closed captions in the HTML5 output. Unfortunately, this doesn't work in the Flash output, but it is 2018! So unless you're dealing with weird Internet Explorer compatibility mode crap, you should be publishing to HTML5 first anyway!

Then, if you want to know how to make other changes to the closed captions, such as changing the background colour, the font size (independently on the player font size), making them take up the full width of the container or making them sparkle, then we can dig into that later. 

Except for the sparkles. I'm kidding about that.

I think...

Click here to see the tutorial, here to see a demohere to download the source file and here to grab a cheat sheet.

Let me know if you have any questions, comments or are stuck with implementing any of this. I'm happy to help where I can.

16 Replies
Matthew Bibby

Thanks Phil.

I'm sure the people at Atom are over the moon about the 0 new people who've downloaded Atom as a result of this post! 

It's such a good editor. I’m sure this is something other code editors do as well, but the ability to use multiple cursors at the same time is such a time saver when doing tedious tasks like fixing formatting errors in VTT files:


LJ Beaupre

Thanks for this tutorial! And also for the humour, even if I'm firmly anti-sparkles ;)

I'd love to know how to use a similar technique for making the font size bigger... I know that Articulate say it's sized for accessibility already, but I used to work at a subtitling firm, and our fonts were much larger and easier to read.

Matthew Bibby

Firmly anti-sparkles? I appreciate you taking a stand on this issue! I'm pro-sparkles, but it's not a hill I want to die on...

Definitely possible to adjust the font size in a similar way. I'll write up how to do it when I have time later in the week. I'll let you know when it's done.

Aurore Austruy

Thank you Mathew for this code!

I use it for a year with storyline 3, and it works really well.

But thesedays, with the new storyline version (360), when we resize the browser window, the code is not working well. It moves, as you can see on my attached file.

Do you know why?

Thank you for your help!