Changing the colour of the closed captions font and the background?

Hi everyone,

I work at a human rights organization that strives for maximum accessibility in all our products. I've led us to adopting the Described Media and Captioning Program (DCMP) standards for closed captions. The DCMP has studied this topic for over 12 years, and I want to contribute a word of caution to all those thinking of deviating from white text on a black background. The DCMP recommends a translucent box. Here's what I do to have Storyline 360 display captions as close to those guidelines as possible. In order to create captions to their specs in the first place, I use a free open source tool called Subtitle Edit, which automates to the best of its ability, the process of breaking lines at sentence endings and conjunctions, constraining display time, and other recommendations geared at making educational tools most accessible to those with too-often-overlooked cognitive disabilities. 

Once I settled on some CSS code I learned where to place it in file templates located within the Program Files(x86) folder on my Windows system. When I started doing this it seemed only necessary to edit one file, but they seem to have separated mobile and desktop defaults since, yet the original file still exists, so I edit 3. I settled on a slightly smaller font for mobile, and the additional file made that easier than ever (thanks Articulate! My discovery I can do this was in fact a big reason we're with you now, after 8 years with you-can-probably-guess-who).  

The three files I edit, using Notepad++ launched with Administrator privileges:

1. C:\Program Files (x86)\Articulate\360\Storyline\Content\dark-spider\unified\html5\lib\stylesheets\main.min.css 
2. C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets\desktop.min.css
3. C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets\mobile.min.css

The full CSS for files 1 and 2:

.caption p{background:rgba(72,72,72,0.81);color:white;display:inline-block;pointer-events:none;padding:10px;text-align:left !important;text-decoration:none;text-shadow:black 0 0 3px;font-family:"Open Sans",Calibri,Arial,Helvetica,sans-serif;font-size:28px;border-radius:4px;margin:0 0 10px 0;padding:10px;line-height:1.18;}

I always use px unit for font size nowadays, and the only change to the above for file 3 is

font-size:21px;

I only need to repeat this when Articulate pushes out an update that overwrites those files, in my experience most but not all. Notepad++ retains files that were opened and lets you know if they've been changed. It also retains search/replace history. I don't know if Articulate makes other CSS changes, so I resist the option of saving the old file and do a search/replace every time. the code to search for is:

.caption p{display:inline-block;pointer-events:none;padding:10px;text-shadow:-1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;color:#ffffff;border-radius:4px;background:#31373a;margin:0 0 10px 0;padding:10px;text-align:center;line-height:1.5}

I'm going to leave it there now... but as for so many of us the COVID experience is reorganizing our priorities—after a long hiatus I'm determined to start blogging again. This never-completely-forgotten thread—and all of you—have just decided what my first new post will be. I think you've just read most of the text, but I think a screen recording and more information about Subtitle Edit are in order as well.

Give me a day or two for all that.   And be well!

[reposted without multiple links in hope it won't be "reported"]

Hi everyone,

I work at a human rights organization that strives for maximum accessibility in all our products. I've led us to adopting the Described Media and Captioning Program (DCMP) standards for closed captions. The DCMP has studied this topic for over 12 years, and I want to contribute a word of caution to all those thinking of deviating from white text on a black background. The DCMP recommends a translucent box. Here's what I do to have Storyline 360 display captions as close to those guidelines as possible. In order to create captions to their specs in the first place, I use a free open source tool called Subtitle Edit, which automates to the best of its ability, the process of breaking lines at sentence endings and conjunctions, constraining display time, and other recommendations geared at making educational tools most accessible to those with too-often-overlooked cognitive disabilities.

Once I settled on some CSS code I learned where to place it in file templates located within the Program Files(x86) folder on my Windows system. When I started doing this it seemed only necessary to edit one file, but they seem to have separated mobile and desktop defaults since, yet the original file still exists, so I edit 3. I settled on a slightly smaller font for mobile, and the additional file made that easier than ever (thanks Articulate! My discovery I can do this was in fact a big reason we're with you now, after 8 years with you-can-probably-guess-who).

The three files I edit, using Notepad++ launched with Administrator privileges:

1. C:\Program Files (x86)\Articulate\360\Storyline\Content\dark-spider\unified\html5\lib\stylesheets\main.min.css
2. C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets\desktop.min.css
3. C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets\mobile.min.css

The full CSS for files 1 and 2:

.caption p{background:rgba(72,72,72,0.81);color:white;display:inline-block;pointer-events:none;padding:10px;text-align:left !important;text-decoration:none;text-shadow:black 0 0 3px;font-family:"Open Sans",Calibri,Arial,Helvetica,sans-serif;font-size:28px;border-radius:4px;margin:0 0 10px 0;padding:10px;line-height:1.18;}

I always use px unit for font size nowadays, and the only change to the above for file 3 is

font-size:21px;

I only need to repeat this when Articulate pushes out an update that overwrites those files, in my experience most but not all. Notepad++ retains files that were opened and lets you know if they've been changed. It also retains search/replace history. I don't know if Articulate makes other CSS changes, so I resist the option of saving the old file and do a search/replace every time. the code to search for is:

.caption p{display:inline-block;pointer-events:none;padding:10px;text-shadow:-1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;color:#ffffff;border-radius:4px;background:#31373a;margin:0 0 10px 0;padding:10px;text-align:center;line-height:1.5}

I'm going to leave it there now... but as for so many of us the COVID experience is reorganizing our priorities—after a long hiatus I'm determined to start blogging again. This never-completely-forgotten thread—and all of you—have just decided what my first new post will be. I think you've just read most of the text, but I think a screen recording and more information about Subtitle Edit are in order as well.

Give me a day or two for all that. And be well!

------------ Sites/links mentioned; replace the dot, concatenate --------

captioningkey DOT org/quality_captioning.html

github DOT com/SubtitleEdit/subtitleedit/releases/

notepad-plus-plus DOT org/

www.rcfouchaux DOT ca/blog/

wow... I haven't used SE since like the early 2000s! Cool!
It's a pretty ingenious method you've found here.
I find it better to fiddle with css in the published course though, since I often have reinstall Storyline after a new version is out (I'd be afraid all the mods would get lost with the new version).
You can find the mobile version in the published course usually by looking for the .is-mobile selector (might have mistyped it here).

Thanks, Walter! SE has come a long way since I discovered it, v1.5 iirc. But I had to get into the settings pretty deeply after self-educating on the DCMP site. The list of characters and/or words that should force line breaks and/or new captions sometimes fails, but all in all I can start by importing a text file, running "Fix errors" tool and cleaning up a bit manually. The options for setting Start and End and displacing the rest are what save me the most time.  

Originally I modified only main.min.css, after publication, and I had a special tweak for .is-mobile .caption p {…}. I figure I publish more often than update, though, and the method above has the additional advantage that it applies even in Preview within the AS360 desktop app. Out of curiosity I've use another program, SourceGear's DiffMerge, to compare files before and after update... the only differences the times I tried appeared to be my own, but who knows what lies ahead? The minimized code is hard to search, and linting took up time... I'm just not that curious! 

After playing a bit with the developer tools of my browser, I found that this css changes the closed captions:

.caption p {
 background: rgba(236,212,76,0.7);
 color: black;
 text-shadow: none; /* The captions usually have a shadow, that looks wierd with a darker text colour */
}

But now I am thinking about where to put it. My guess would be that it is best to put it in a css file that is linked after the two that are there by default.
Does somebody have some experience in using custom css in a Storyline project and where to put it?
Is there maybe even a way to include it without having to change the output of Storyline and zip it again?

Or is this maybe better asked in a new question?

That's a good idea. It has no id but working with class and tag should also do the trick. Usually I am not a fan of changing css via JS , but I am also not a fan of having to edit the story_html5.html file on every new publish. Doing it via trigger will also make it easy for coworkers who do not enjoy code to replicate.

Let us know if that works out. Of course we must be careful that classes aren't changed in future versions of published output. I've never been a fan of solution that required editing the published output, especially when working with a team.

I've been looking through a lot of the Storyline 3's published output, and it looks like Articulate is now using something called React to generate the published output. Are you familiar with that at all?

I'll have to look more into React when I get a chance, if for no other reason than to be able to understand Storyline's output better. No rush for me on testing that, just something I'll add to my bag of tricks. Thanks.

Knut, a few of us have been trying to make a custom mute button in our projects. It looks like this is controlled by the "cs-volume" class with a range between 0 and 1. I haven't had any success myself. Could you take a look to see if you can make that work too?

So far I have not been successfull changing the colors via JavaScipt triggers.

From my browsers console, I can get the captin with this:

var myCaptions = document.getElementsByClassName("caption")[0].children[0].children[0];

and then change its properties like this:

myCaptions.style.background ="rgba(236,212,76,0.7)";
myCaptions.style.color ="black";
myCaptions.style.textShadow ="none";
myCaptions.style.fontWeight ="bold";

But until now, I did not get it to work from a trigger.