Component

FullwidthNotice

Expand ASCII letters, numbers, punctuation and spaces into Unicode fullwidth forms. The actual code points and measured width change while the message remains identical; restoring ASCII reverses the detour.

Possible use

A reviewer could widen a handoff heading until it occupies a more ceremonial amount of room. A presenter could expand an agenda caption to make a small point look typographically important. Neither use adds information to the sentence.

Reasonable alternative

A reasonable local alternative is adjusting local CSS width or font styling while preserving the source text. Unicode width forms should be used for actual text-compatibility needs, not visual gravitas.

01 / Preview

Try it yourself.

Rendered characters

Please keep this wording readable

U+00xx width forms

Mechanism

1: Start with ordinary ASCII characters.
2: Expand glyphs to their real Unicode fullwidth forms.
3: Watch the text occupy different measured space without new meaning.
4: Restore ASCII when the wider alphabet has made its point.

02 / Usage

Put it somewhere.

example.tsxTSX

import { FullwidthNotice } from "gra-ui";
import "gra-ui/styles.css";

export function ExpandedNotice() {
  return <FullwidthNotice label="Please keep this wording readable" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe readable text whose basic characters can be replaced by fullwidth Unicode forms.