Matthew Bibby
Matthew Bibby

Change the Closed Caption Font Size

In this tutorial, we will look at how to change the font size of the closed captions in Storyline 360 independently of the player font size.

Matthew BibbyMatthew Bibby

Have you ever wanted to change the font size of the closed captions in Storyline 360, only to find that you'd also be adjusting the size of your menu and buttons? Or maybe you want to give your captions a different background colour or make them take up the full width of the container?

In this tutorial, we will further develop the JavaScript we wrote in the Reposition Closed Captions in Storyline 360 tutorial so that we can do this.

If you haven't already read that tutorial, please go and do so now as it contains a lot of important information about the changes we are about to make. I'm not a fan of repeating myself (unless that repetition involves retelling terrible jokes), so I'll wait while you read that tutorial.

Seriously. Read it.

We'll be reusing the bulk of that JavaScript and just altering the styling stuff to get the results we are looking for.

As a reminder, this is the code we had at the end of the last tutorial:

if (/_html5.html/.test(window.location.href)) {
  if (!window.movedCaptions){
    var sheet = document.createElement('style');
    sheet.innerHTML = ".caption{margin-bottom:40px;}";
    document.body.appendChild(sheet);
    window.movedCaptions = true;
  }
}

Before we start, let's just tweak this code a little so it makes sense in this context. As you can see below, all that has changed is that we've swapped window.movedCaptions for window.alteredCaptions and deleted the style information from the fourth line:

if (/_html5.html/.test(window.location.href)) {
  if (!window.alteredCaptions){
    var sheet = document.createElement('style');
    sheet.innerHTML = // our new style info will go here
    document.body.appendChild(sheet);
    window.alteredCaptions = true;
  }
}

You could change window.alteredCaptions to whatever you like. It could be window.changeCaptionsFontSize, window.changeCaptionsBackgroundColour or even window.greenEggsAndHam.

But for now, I think window.alteredCaptions is fine.

Okay, let's do this thing.

Change the Captions Font Size

As you probably know, you can change the size of the closed captions by adjusting the player font size in Storyline. For many, this is all that you will need to do. Give it a try and if it works for you, you can skip this section of the tutorial.

The thing is, when you change the player font size, it'll change the size of any text used in the player. So you won't just be making your caption text bigger, but also making your menu text bigger, your button text bigger and so on.

I'm Australian. We like big things. But doubling the size of closed captions in Storyline shouldn't mean that we have to deal with this:

A Storyline slide showing player font size at 200%. It looks terrible.

So let's try a different way of adjusting the closed captions font size:

if (/_html5.html/.test(window.location.href)) {
  if (!window.alteredCaptions){
    var sheet = document.createElement('style');
    sheet.innerHTML = ".caption{font-size:150% !important;}";
    document.body.appendChild(sheet);
    window.alteredCaptions = true;
  }
}

Now, all that has been changed here is the fourth line of code.

We are simply telling the browser to display the caption font at 150% of its normal size. We've also made it clear this is very important by adding !important to the end of the style declaration. If you want to understand why we need to do this (and why using !important is generally a bad idea), read this wonderful article about specificity.

We don't need to use percentages here, px's, pt's, em's and rem's will all work. But using percentages makes more sense in this context, given that Storyline changes the player font size based on the device used.

But if you want to use one of the other options. Then you do you. You are, after all, a unique little snowflake.

So that's that.

If you don't know how to add this code to Storyline, you should read that tutorial I think I might have mentioned earlier.

Now, this is all pretty cool stuff.

It's at least as cool as tie-dye t-shirts were in the 90's:

captions-more-2

Okay... maybe it's not that cool.

But you know what would be?

Letting the learner adjust the size of the captions to meet their needs!

We won't have time to go into how to do that in this tutorial (because I'm clearly way too busy making silly jokes), but I'll send you an email in a couple of days explaining how it can be done.

And if you're not already an email subscriber, you can sign up below to get this information. It doesn't matter when you are reading this, if you sign up via the below form, you'll get the email.

Change the Captions Background Colour

You can probably already guess how we are going to do this!

That's right, we will change the CSS that controls the captions background colour using the same approach as we've used above.

The problem is if we try and just change this by doing the obvious, i.e. .caption{background-color:red;}, we'll end up with this:

A closed caption with the normal background sitting in front of a red background. This also looks terrible.

Now, if you are going for the tie-dye look, this could be a solid start. But I don't think this is the look we are going for.

It is good to know that this is possible though as it allows us to create closed captions that span the whole width of the container. If we match the colours using something like .caption{background-color:#31373A;}, we'll get this:

A closed caption with a background that spans the whole width. This doesn't look too terrible.

Not bad... but that extra space at the bottom isn't ideal. Of course, we can tweak the code a little to fix that, let's try .caption{background-color:#31373A; margin-bottom:-10px;} and see what that gives us:

A closed caption with a background that spans the whole width and doesn't include extra space at the bottom. It looks good.

Much better-er.

But wait... this isn't even what we are meant to be doing!

Let's go back to where we got off track.

If we try and just change this by doing the obvious, i.e. .caption{background-color:red;}, we'll end up with captions that look like this:

A closed caption with the normal background sitting in front of a red background. This also looks terrible.

So let's be a little more specific about what we are trying to change. It's not the background colour of the .caption that we need to change, but the background colour of the .caption p (which is the text inside the caption).

So let's try .caption p {background-colour: red;} instead:

A closed caption with a red background. Looks bad as the text has a black shadow.

That's more like it. But as you can see, it looks pretty bad.

Suddenly I understand why Articulate doesn't want us messing with this!

The captions look weird not just because they are red, but because the text has a little black shadow action going on.

Let's fix that.

If we change our style info to .caption p {background-color:red; text-shadow:-1px 0px crimson, 0px 1px crimson, 1px 0px crimson, 0px -1px crimson;} things should look a little better:

A closed caption with a red background and a crimson text shadow. Looks better.

At this stage, we should think about the contrast ratio. Let's use the WebAIM Color Contrast Checker to see if it is acceptable:

Color contrast checker shows that the contrast ratio is unacceptable.

That's not good enough.

If we switch to using black text, that should improve things:

Color contrast checker shows that the contrast rate is acceptable in most cases. Just fails at normal text WCAG AAA.

Still not perfect. To satisfy the WCAG AAA requirements we'd need to lighten the red more, but this will do for now. Making red captions is bad enough. Making salmon coloured ones would be taking things too far.

So how do we change the text colour? Simple, add a dash of color: black; and we'll be good to go:

Caption with red background and black text.

This still looks pretty bad. I mean, the background is red and we are using a crimson shadow with black text. But you can use any colours that you need to in order to match your captions with the colour scheme used in your course. Just remember to check the contrast ratio.

Now, to be clear, here is the complete code used to achieve the above:

if (/_html5.html/.test(window.location.href)) {
  if (!window.alteredCaptions){
    var sheet = document.createElement('style');
    sheet.innerHTML = ".caption p {background-color:red; text-shadow:-1px 0px crimson, 0px 1px crimson, 1px 0px crimson, 0px -1px crimson; color: black;}";";
    document.body.appendChild(sheet);
    window.alteredCaptions = true;
  }
}

While I've used simple HTML colour names in the above example, you can use hex codes to get the exact colour you are after if you like.

Anyway, that's enough for today.

Demo

Here is a demo that shows how these examples work in Storyline:

Files You Might Need:

Here is a cheat sheet on changing the captions font size.

Here is the .story file that was used in this example.

Here is a SCORM package that you can use to test this in your LMS.

Frequently Asked Questions:

Q. The script in your demo differs from the examples above, why's that?
A. Because if I used window.alteredCaptions in both examples, only the first example would work. So I changed one to window.changeCaptionsFontSize and the other to window.changeCaptionsBackgroundColour.

Q. Why is the caption text in the second example of the demo also 150%?
A. Because we didn't set it back to 100%. Changes made to the captions will apply to the whole course.

Q. When I preview my course, this doesn't work. What's up with that?
A. JavaScript doesn't work when previewing. You need to publish your course and open the HTML5 output in a modern browser. Alternatively, you can upload the course to your server or LMS and test it there.

Q. I don't have a server. Where can I get one?
A. Ask Tom.

Q. Do you know how to spell the word color?
A. Yes, it's spelt colour. But apparently the people who invented coding didn't know this. It must have been hard to get this stuff right before spellcheck.

Q. Will this work in Articulate Review?
A. Probably. You should test it and let me know.

Q. Does this work in the Flash output?
A. No.

Q. Will this work in Articulate Mobile Player?
A. No.

Q. Will this work in the HTML5 output?
A. Yes.

Q. What version of Storyline did you use to create this demo?
A. Storyline 360, build 3.14.15225.0.

Q. Can you provide a SL2 version of this?
A. No, SL2 does not support closed captions.

Q. Do Articulate support this approach?
A. No, they don't provide support for this stuff. So if you run into any issues leave a comment below (or contact me privately) and I'll help you.

Q. You didn't mention sparkles once in this tutorial.
A. I know. And that's not a question.

Q. My question isn't listed here, what should I do?
A. Hardcore parkour. Or you could leave a comment. But if you opt for hardcore parkour, please send me a video. I'd like that.

If you found this tutorial helpful and think others in your network will also, please share using the share buttons below. Thanks!

Matthew Bibby
Author

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable, engaging and profitable training programs. What do you need a hand with?

Comments