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

It would be nice to be able to adjust where the captions fall on the screen as well. I make courses that have video running in an image on the screen that I would rather have the captions ON that on the bottom of the slide. I also rarely use the built-in navigation which means the CC falls on top of nav bars sometimes. 

I see that I can now change the text color and font, but is there still no way to change the bg color of the closed-captioning without coding it?

Hello Jaclyn,

It is still an open feature request with our team.

I wanted to share some information about how we manage these feature requests as that may be helpful. 

You're in the right place to be notified of any updates we have to share.

This is still an issue 2019-03-08. The Described and Captioned Media Program (DCMP) has published Closed Captions standards, guidelines and best practices (http://www.captioningkey.org/quality_captioning.html) White font with drop-shadow on a translucent gray background is the standard, and I think these should be the Player defaults, with easy access to adjustments available in the Player options, especially as DCMP does not specify a font size, only that it be readable and consistent throughout (http://www.captioningkey.org/text.html#2)

I'm able to modify Knut's extremely helpful code, but I can well understand why most are reluctant to do that.

Thanks, Richard for sharing that link and those details. I'll pass them along to the team! 

more http://welookups.com/js/js_htmldom_css.html

Awesome, Knut!  I see they haven't gotten to add this feature yet but your code is JUST what I need to molify my clients now...

So glad that this conversation was helpful for you as well, Mark.

Thanks for chiming in and welcome to E-Learning Heroes :)

Thank you

I've done the same request today. Thanks to @knut for the script. :-)

bumping up this thread. 

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! 

can anyone here advise on the re-positioning of cc subtitles using javascript? I intend to move the subtitles position up and right with adjustable px. 

Hello Knut,

I'm tapping in to some code you wrote 2 years ago.  The screen grab I have attached.  I think I missed something (code).  Do you have a moment please to send the JS I need to paste in to the trigger in the master slide.

Thank you for Australia,

Nicole

Hi Tan,

I can describe the concept but I don't have code to share. I looked into repositioning for speaker identification, and/or the occasional move to prevent obscuring content—these are the officially sanctioned reasons for moving them, according to the DCMP. The VTT subtitle specs allow for styling and positioning, but doesn't appear to be fully implemented in AS360.
https:// developer.mozilla.org/en-US/docs/Web/API/WebVTT_API (remove the space to make that link work)
…when I tried all that some years and several builds ago I think it printed the commands as part of captions. Fully implemented VTT would potentially answer all the questions in this thread, I think. 

I'd probably use jQuery, which is best added in either a master slide or story.html (you can add CSS that way too). I'd try to identify a unique property of the caption div, which my investigation showed is already using absolute positioning. I'd personally aim to create an imaginary 9-square grid and use % rather than px to achieve top, middle, bottom rows and left centre right columns. CSS supports top: Nu, right: Nu, bottom: Nu, and left: Nu, where N is a number and u is the unit. 

I abandoned my attempt because I didn't have an authentic need in the project I was working on at the time or since, which have all been single off-screen narrator beginning to end. I'm doing some prototypes now, with animated characters, but I've been doing them as embedded MP4s with open captions (always on) instead of closed. I can build those in Vegas with a choice of subtitle formats that do the trick. AS360 triggers can overlay the video and pause the media etc.

You are awesome, Knut. Thanks for providing this information.

Hello everyone,

Great news!  We just released another update for Articulate 360 and included some new features a few important fixes you'll see in the release notes.

The item you'll be interested in is:

New: Make closed captions easier to read. Increase the captions font size up to 200% in the modern player.

Just launch the Articulate 360 desktop app on your computer and click the Update button for Storyline 360. Details here.

Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly.

Any chance we can add transparency to the caption box?

Hi Starla!

It sounds like you were looking for more ways to customize the closed captioning box in Storyline.

I'm happy to share that our development team is tracking a feature request that would allow authors to change the background color and opacity of the closed captions. I've included you in the feature report so you can be notified as soon as we have news to share!

Have a great start to your week!

Hi Steven! 

Do you know when this update will be released? 

Hello Everyone!

I'm happy to share that we have released Storyline 360 version 86 (Build 3.86.32028.0).

Included in this release we have two new features:

• Position captions at the top or bottom of the slide to ensure closed caption visibility and prevent the obstruction of critical course content.
• Customize the foreground and background colors of closed captions to complement your course design and maintain contrast accessibility.

All you need to do is update Storyline 360 in your Articulate 360 desktop app on your computer. You'll find our step-by-step instructions here.

Please let us know if you have any questions by reaching out to our Support Engineers directly.

Have a great day!