# diantenjeom

**點 · 点 · 점** — /ti̯ɛn˨˩˦ ten tɕʌm/, or, as you might say in English, /ˈdiː.æn.tɛn.dʒəm/

A set of punctuation-only CJK fonts, extracted from
Noto Sans CJK +
Noto Serif CJK, shipped as variable fonts.

The name strings together the readings of **點** ("dot") in Mandarin (*diǎn*),
Japanese (*ten*), and Korean (*jeom*) — the three reading traditions whose
punctuation conventions the project sets out to disentangle.

## Why

CJK text routinely mixes a Latin body font with a CJK fallback. That fallback
also has to render the punctuation — and different conventions render the
*same* Unicode punctuation differently (the position of `。`, the shape of
`「」`, the width of `、`, where `〕，` should squeeze). Bundling punctuation
with whichever CJK font happens to be loaded forces one convention onto
everyone.

**diantenjeom** pulls just the punctuation glyphs out of Noto CJK and ships
them as small variable fonts you drop into a font fallback chain — CSS
`font-family`, InDesign composite fonts, app text styles, anywhere fallback
is supported — and pick the punctuation style independently from the body
face.

## Variants

Each style ships as a separate variable font; pick by punctuation positioning
convention, not by language tag.

Four variants — three named after the authoritative regional standard whose
punctuation positioning they follow (JIS / MOE / GB), plus KV for Korean
vertical typesetting. Naming is intentionally decoupled from text locale,
so you can pair any variant with any CJK text font (e.g. Japanese text
with MOE punctuation, TC text with JIS punctuation).

| Family                          | Style    | Punctuation convention                                |
|---------------------------------|----------|-------------------------------------------------------|
| `Diantenjeom Sans JIS`          | Sans     | JIS X 4051 — 、，。 hug the top-left corner of the em |
| `Diantenjeom Serif JIS`         | Serif    | JIS X 4051                                            |
| `Diantenjeom Sans MOE`          | Sans     | 教育部《重訂標點符號手冊》— 、，。 centred             |
| `Diantenjeom Serif MOE`         | Serif    | 同上                                                  |
| `Diantenjeom Sans GB`           | Sans     | GB/T 15834 — 、，。：；！？ side-aligned              |
| `Diantenjeom Serif GB`          | Serif    | 同上                                                  |
| `Diantenjeom Sans KV`           | Sans     | Korean vertical — JP-based, `：` upright; no standards body |
| `Diantenjeom Serif KV`          | Serif    | 同上                                                  |

Each variant exposes the full `wght` axis (Sans 100–900, Serif 200–900) with
named instances on the CSS-standard grid: Thin / ExtraLight / Light / Regular
/ Medium / SemiBold / Bold / ExtraBold / Black.

**KV** is descriptive, not an authority reference — Korean has no standardised
vertical-punctuation spec (한글 맞춤법 dropped its vertical chapter in 2015). It
reuses the JP design with `：` kept upright, and is meant for vertical contexts
(signage, calligraphy, mixed Hangul–Hanja prose). See
[docs/notes/korean-vertical-punctuation.md](docs/notes/korean-vertical-punctuation.md).

## Usage

Install:

```sh
npm install @hanzi.pro/diantenjeom
```

Load the stylesheet — it ships the `@font-face` blocks:

```css
@import "@hanzi.pro/diantenjeom/css";
```

or, with a bundler:

```js
import "@hanzi.pro/diantenjeom";
```

The default stylesheet ships every convention (JIS / MOE / GB / KV). If you
only need one, import just that standard to skip the others' `@font-face`
rules:

```css
@import "@hanzi.pro/diantenjeom/moe"; /* also: /jis, /gb, /kv */
```

The default uses `font-display: swap` — the host font's punctuation shows
immediately, then swaps to Diantenjeom's positioning once the (tiny) font
loads. The fallback glyph is fully legible, so the only cost is a brief
in-em-box shift. If you'd rather have **no positional flash** (at the cost of
briefly-invisible punctuation on a slow fetch), or a performance-first mode
that applies the font **only if it loads near-instantly**, import the `block`
or `optional` variant instead:

```css
@import "@hanzi.pro/diantenjeom/block";        /* block, every convention */
@import "@hanzi.pro/diantenjeom/block/moe";    /* block, MOE only         */
@import "@hanzi.pro/diantenjeom/optional/jis"; /* optional, JIS only      */
```

Then put a Diantenjeom family **before** your CJK text font in the
`font-family` fallback chain:

```css
body {
  font-family:
    "Helvetica Neue",        /* Latin body                              */
    "Diantenjeom Sans MOE",  /* punctuation — must precede the CJK font */
    "Noto Sans TC",          /* CJK body                                */
    sans-serif;
}
```

Each `@font-face` carries a `unicode-range` covering only the ~30 punctuation
codepoints, so the browser pulls Diantenjeom **only** for those characters and
falls through to the next font for everything else (Han, kana, Hangul, Latin).
That's why it has to sit ahead of the CJK font — otherwise the CJK font's own
punctuation wins. Pick the convention independently of your text language: pair
`Diantenjeom Sans MOE` with Japanese text, `Diantenjeom Serif JIS` with
Traditional Chinese, and so on.

> **Markup caveat.** Browser pair-squeezing (`text-spacing-trim`) only collapses
> adjacent punctuation that share an inline formatting context. Splitting two
> glyphs across separate *atomic-inline* boxes — `display: inline-block` /
> `inline-flex` / `inline-grid`, as some frameworks emit when wrapping
> characters — silently disables the squeeze; plain inline `<span>`s are fine.
> See [docs/pair-squeeze-and-markup.md](docs/pair-squeeze-and-markup.md).

### From a CDN (no install)

jsDelivr and unpkg mirror every published file straight from npm — no install,
no hosting. Point an `@import` or `<link>` at the file you want:

```css
@import "https://cdn.jsdelivr.net/npm/@hanzi.pro/diantenjeom@0.1.0/dist/diantenjeom.css";
/* one convention:    …/dist/moe.css                                   */
/* block / optional:  …/dist/block/moe.css   …/dist/optional/jis.css   */
```

```html
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@hanzi.pro/diantenjeom@0.1.0/dist/diantenjeom.css">
```

unpkg works identically — swap the host for `https://unpkg.com/`. The
`@font-face` `src` paths are relative, so the woff2 files resolve against the
same CDN automatically; you only ever reference the CSS. **Pin a version**
(`@0.1.0`) in production so the CDN can cache the response immutably — an
unpinned URL resolves to the latest release and is served with a short TTL.

### Without a build step

Copy `dist/diantenjeom.css` and `dist/fonts/` to your site and link the CSS
directly. The `@font-face` `src` URLs are relative to the stylesheet, so keep
`fonts/` next to it.

### Desktop apps (InDesign, etc.)

Install the OTFs from `dist/fonts/` and add a Diantenjeom family ahead of your
CJK font in a composite-font / fallback list — the same ordering rule applies.

## Status

Early. APIs, file names, and the punctuation codepoint set are all subject to
change. More docs to come.

## TODO

See [docs/TODO.md](docs/TODO.md).

## License

SIL Open Font License 1.1, inherited from Noto CJK.