Non-breaking Space for Brand Names

This Vale rule enforces the use of non-breaking spaces in brand names to prevent awkward line breaks that could split brand names across two lines. The rule uses Vale's substitution mechanism to identify brand names that should contain non-breaking spaces instead of regular spaces.

When text reflows or wraps, brand names with regular spaces can be split at line breaks, which can harm brand recognition and create a poor reading experience. Using non-breaking spaces ensures that brand names always stay together as a single unit, maintaining brand integrity and professional appearance in documentation.

Examples:

What it checks for:

  • "Material UI" with regular space → Should be "Material UI" with non-breaking space
  • "MUI X" with regular space → Should be "MUI X" with non-breaking space
  • "Base UI" with regular space → Should be "Base UI" with non-breaking space
  • "Pigment CSS" with regular space → Should be "Pigment CSS" with non-breaking space

The rule will flag any instance where these brand names are written with regular spaces instead of non-breaking spaces. Users can insert non-breaking spaces using:

  • Mac: Option + Space
  • Windows: Alt + 0160
  • Linux: AltGr + Space

Rule Source

This rule comes from: https://github.com/mui/material-ui

Rule Definition

# Without a non-breaking space, brand names can be split in the middle
# with the start and end on two different lines.
# For example, Apple does this meticulously with their brand name: https://www.apple.com/macbook-air/.
# Also read https://www.chrisdpeters.com/blog/using-non-breaking-spaces-to-help-with-branding/ for why.
extends: substitution
message: Use a non-breaking space (option+space on Mac, Alt+0160 on Windows or AltGr+Space on Linux, instead of space) for brand name ('%s' instead of '%s')
level: error
ignorecase: true
# swap maps tokens in form of bad: good
# for more information: https://vale.sh/docs/topics/styles/#substitution
swap:
  Material UI: Material UI
  MUI X: MUI X
  Base UI: Base UI
  MUI System: MUI System
  MUI Store: MUI Store
  MUI Core: MUI Core
  MUI Toolpad: Toolpad
  MUI Toolpad: Toolpad
  MUI Connect: MUI Connect
  Pigment CSS: Pigment CSS