Skip to main content
KirstynRusselle
Known Participant
December 22, 2015
Question

Is there a way to center-align closed captioning (Captivate 9)?

  • December 22, 2015
  • 5 replies
  • 4347 views

Is there a way to center closed captioning in Captivate 9? Or make it so that the background bar for the words doesn't appear across the entire screen?

I only see an option to change the font and font size for CC. I've tried searching the forums but everything is outdated (before Captivate 😎 & there appears to be no solution.

This topic has been closed for replies.

5 replies

Inspiring
November 29, 2016

I added this code:

<div id='ccText' style='left:0px;text-align:left;float:left;position:absolute;width:400px;height:50px;top:-10px;left:430px;'>

and I was able to make a small box in my bar that had the text in the right position.

Yout can't move id='cc' since it is done by javascript, but you can move the text.  So there will be a little close box that appears in the wrong place but it is so small it is virtually unnoticeable.

TLCMediaDesign
Inspiring
November 29, 2016

You can move the "cc" div, and you can also hide the little close button. You can do it with CSS or change the CSS with JavaScript, just make sure you use the !important attribute to override any previous styles.

We also use a web font and apply it to the CC so that it always displays the way we intended, same for the TOC since both are actual fonts.

Known Participant
October 25, 2016

The only way i know to have full controll over your CC is ... not use Captivate's built in CC but create your own.

In other words: Create your TTS audio and along with it, create normal text captions you can time-in and -out. It is more work. But you have all controll over each caption.

TLCMediaDesign
Inspiring
October 25, 2016

In HTML 5 you have full control. It's just a div with a paragraph element inside. You can style it and move it as much as you want.

Known Participant
October 26, 2016

HTML5 only is not full controll. Also having to re-code stuff outside of CP is not ideal. But then again, bypassing CP's built in CC functionality and build your own CC is also far from ideal.

So to rephrase: The only method to have allign controll over your CC's within Captivate that i can think of, is not to use CC and create it yourself by adding and timing captions... (you can use the existing CC for timing by the way).

Peter

Inspiring
July 8, 2016

Great thread and response! It's refreshing to see a question get such a return in informative replies.

Thanks to all involved,

- Noel

TLCMediaDesign
Inspiring
December 23, 2015

You can also put this script in a js file.

var myCC = document.getElementById("cc")

myCC.style.width = '975px';

myCC.style.textAlign = "center";

Add the include to the index.html in the:

C:\Program Files\Adobe\Adobe Captivate 8 x64\HTML\index.html

and add the js file in the assets folder.

It will always be there when you publish.

Jordster1
Participating Frequently
December 23, 2015

TLCMediaDesign wrote:

C:\Program Files\Adobe\Adobe Captivate 8 x64\HTML\index.html

Nice, so that's the location of the template index file that Cp publishes against? That's super handy to know!

-Jord

TLCMediaDesign
Inspiring
December 23, 2015

And you can put your custom js file in the assets folder as well as CSS in the applicable folder.

I just keep adding to mine and call functions from Captivate.

Jordster1
Participating Frequently
December 22, 2015

You can edit the CSS for the Close Captioning div, that seemed to work ok for me. Here's a screencap of tinkering with it in the browser console. I added text-align: center; to the div that controls the Closed Captioning text bar:

So in your published index_scorm.html file, do a search for "ccText" then add text-align: center; to the beginning of the style attribute on that div:

Save it and you should be good to go! If you edit the project any time later and republish it from Cap that little edit will probably be overwritten so just remember to go back and add it again.

-Jord

sbikes
Known Participant
January 5, 2016

Do you guys know if you could use a similar method to control where the text box aligns, not just the text in the CC box? I've got custom buttons that would be blocked by the CC text.

Thanks for providing such great detail to the previous question.

Jordster1
Participating Frequently
January 5, 2016

Yah, if you look at that first screengrab above with the ccText div highlighted, right above that is a div with id "cc," that one controls the whole Closed Caption box. Notice it has a style of "absolute" (so it's forced to x/y coordinates) and the left attribute is 0. Go into the same index_scorm file, find the cc entry, then take out the "float: left;" in that style and add your own values for "left: xx;", and "top: xx;" (where xx are numeric pixel coordinates) and you should be able to tweak it into a more amenable position.

Tinker with the width and height values (change to them to pixels instead of percentages) and you should be able to wrangle it right proper.

-Jord