diff --git a/_rules/text-cutoff-reflow-lf4ym8 b/_rules/text-cutoff-reflow-lf4ym8 new file mode 100644 index 0000000000..b93a8be223 --- /dev/null +++ b/_rules/text-cutoff-reflow-lf4ym8 @@ -0,0 +1,339 @@ +--- +id: lf4ym8 +name: Text is not cutoff at 320 CSS pixels +rules_format: 1.1 +rule_type: atomic +description: | + This rule checks content does not require a scroll in the orientation of the text when the viewport is set to 320 CSS pixels. +accessibility_requirements: + wcag21:1.4.10: # Reflow (AA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Helen Burge + previous_authors: + - +--- + +## Applicability + +This rule applies to any element containing visible text that is rendered at 320 CSS pixels in the orientation of the text. + +## Expectation (1) + +Each target element: +- Has all text fully visible within the viewport, without being clipped, truncated, or hidden off-screen when viewed at 320 CSS pixels; and +- Does not require scrolling in the direction of reading to reveal portions of text; and +- Preserves all information and functionality associated with the text content. + +## Background + +This rule supports WCAG 2.1 Success Criterion 1.4.10 Reflow, which requires that content can be presented without loss of information or functionality and without requiring scrolling in two dimensions at a width equivalent to 320 CSS pixels. + +### Assumptions + +There are no assumptions. + +### Accessibility Support + +There are no accessibility support issues known. + +## Examples + +### Passed + +#### Passed Example 1 + +Text wraps correctly and remains fully visible at 320 CSS pixels. + +```html +
+

+ This paragraph reflows and wraps within the viewport, + ensuring all text is visible without horizontal scrolling. +

+
+``` + +#### Passed Example 2 + +Responsive layout prevents text cutoff at small viewport sizes. + +```html + +
+

+ Content adapts to the viewport and remains fully readable at 320 CSS pixels. +

+
+``` + +#### Passed Example 3 + +Long words wrap instead of overflowing. + +```html +

+ ThisIsAnExtremelyLongWordThatWouldOtherwiseOverflowButNowWrapsCorrectlyWithinTheViewport. +

+``` + +#### Passed Example 4 + +Content inside a flexible grid reflows to a single column. + +```html + +
+

All text remains visible and reflows correctly.

+
+``` + +#### Passed Example 5 + +Inline text elements wrap naturally. + +```html +

+ This is a sentence with inline elements that wrap correctly + when the viewport is reduced. +

+``` + +#### Passed Example 6 + +Scrollable container used only for non-text, while text remains fully visible. + +```html +
+

+ The text content is fully visible and not clipped, even though other + components on the page may scroll. +

+
+``` + +#### Passed Example 7 + +Map with labels. Map content requires spatial positioning that cannot be linearised. + +```html +
+Passed Example 8 +Scrollable code viewer with syntax highlighting. Code formatting and alignment require horizontal structure for readability. +
+

+const veryLongVariableName = "example";
+
+
+``` + +#### Passed Example 9 + +Timeline or calendar grid. Temporal relationships depend on a grid-based layout. + +```html +
+
Mon
+
Tue
+
Wed
+
+``` + +#### Passed Example 10 + +Comic or visual narrative layout. Sequential meaning depends on spatial positioning. + +```html +Comic strip +``` + +#### Passed Example 11 + +Whiteboard or drawing canvas. User-generated spatial content cannot be meaningfully reflowed. + +```html + +``` + +### Failed + +#### Failed Example 1 + +Text is cut off due to a fixed-width container. + +```html +
+

+ This text extends beyond the viewport and is not fully visible. +

+
+``` + +#### Failed Example 2 + +Text is truncated and not fully readable. + +```html +

+ This is a long line of text that will be cut off. +

+``` + +#### Failed Example 3 + +Overflow causes text to extend outside the viewport. + +```html +
+

+ This text spills خارج the viewport and requires horizontal scrolling to read fully. +

+
+``` + +#### Failed Example 4 + +Absolute positioning causes text to be partially off-screen. + +```html +
+

+ Part of this text is pushed خارج the viewport and not visible. +

+
+``` + +#### Failed Example 5 + +Long unbreakable text does not wrap. + +```html +

+ SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious +

+``` + +#### Failed Example 6 + +Clipping hides text content. + +```html +
+

+ This paragraph contains multiple lines of text but only part of it is visible. +

+
+``` + +#### Failed Example 7 + +Text overlaps and hides other text when reflowing. + +```html +
+

First line of text

+

Second line overlaps and obscures the first

+
+``` + +#### Failed Example 8 + +Text requires horizontal scrolling to be fully read. + +```html +
+

+ This text requires horizontal scrolling to read fully, which fails the requirement. +

+
+``` + +### Inapplicable + +#### Inapplicable Example 1 + +Preformatted content requiring two-dimensional layout. + +```html +
+function example() {
+	console.log("Horizontal scrolling may be required");
+}
+
+``` + +#### Inapplicable Example 2 + +Element does not present visible text to the user. + +```html + +``` + +#### Inapplicable Example 3 + +Mathematical formula requiring spatial layout. The meaning depends on spatial formatting that may not fully reflow without loss of meaning. + +```html +
+ E = mc2 +
+``` + +#### Inapplicable Example 4 + +Complex diagram or infographic with embedded text. The text is part of an image that relies on a two-dimensional layout. + +```html +System architecture diagram +``` + +#### Inapplicable Example 5 + +Large chart or graph. Charts require spatial relationships that cannot be preserved through text reflow. + +```html + +``` + +#### Inapplicable Example 6 + +Side-by-side comparison layout where structure conveys meaning. The meaning relies on a two-dimensional comparison layout. + +```html +
+
Before
+
After
+
+``` + +#### Inapplicable Example 7 + +Interactive editor with toolbar and content area. The interface may require maintaining layout relationships between controls and content. + +```html +
+
Bold | Italic | Underline
+
Editable text here
+
+```