Text Clipped Guide: Why Text Gets Cut Off and How to Fix It

Questions answered by this guide

• ?Why does my text get cut off when I zoom in?
• ?What does WCAG require for zoom and reflow?
• ?How do I fix clipped text in Storyline?
• ?How do I fix clipped text in Rise?
• ?How do I test for text clipping myself?
• ?Why does text clip in a Rise Labeled Graphic marker specifically?

What you'll learn

• Text gets clipped when a fixed-size box doesn't grow with zoomed-in text
• WCAG 1.4.10 requires content to work at 400% zoom without sideways scrolling
• Storyline needs Resize shape to fit text turned on; Rise's native blocks handle this automatically

What's inside

Instructional designers whose course text gets cut off when a learner zooms in

1. 01The concept
2. 02A worked example
3. 03Best practices
4. 04How Storyline and Rise differ

Why it matters

Learners with low vision often zoom their browser or use a screen magnifier to read comfortably. WCAG 1.4.10 (Reflow) requires content to still work at 400% zoom, roughly the equivalent of viewing a full desktop screen on a 320px-wide phone, without needing to scroll sideways to read a single line. If a text box has a fixed size, zooming in doesn't make the box grow. The words get cut off at its edge instead, and the learner loses the content.

When you'll encounter this

• A learner zooms their browser or uses a screen magnifier to read your course more comfortably.
• You're building a Storyline text box inside a tightly designed layout with little empty space around it.
• You're using a Rise Labeled Graphic marker or Embed block, neither of which reflows the way native Text blocks do.
• A11yCheck flags a text clipped issue on a scan report.

Example

Best practices

• Keep body text at least 14px. Anything smaller is hard to read even before zooming.
• Test every slide or lesson at 200% browser zoom before publishing. This is the fastest way to catch clipping that's invisible at normal size.
• In Storyline: select the text box, right-click, choose Format Shape, and turn on "Resize shape to fit text" if it's available, so the box grows with the text instead of clipping. If it can't resize because it's boxed in by other objects, give it more empty space to grow into.
• In Rise: native Text blocks reflow automatically and rarely have this problem. Clipping in Rise almost always comes from a Labeled Graphic marker's popup text, which has limited room, or an Embed block with a fixed-size container. Shorten marker text or link out to a full Text block, and fix fixed-height containers in embedded code directly.
• Never put important text inside a screenshot or image. It can't resize, and a screen reader can't read it either.

Common mistakes

• Text boxes locked to a fixed size that clip or overlap as soon as a learner zooms in.
• Body text set below a comfortable reading size to make a crowded slide fit.
• Long explanations packed into a Rise Labeled Graphic marker instead of linked out to a full Text block.
• Important text baked into a screenshot or graphic instead of a real, resizable text box.

Practical checklist

• Body text is at least 14px throughout.
• Every slide or lesson has been previewed at 200% browser zoom.
• No text box clips or overlaps another object at 200% zoom.
• No important information is baked into a screenshot instead of real text.
• In Storyline, text boxes prone to clipping have "Resize shape to fit text" turned on, or enough empty space to grow into.
• In Rise, Labeled Graphic markers and Embed blocks have been checked separately from native Text blocks.

Frequently asked questions

Summary

Text gets clipped when a fixed-size box doesn't grow to match zoomed-in text. Keep body text at a readable size, test at 200% zoom, and in Storyline turn on "Resize shape to fit text." In Rise, watch Labeled Graphic markers and Embed blocks specifically, since native Text blocks handle this automatically.