Forum Discussion
Adjusting the width of closed captions
Hi Jodi,
Try using this script to modify the width of the caption div. By default, it's set to 60%, which is currently what you have in your project. You can decrease this percentage as needed.
const addCss = css => document.head.appendChild(document.createElement("style")).innerHTML=css;
addCss(".view-desktop .caption, .theme-unified .caption {width:60%;}");
Thank you. I'll give it a try.
Thank you, Nedim. It worked perfectly. I adjusted the width down a little more to fit my concept. I'm doing this for a demo that I'll post next week. I appreciate your help!
I would like to do this. Where would you put this script exactly? Do you have to put it on each slide? First slide of the project. New to this, so I would be grateful for any additional details on how to execute this.
Hey Theresa! 🙂
This is what I was able to find with Chrome's AI Gemini function:
Step-by-Step Implementation
- Create the Trigger: Open your project in Articulate Storyline and navigate to your Slide Master (to apply this globally across the course) or a specific slide.
- Configure the Action: In the Triggers Panel, create a new trigger and select Execute JavaScript.
- Set the Timing: Set the event to fire when the Timeline starts on the slide or master slide.
- Paste the Code: Click the "JavaScript" text link to open the script window, paste the code block above [Note from Michelle: This is the code Nedim posted above], and click OK.
- Publish and Test: You must Publish or use the full browser Preview to see the changes. The standard slide-isolated preview mode cannot execute DOM manipulation reliably. [1, 2]
Key Considerations
- Text Wrapping: Shrinking the container width naturally forces text onto multiple lines. Ensure your layout has enough vertical space to handle 3 to 4 lines of stacked text without overlapping other visual slide elements.
- Centering: The snippet keeps the shortened caption box mathematically centered on the screen. If you prefer it left-aligned, remove that specific rule.
- Responsive Scaling: This percentage rule works well on desktop viewports, but might make text too squished on smartphones. Testing on multiple devices ensures readability. [6]
