Forum Discussion
Adjusting the width of closed captions
Hi Everyone,
I would like to customize my closed captions. I want to reduce the width of the captions field. Is there a way to do this? I saw some closed conversations and I found some instructions on using Javascript but I can't get it to work.
Thanks!
8 Replies
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]
You are welcome, Jodi.
Hi Nedim.
Thank you for the help on the javascript for the caption widths. Here is a link to how I applied it for the weekly challenge (#461):
https://jodisdemos.s3.amazonaws.com/461+Podcast/story.html
Anytime, Jodi. I like it so much. Thank you for sharing it :)
