Kaomoji rendering cases

Bytes, code points, clusters, glyphs

this block’s script · Common · Inherited · another script · unassigned · unassigned, with a note · hover a cell to read it

UTF-8 keeps ASCII one byte per character, which is why it won the wire. UTF-16 needs a surrogate pair above U+FFFF, which is why a JavaScript string can report a length of 2 for one emoji.

Script property: why a face resolves as one run

The procedure is UAX #24. Almost every character a kaomoji is built from is Common, so a face usually resolves to a single font.

# @missing: 0000..10FFFF; Unknown
0000..001F    ; Common # Cc  [32] <control-0000>..<control-001F>
FF9E..FF9F    ; Common # Lm   [2] HALFWIDTH KATAKANA VOICED SOUND MARK..HALFWIDTH KATAKANA SEMI-VOICED SOUND MARK

The format is not specific to this file: UAX #44 defines how every file in the character database is laid out — which fields exist, how ranges and comments are written, and what a missing value defaults to. It is long because it governs the whole database; the two sections that explain a line like these are Format Conventions and Data Fields. The rules for this particular property are in UAX #24 instead.

Scripts-17.0.0.txt assigns all 159,866 designated code points in 2,287 rows across 174 script values, of which Common alone accounts for 9,123 code points in 613 ranges. The table ships inside whichever library performs the lookup, so it is pinned to the Unicode version that library was built against — two browsers of different vintages can answer the same query differently.

The pair is grouped by run itemization, not by any attachment of its own: U+FF9F is a spacing modifier letter (gc=Lm), not a combining mark. Measured in Chrome, (ﾟ reports one advance for the two characters and οﾟ reports two.

Measured across the 666 distinct faces in the catalogue at the time of writing, with every character mapped through Scripts.txt; Assigned is how many code points that script holds in Unicode overall. Kaomoji raid scripts for shapes, not for language, so the tail is long and thin: Kannada supplies two characters and both are eyes. The catalogue leans on Common because punctuation and symbols live there, and that is exactly the value that cannot open a run of its own.

The half-width block straddles those values—U+FF61-FF65 and U+FF9E-FF9F are Common while the letters between them are Katakana—so the renderer keys its face class on the block range U+FF61-FF9F rather than on the script.

The two character standards are kept synchronized and assign the same code points, so a renderer bug is rarely a question of which one you consult. It matters here only because the run split is a property question, and properties live on the Unicode side.

Font coverage: no family paints a whole face

--kaomoji-font is a CSS custom property naming the first font asked for a face, not the font that paints every character in it. Where the named font has nothing, fallback answers character by character, so a face normally arrives from several fonts at once. The token decides only which characters are answered without falling back — and that is the whole of what the treatment controls.

Two intersections are empty, which is why both failures on this page are structural rather than unlucky — no installed family covers both ･U+FF65 and ◌̆U+0306, so that pair must arrive from two fonts and its mark has no anchor to share; and none covers both ﾟU+FF9F and ◕U+25D5, so a stack that answers the Katakana eyes cannot also answer the geometric ones. The last column is what fontconfig actually picks, which is the first family in its order that covers the character, not necessarily the only one that could. These are this server’s installed fonts, the set pango resolves for the PNG share previews; a visitor’s browser runs the same algorithm over whatever their system has.

Hence the treatment is opt-in per face rather than applied to all of them. A face carrying the half-width block has no alternative: only a Japanese family can paint those eyes, so it accepts whichever one the viewer happens to have. A face the generic already covers gains nothing and loses the guarantee — its geometric shapes stop being answered directly and are re-answered by fallback, at whatever advance the substituting font uses. Faces are laid out against the generic (white-space: nowrap, fixed min-width, clamp() sizes), so a substitution that tightens those advances can print a face with its eyes and mouth on top of each other.

One name per platform, because none of them is portable and the app ships no web font: the stack asks each major system for the Japanese family it already has, and the browser takes the first that exists. A viewer with none of the six lands on the generic in position 7 and sees the box again — the treatment raises the odds, it does not guarantee coverage. Presence measured here with fc-list; the platform column is where each family normally ships, not a measurement.

The class rebinds the custom property rather than setting font-family, so it reaches surfaces whose own stylesheet writes the font: shorthand: the value they read changes with them.