Text-transform changes the rendered case of text. It does not change the source string, form value, or server record. Case mappings can depend on language, and browser support for some language-specific transformations differs.
Make this comfortable
CSS text-transform: change display case without corrupting source data
When to use it
An operations dashboard uses compact state labels such as pending review and evidence sealed. Uppercase can help separate these controlled labels from nearby prose, provided the size, tracking, and contrast remain legible. Keep the stored state machine key separate from the displayed localized phrase. Test a translated label with dotted and dotless i, a long label that wraps, a screen reader, and high zoom. Never apply uppercase to a person's name, a case-sensitive identifier, an email address, or a quotation merely to fit the visual system. The CSS rendering does not validate or normalize incoming data. If a business rule requires canonical casing, perform that rule in application code with a defined locale and retain the original where needed. Set the correct lang on translated text so the browser has a chance to use the right mapping. For a long translated state, let the badge grow rather than hiding characters with ellipsis.
.review-state { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; white-space: normal; }
.person-name, .case-identifier { text-transform: none; letter-spacing: normal; }Cost and verification
The CSS operation is cheap, but uppercase often takes more inline space and can change wrapping at narrow widths. Measure the longest localized phrase in the actual badge component. A letter-spacing value that looks calm in Latin text can be awkward in another script; scope it to reviewed locales or remove it. Text-transform is not secure normalization and must not participate in equality tests or signatures. The source phrase remains what users select and copy, although assistive technology may pronounce styling differently. Keep status meaning in text and do not use case alone as the only state cue.
Common Mistakes
- Do not use visual uppercase as data normalization.
- Do not transform names or case-sensitive IDs for layout convenience.
- Do not assume one mapping or tracking value fits every language.
Connected lessons
css
reference
web