Japanese pitch-accent visualization library

A zero-dependency SVG renderer for binary Japanese pitch accent. It recreates the measurements and SVG line construction used in the Kanshudo pitch-accent guide: 33px-tall diagrams, 24px mora spacing, y=3/y=30 pitch levels, and rounded 2.5px lavender transitions.

• Demo/docs site: https://ganqqwerty.github.io/jp-pitch-accent-visualization-library/
• Repository: https://github.com/ganqqwerty/jp-pitch-accent-visualization-library

Run npm run verify, then npm run serve and open http://localhost:4173/.

import { createPitchAccent } from "./src/pitch-accent.js";

document.body.append(createPitchAccent({
  reading: "ひとり",
  pitch: "LHL",
  tailPitch: "L",
  accent: 2,
  theme: "dark",
  lineParams: {
    stroke: "#ff7a59",
    strokeWidth: 4,
    strokeLinecap: "square",
    strokeLinejoin: "miter"
  },
  fontParams: {
    fontFamily: "\"Hiragino Sans\", \"Noto Sans JP\", sans-serif",
    fontSize: 20,
    fontWeight: 600,
    labelFontSize: "15px"
  },
  geometry: {
    highY: 5,
    lowY: 28
  }
}));

pitch contains one L/H value for each mora. tailPitch is optional and controls the endpoint immediately after the word. It is how the library precisely represents Kanshudo’s “pitch of the word that comes next” convention.

Customization:

• theme: omit it to inherit the page theme, pass "light" or "dark" to force a diagram theme, or pass an object with lineStroke, textFill, particleFill, labelBackgroundFill, and labelFill.
• lineParams: optional SVG line attributes: stroke, strokeWidth, strokeLinecap, strokeLinejoin, strokeOpacity, strokeDasharray, strokeDashoffset, and fill.
• fontParams: optional text styling values: fontFamily, fontSize, fontWeight, fontStyle, letterSpacing, particleFontSize, particleFontWeight, labelFontSize, and labelFontWeight.
• geometry: optional graph-shape overrides such as highY, lowY, moraWidth, lineStart, normalEndInset, and transitionEndInset.

Font parameters are implemented as CSS variables. Override them globally when a whole app should use the same typography:

:root {
  --pitch-font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  --pitch-font-size: 20px;
  --pitch-font-weight: 600;
  --pitch-label-font-size: 15px;
}

If you change font size significantly, also review geometry values such as height, textY, labelY, highY, and lowY. The default geometry stays Kanshudo-compatible.

The root demo recreates the four reference types and help.html provides a searchable 100 example human-verification page, including deliberately arbitrary LH contours. Both pages support light and dark themes.

Package imports

When used as an installed package, import the library and stylesheet like this:

import { createPitchAccent, type CreatePitchAccentOptions } from "jp-pitch-accent-visualization-library";
import "jp-pitch-accent-visualization-library/style.css";

The package includes TypeScript declarations and exports a dependency-free jQuery adapter:

import { installPitchAccentPlugin } from "jp-pitch-accent-visualization-library/jquery";

See docs/integrations.md for TypeScript, jQuery, React, and Angular usage examples.