Skip to content

feat: add CJK line-breaking demo#79

Open
defpis wants to merge 1 commit intochenglou:mainfrom
defpis:feat/cjk-line-breaking-demo
Open

feat: add CJK line-breaking demo#79
defpis wants to merge 1 commit intochenglou:mainfrom
defpis:feat/cjk-line-breaking-demo

Conversation

@defpis
Copy link
Copy Markdown
Contributor

@defpis defpis commented Apr 2, 2026

Summary

Interactive CJK kinsoku (禁則) line-breaking demo at /demos/cjk-line-breaking.

Shows how Pretext enforces line-start/line-end prohibited punctuation rules and left-sticky marks during CJK text layout — with live width adjustment, auto-animation, character highlighting, and bilingual UI.

New files

File Description
pages/demos/cjk-line-breaking.data.ts Demo text (324 chars covering all 39 kinsoku characters), i18n strings, 3 rule group definitions
pages/demos/cjk-line-breaking.html Page skeleton + styles, consistent with existing demo design system
pages/demos/cjk-line-breaking.ts Canvas rendering, width slider, auto animation, EN/中文 toggle, rule chip highlight interaction

Modified files

File Change
pages/demos/index.html Add CJK Line Breaking card to demo landing page

Features

  • Width slider (160–600px) with live canvas reflow
  • Auto mode — smooth width cycling at 20px/sec, stops on manual slider interaction
  • Character highlight — click any rule chip to highlight all occurrences in the preview
  • Bilingual — EN/中文 toggle for all UI text, rule titles, descriptions, and entry names
  • 3 rule categories: line-start prohibited (26 chars), line-end prohibited (10 chars), left-sticky punctuation (3 chars)
  • HiDPI canvas with dimension caching to avoid unnecessary resize
  • Clean RAF lifecycle — no frame leak when auto animation stops

Test plan

  • bun start → visit /demos/cjk-line-breaking, canvas renders Chinese text correctly
  • Drag slider → text reflows in real time
  • Check Auto → width animates smoothly; uncheck → stops cleanly
  • Click rule chips → characters highlight in canvas; click again → deselect
  • Toggle EN/中文 → all text switches language
  • Visit /demos → CJK Line Breaking card appears and links correctly
  • npx tsc --noEmit passes with no errors

🤖 Generated with Claude Code

@defpis defpis force-pushed the feat/cjk-line-breaking-demo branch 3 times, most recently from 700a6ee to efe02eb Compare April 2, 2026 04:35
@defpis defpis mentioned this pull request Apr 2, 2026
Interactive demo showing how Pretext enforces CJK kinsoku (禁則) rules
during line breaking. Includes:

- Canvas-rendered text preview with adjustable width slider
- Auto-animation mode for continuous width cycling
- Click-to-highlight for any kinsoku character
- Bilingual UI (EN/中文) with full rule reference
- 39 kinsoku characters across 3 rule categories:
  line-start prohibited, line-end prohibited, left-sticky punctuation
- Demo text covering all implemented kinsoku characters

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@defpis defpis force-pushed the feat/cjk-line-breaking-demo branch from efe02eb to a7fa85d Compare April 2, 2026 14:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant