Launching a fancy text converter: 451 styles, and the Unicode edge cases behind them

●2
calendar_today ago • schedule2 min read

I'm Shawn Sun, a front-end engineer, and I just put a fancy text converter online. This is a developer community, so here are the parts that were fun to build instead of a feature list.

The converter's home page: one text box, category chips, and a grid of styled previews

You type once and get 451 copy-and-paste styles. Tap one to copy it, and the last 8 you copied come back under Recent. No sign-up. None of these are fonts: every style is real Unicode characters, and that caused most of the work below.

1. A style is mostly a lookup table

Bold, italic, script, Fraktur and the rest live in the Mathematical Alphanumeric Symbols block, so most styles are "offset of A, plus the letter's index".

Lookup table: A U+0041 maps to bold A U+1D400, a U+0061 to U+1D41A, with the offset formula

2. The block has holes

Some letters were encoded earlier elsewhere, so their slot is empty. A naive base + index gives you a box, so each style carries a small exceptions table.

Italic "the": the naive code point U+1D455 is unassigned and shows a box; the fix uses U+210E PLANCK CONSTANT

3. Accents: decompose first

There is no bold é. I split it with NFD, style the e and keep the accent after it. Whether the accent then sits on top depends on the font.

é decomposes into e plus U+0301; only the e is styled; two fonts render the result differently

4. Don't split emoji

Walk a string by code point and 👩💻 falls apart. I cut input into grapheme clusters with Intl.Segmenter and only style plain letters and digits.

By code point, the woman technologist emoji is three pieces; Intl.Segmenter keeps it as one cluster

5. Long input: preview first, convert on copy

Rendering every style live is fine for a username and slow for a pasted paragraph. Past 200 UTF-16 code units, each card previews only the start, and the full text is converted when you copy.

Only the first 200 code units are converted for previews; the tapped style converts the whole text on copy

Honest limits

Conversion runs in your browser. I count anonymous usage events, such as which style was copied, but your text isn't part of them.

Limits table: missing glyphs, screen readers and search, usernames, digits that stay plain

I'd like your feedback

Which category is missing, and do the style names make sense? Try your own text on the live site and tell me in the comments.

— Shawn Sun

🔥 Join developers growing publicly
Share your knowledge, build in public, and grow your developer presence with a global community.

More Posts

I’m a Senior Dev and I’ve Forgotten How to Think Without a Prompt

Karol Modelski - Mar 19

I Wrote a Script to Fix Audible's Unreadable PDF Filenames

snapsynapseverified - Apr 20

TypeScript Complexity Has Finally Reached the Point of Total Absurdity

Karol Modelski - Apr 23

Sovereign Intelligence: The Complete 25,000 Word Blueprint (Download)

Pocket Portfolio - Apr 1

ERC20 Edge Cases Every Smart Contract Engineer Should Know

BinnaDev - Jun 24
chevron_left
121 Points • 2 Badges
北京
1Posts
0Comments
JUST DO IT

Related Jobs

View all jobs →

Commenters (This Week)

1 comment
1 comment

Contribute meaningful comments to climb the leaderboard and earn badges!