No Justified Text Narrow
CSS `text-align: justify` is BANNED on any text container narrower than 45ch or on any mobile viewport without CSS hyphenation enabled (`hyphens: auto`); it produces uneven word-spacing rivers that destroy reading rhythm…
$ prime install @community/rule-no-justified-text-narrow Projection
Always in _index.xml · the agent never has to ask for this.
NoJustifiedTextNarrow [rule] v1.0.0
CSS text-align: justify is BANNED on any text container narrower than 45ch or on any mobile viewport without CSS hyphenation enabled (hyphens: auto); it produces uneven word-spacing rivers that destroy reading rhythm on short line lengths.
Loaded when retrieval picks the atom as adjacent / supporting.
NoJustifiedTextNarrow [rule] v1.0.0
CSS text-align: justify is BANNED on any text container narrower than 45ch or on any mobile viewport without CSS hyphenation enabled (hyphens: auto); it produces uneven word-spacing rivers that destroy reading rhythm on short line lengths.
Applies To
@community/type-html-artifact
Severity
medium
Exceptions
- Case: Long-form editorial with hyphenation
- Allowed When:
hyphens: autois set,langis correctly declared, container is ≥ 45ch, and desktop-only (not applied at < 640px viewport).
- Case: RTL languages (Arabic, Hebrew)
- Allowed When: RTL text with proper
dir='rtl'— justification behavior differs and is often more natural in RTL script systems.
Remediation
- Remove
text-align: justifyfrom all prose containers. - If justified text is needed: add
hyphens: auto; overflow-wrap: break-word;and test at all breakpoints. - Default prose to
text-align: left(LTR) ortext-align: start(RTL-safe).
Loaded when retrieval picks the atom as a focal / direct hit.
NoJustifiedTextNarrow [rule] v1.0.0
CSS text-align: justify is BANNED on any text container narrower than 45ch or on any mobile viewport without CSS hyphenation enabled (hyphens: auto); it produces uneven word-spacing rivers that destroy reading rhythm on short line lengths.
Applies To
@community/type-html-artifact
Severity
medium
Exceptions
- Case: Long-form editorial with hyphenation
- Allowed When:
hyphens: autois set,langis correctly declared, container is ≥ 45ch, and desktop-only (not applied at < 640px viewport).
- Case: RTL languages (Arabic, Hebrew)
- Allowed When: RTL text with proper
dir='rtl'— justification behavior differs and is often more natural in RTL script systems.
Remediation
- Remove
text-align: justifyfrom all prose containers. - If justified text is needed: add
hyphens: auto; overflow-wrap: break-word;and test at all breakpoints. - Default prose to
text-align: left(LTR) ortext-align: start(RTL-safe).
Rationale
CSS justification on screens distributes inter-word spacing to fill each line to full width. Without hyphenation, short lines create dramatic gaps (called 'rivers') between words — a well-documented legibility problem identified by Bringhurst, Lupton, and extensively researched in web typography. This problem is especially acute on narrow containers (mobile viewports, sidebar prose, cards) where word counts per line are low and spacing variation is extreme. The browser's justification algorithm is also less sophisticated than professional typesetting engines (InDesign's paragraph composer), producing inferior results.
Applies To
@community/type-html-artifact
Severity
medium
Exceptions
- Case: Long-form editorial with hyphenation
- Allowed When:
hyphens: autois set,langis correctly declared, container is ≥ 45ch, and desktop-only (not applied at < 640px viewport).
- Case: RTL languages (Arabic, Hebrew)
- Allowed When: RTL text with proper
dir='rtl'— justification behavior differs and is often more natural in RTL script systems.
Remediation
- Remove
text-align: justifyfrom all prose containers. - If justified text is needed: add
hyphens: auto; overflow-wrap: break-word;and test at all breakpoints. - Default prose to
text-align: left(LTR) ortext-align: start(RTL-safe).
Source
prime-system/examples/frontend-design/primes/compiled/@community/rule-no-justified-text-narrow/atom.yaml