# Mark Untranslatable Strings

**MUST** · **ID:** `content-translate-no` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-translate-no

> MUST: Wrap brand names, code tokens, commands, and identifiers in `translate="no"` so browser auto-translate leaves them runnable while the surrounding prose stays translatable.

Wrap brand names, code tokens, and identifiers in translate="no" so machine translation leaves them alone

Browser auto-translate rewrites every text node it can reach, including shell commands, env var names, and product names, which turns "npm install vercel" into something that does not run. The HTML translate attribute (and Google's equivalent notranslate class) marks those subtrees as off-limits while leaving the surrounding prose translatable.

## Rule snippet

```tsx
<code translate="no">npm install vercel</code>
```

## Bad — do not do this

`content-translate-no-bad`

```tsx
export function TranslateNoBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <p className="text-xs text-muted-foreground">
          Page after Chrome auto-translate (English → Spanish)
        </p>
        {/* Nothing is marked translate="no", so the brand, the command and the
            env var name all get "translated" into gibberish. */}
        <h4 className="font-medium text-foreground">Instale el Vértice CLI</h4>
        <pre className="p-2 bg-muted rounded text-xs text-foreground overflow-x-auto">
          <code>npm instalar --global vértice</code>
        </pre>
        <p className="text-sm text-muted-foreground">
          Establezca <code className="px-1 bg-muted rounded">CLAVE_API</code>{' '}
          en su entorno.
        </p>
      </div>
      <p className="text-xs text-error">
        The command no longer runs and the env var no longer exists — the
        translator rewrote the one part of the page that must never change
      </p>
    </div>
  );
}
```

## Good — do this

`content-translate-no-good`

```tsx
export function TranslateNoGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <p className="text-xs text-muted-foreground">
          Page after Chrome auto-translate (English → Spanish)
        </p>
        <h4 className="font-medium text-foreground">
          Instale el <span translate="no">Vercel</span> CLI
        </h4>
        <pre
          translate="no"
          className="p-2 bg-muted rounded text-xs text-foreground overflow-x-auto"
        >
          <code>npm install --global vercel</code>
        </pre>
        <p className="text-sm text-muted-foreground">
          Establezca{' '}
          <code translate="no" className="px-1 bg-muted rounded">
            API_KEY
          </code>{' '}
          en su entorno.
        </p>
      </div>
      <p className="text-xs text-success">
        Prose gets translated; the brand, the command and the identifier are
        marked translate="no" and survive intact
      </p>
    </div>
  );
}
```

## References

- [MDN: translate attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate)
- [W3C i18n: Using the translate flag](https://www.w3.org/International/questions/qa-translate-flag)