Forum Discussion
Non-Global Closed Captioning location
Is there a way to move the closed captioning between the top or bottom of the slide in a project? I have some slides that will require the captioning at the top to avoid covering information at the bottom and others that need to have the top clear of the closed captioning. I have only been able to apply the closed captioning globally.
Any help with this will be appreciated as we do not want to have to redraw our content to accommodate the captioning.
Unfortunately, the positioning properties that can be added to WebVTT files are not supported by Storyline. The only "non-global" solution would be to use JavaScript and CSS to change on a per slide basis, which would be a pita.
You could have your captions default as bottom, but then define a style that override that and positions them at the top:
body.captions-top .caption { bottom: auto !important; top: 0% !important; }
You would need JavaScript to add the class ".captions-top" to the slide where you want the captions moved. You would then need to remove then need to remember to remove the class again after it has been added. You could do like this:
Add this script to your MASTER SLIDE, and add the JavaScript to the timeline starts trigger. This ensures the class is removed every time the slide is navigated to (revert to default position).
// Ensure STYLE is only added once if (!document.getElementById("captions-top")) { const style = document.createElement("style"); style.id = "captions-top"; style.innerHTML = ` body.captions-top .caption { bottom: auto !important; top: 0% !important; } `; document.head.appendChild(style); } // This can run every time document.body.classList.remove("captions-top");
Then, on the slide that you would like the captions to appear at the top. Add the following JS to timeline start trigger:
document.body.classList.add("captions-top");
- SamHillSuper Hero
Unfortunately, the positioning properties that can be added to WebVTT files are not supported by Storyline. The only "non-global" solution would be to use JavaScript and CSS to change on a per slide basis, which would be a pita.
You could have your captions default as bottom, but then define a style that override that and positions them at the top:
body.captions-top .caption { bottom: auto !important; top: 0% !important; }
You would need JavaScript to add the class ".captions-top" to the slide where you want the captions moved. You would then need to remove then need to remember to remove the class again after it has been added. You could do like this:
Add this script to your MASTER SLIDE, and add the JavaScript to the timeline starts trigger. This ensures the class is removed every time the slide is navigated to (revert to default position).
// Ensure STYLE is only added once if (!document.getElementById("captions-top")) { const style = document.createElement("style"); style.id = "captions-top"; style.innerHTML = ` body.captions-top .caption { bottom: auto !important; top: 0% !important; } `; document.head.appendChild(style); } // This can run every time document.body.classList.remove("captions-top");
Then, on the slide that you would like the captions to appear at the top. Add the following JS to timeline start trigger:
document.body.classList.add("captions-top");
- BarbaraMinkeCommunity Member
Sam,
Thank you so much for all of the help!!
Hello BarbaraMinke,
I totally understand the importance of this being available to you and your team for your authoring process. While this isn't currently a feature we have, I've gone ahead and shared your insight with our product team. We'll be sure to update this thread in the future with any news and updates so that all are in the loop!
Have a wonderful weekend!
- BarbaraMinkeCommunity Member
Thank you Luciana!! you have a wonderful weekend too!!