Skip to main content
KirstynRusselle
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

    P
    pjphotos
    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
    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.

    P
    peterv85060509
    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
    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.

    P
    peterv85060509
    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

    Y
    yn68_2
    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
    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
      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
        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
          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
            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
            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

              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices