react-doctor/no-justified-text

Use `text-align: left` for body text, or add `hyphens: auto` and `overflow-wrap: break-word` if you must justify

• Category: Accessibility
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm the inline style sets textAlign: 'justify' WITHOUT a sibling hyphens: 'auto' or WebkitHyphens: 'auto' on the same object. False positive: print, PDF, or eBook renderers that ship their own hyphenation engine — not a concern for typical web body copy.

Fix prompt

Use this once validation confirms the diagnostic is real.

Switch textAlign to 'left' (or 'start' for RTL-aware i18n). If justification is required, add hyphens: 'auto', overflowWrap: 'break-word', and set the element's lang attribute so the browser hyphenates correctly. See https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Related rules

More Accessibility rules from the rules reference:

• react-doctor/no-noninteractive-element-interactions: Move the interaction to a semantic interactive element, or add an interactive role plus keyboard support.
• react-doctor/no-noninteractive-element-to-interactive-role: Use a semantic interactive element instead of role-promoting a non-interactive one.
• react-doctor/no-noninteractive-tabindex: Reserve tabIndex for interactive elements or interactive roles; remove it from non-interactive ones.
• react-doctor/no-outline-none: Use `:focus-visible { outline: 2px solid var(--color-muted); outline-offset: 2px }` to show focus only for keyboard users while hiding it for mouse clicks
• react-doctor/no-tiny-text: Use at least 12px for body content, 16px is ideal. Small text is hard to read, especially on high-DPI mobile screens