{"id":49045565,"url":"https://github.com/yamatoiizuka/palt-typesetting","last_synced_at":"2026-04-19T16:06:36.017Z","repository":{"id":215566882,"uuid":"739222795","full_name":"yamatoiizuka/palt-typesetting","owner":"yamatoiizuka","description":"Typesetting Library for Proportional Spacing","archived":false,"fork":false,"pushed_at":"2025-10-20T15:29:10.000Z","size":4286,"stargazers_count":103,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T16:42:11.919Z","etag":null,"topics":["javascript","typescript","typesetting"],"latest_commit_sha":null,"homepage":"https://palt.typesetting.jp","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yamatoiizuka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-01-05T03:55:20.000Z","updated_at":"2025-10-20T15:23:38.000Z","dependencies_parsed_at":"2024-02-11T14:23:32.378Z","dependency_job_id":"4a812320-04a3-4d7f-9859-a15a1a0183c8","html_url":"https://github.com/yamatoiizuka/palt-typesetting","commit_stats":null,"previous_names":["yamatoiizuka/palt-typesetting"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/yamatoiizuka/palt-typesetting","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamatoiizuka%2Fpalt-typesetting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamatoiizuka%2Fpalt-typesetting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamatoiizuka%2Fpalt-typesetting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamatoiizuka%2Fpalt-typesetting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamatoiizuka","download_url":"https://codeload.github.com/yamatoiizuka/palt-typesetting/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamatoiizuka%2Fpalt-typesetting/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32012824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","typescript","typesetting"],"created_at":"2026-04-19T16:06:34.682Z","updated_at":"2026-04-19T16:06:36.010Z","avatar_url":"https://github.com/yamatoiizuka.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Palt Typesetting\n\n## Typesetting Library for Proportional Spacing\n\n![a demo of Palt Typesetting](assets/demo.gif)\n\nPalt Typesetting は、美しいテキスト表示を実現するための JavaScript ライブラリです。和欧混植、およびツメ組み (`font-feature-settings: 'palt'`) の版面設計において、最大限の力を発揮します。\n\n四分アキの自動挿入、カーニングルールの適用、英語のような単語区切りでの改行など、洗練された組版機能を提供します。\n\n## Demo\n\n- [Interactive Demo](https://palt.typesetting.jp)\n- [Try on CodePen](https://codepen.io/yamatoiizuka-the-animator/pen/PoLGrZe)\n\n---\n\n## Getting Started\n\n### Install from NPM\n\nnpm でパッケージをインストールする場合\n\n```shell\nnpm install palt-typesetting\n```\n\n```javascript\nimport Typesetter from 'palt-typesetting'\nimport 'palt-typesetting/dist/typesetter.css'\n\n// Typesetter のインスタンスを作成\nconst typesetter = new Typesetter()\n\n// セレクターにマッチする要素に対して組版を適用\ntypesetter.renderToSelector('.my-class')\n```\n\n### Use from CDN\n\nWordPress や jQuery などの環境で使用する場合\n\n```html\n\u003chead\u003e\n  \u003c!-- head タグ内でスタイルの読み込み --\u003e\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/palt-typesetting@0.9.3/bundle/typesetter.min.css\" /\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003c!-- body 閉じタグの前でスクリプトの読み込み --\u003e\n  \u003cscript src=\"https://unpkg.com/palt-typesetting@0.9.3/bundle/typesetter.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n```html\n\u003cscript\u003e\n  // Typesetter のインスタンスを作成\n  const typesetter = new Typesetter()\n\n  // セレクターにマッチする要素に対して組版を適用\n  typesetter.renderToSelector('.my-class')\n\u003c/script\u003e\n```\n\n### Apply Custom CSS\n\n生成された組版用 HTML にカスタム CSS を適用\n\n```css\n/**\n * 共通のスタイリング（例）\n */\n.typesetting-wrapper {\n  /* プロポーショナルメトリクス（ツメ組み）の設定 */\n  font-feature-settings: 'palt';\n\n  /* 行間 */\n  line-height: 1.8;\n\n  /* 文字間 */\n  letter-spacing: 0.1em;\n\n  /**\n   * Safari のフォントレンダリング対策。\n   * 英数（.typesetting-latin）で -webkit-text-stroke を使う場合は必須。\n   * text-stroke-weight \u003e 0, text-stroke-color: transparent\n   */\n  -webkit-text-stroke: 0.01em transparent;\n}\n\n/**\n * 英数のみのスタイリング（例）\n */\n.typesetting-latin {\n  /* フォントの拡大・縮小 */\n  font-size: 105%;\n\n  /* ベースラインの調整 */\n  vertical-align: 0.02em;\n\n  /**\n   * 行間の調整。親要素 .typesetting-wrapper の行間と視覚的に合わせます。\n   * [.typesetting-wrapper の line-height] ÷ [フォントの拡大率] - [ベースラインの調整値の絶対値] × 2 \n   */\n  line-height: calc(1.8 / 1.05 - 0.02 * 2);\n\n  /* 文字間の調整 */\n  letter-spacing: 0.05em;\n\n  /* 文字の細らせ・太らせ */\n  -webkit-text-stroke: 0.01em #000;\n}\n```\n\n---\n\n## Typesetter Class\n\nPalt Typesetting では、Typesetter クラスを使用して HTML 文字列に組版を適用します。  \nライブラリの機能はオプションを通じてカスタマイズできます。\n\n### サンプルコード\n\n```javascript\n/**\n * options: TypesettingOptions\n * オプションの設定\n */\nconst options = {\n  // 単語や助詞など、単語区切りでの改行を行います。\n  useWordBreak: true,\n\n  // 英数を `.typesetting-latin` でラップします。\n  wrapLatin: true,\n\n  // 特例文字 `char` を `.typesetting-char-[label]` でラップします。\n  wrapChars: [\n    {\n      char: 'あ',\n      label: 'hira-a',\n      // output: \u003cspan class=\"typesetting-char-hira-a\"\u003eあ\u003c/span\u003e\n    },\n    {\n      char: '」',\n      // output: \u003cspan class=\"typesetting-char-」\"\u003e」\u003c/span\u003e\n      // label が未指定の場合は、char の値がそのまま label として使用されます。\n    },\n    {\n      char: ['(', ')'],\n      label: 'parenthesis',\n      // output: \u003cspan class=\"typesetting-char-parenthesis\"\u003e（）\u003c/span\u003e\n      // 配列で複数の文字をまとめて指定できます。\n      // 配列の長さが2以上の場合は label の指定が必須です。\n    },\n  ],\n\n  // 罫線などの分離禁則文字を `.typesetting-no-breaks` でラップし、文字間を 0 に設定します。\n  noSpaceBetweenNoBreaks: true,\n\n  // 四分アキスペースを自動で挿入します。\n  insertThinSpaces: true,\n\n  // 四分アキスペースの幅を設定します。\n  thinSpaceWidth: '0.2em',\n\n  // 特定の文字間のカーニングルールを設定します。\n  kerningRules: [\n    {\n      between: ['し', 'ま'],\n      value: '60',\n    },\n    {\n      between: ['す', '。'],\n      value: '-80',\n    },\n  ],\n}\n\n/**\n * Typesetter(options?: TypesettingOptions)\n * インスタンスの作成\n */\nconst typesetter = new Typesetter(options)\n\n/**\n * renderToSelector(selector: string): void\n * セレクターにマッチする要素に対して組版を適用\n */\ntypesetter.renderToSelector('div')\ntypesetter.renderToSelector('.my-class')\ntypesetter.renderToSelector('#my-id')\n\n/**\n * renderToElements(elements: string): void\n * HTML 文字列に組版を適用\n */\nconst elements = document.querySelectorAll('.my-class')\ntypesetter.renderToElements(elements)\n\n/**\n * render(srcHtml: string): string\n * 組版を適用した HTML 文字列の取得\n */\nconst srcHtml = '「日本語」とEnglish'\nconsole.log('output: ' + typesetter.render(srcHtml))\n// output: \u003cspan class=\"typeset typesetting-wrapper typesetting-word-break\"\u003e「日本語\u003cspan class=\"typesetting-char-」\"\u003e」\u003c/span\u003e\u003cspan class=\"typesetting-thin-space\" style=\"letter-spacing: 0.2em;\" data-content=\" \"\u003e\u003c/span\u003eと\u003cspan class=\"typesetting-thin-space\" style=\"letter-spacing: 0.2em;\" data-content=\" \"\u003e\u003c/span\u003e\u003cspan class=\"typesetting-latin\"\u003eEnglish \u003c/span\u003e\u003c/span\u003e\n```\n\n### コンストラクタ\n\n| コンストラクタ         | 説明                                                                                                  | 引数の型                       |\n| ---------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------ |\n| `Typesetter(options?)` | Typesetter インスタンスを作成します。\u003cbr\u003eオプションを指定することでカスタムの組版設定を適用できます。 | `options?: TypesettingOptions` |\n\n### メソッド\n\n| メソッド名                   | 説明                                                                  | 引数の型               | 戻り値の型 |\n| ---------------------------- | --------------------------------------------------------------------- | ---------------------- | ---------- |\n| `render(srcHtml)`            | スタイルを適用した HTML 文字列を返します。                            | `string`               | `string`   |\n| `renderToElements(elements)` | 指定された Element または Element の配列にスタイルを適用します。      | `Element \\| Element[]` | `void`     |\n| `renderToSelector(selector)` | 指定された CSS セレクタに一致するすべての要素にスタイルを適用します。 | `string`               | `void`     |\n\n### オプション\n\n| オプション名             | 説明                                                                                                                                                                                                                                                                                             | オプションの型                                           | デフォルト値 |\n| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ------------ |\n| `useWordBreak`           | 単語や助詞など、単語区切りでの改行を行います。                                                                                                                                                                                                                                                   | `boolean`                                                | `true`       |\n| `wrapLatin`              | 英数を `span.typesetting-latin` でラップします。                                                                                                                                                                                                                                                 | `boolean`                                                | `true`       |\n| `wrapChars`              | 特例文字の設定です。指定された文字 `char` をラッピングし、`\u003cspan\u003e` タグで囲みます。ラッピングされた文字には、`span.typesetting-char-[label]` の形式で CSS クラスが付与されます。\u003cbr\u003e※ 指定が 1 文字の場合は、`label` を省略できます。その際、`char` の値がそのままクラス名の一部に使用されます。 | `{char: string \\| string[], label?: string}[]`           | `[]`         |\n| `noSpaceBetweenNoBreaks` | 罫線などの分離禁則文字を `span.typesetting-no-breaks` でラップし、文字間を 0 に設定します。                                                                                                                                                                                                      | `boolean`                                                | `true`       |\n| `insertThinSpaces`       | 四分アキスペースを自動で挿入します。                                                                                                                                                                                                                                                             | `boolean`                                                | `true`       |\n| `thinSpaceWidth`         | 四分アキスペースの幅を設定します。\u003cbr\u003e※四分アキは本来 0.25em ですが、視覚上の補正としてデフォルト値を 0.2em に設定しています。                                                                                                                                                                   | `string`                                                 | `'0.2em'`    |\n| `kerningRules`           | 特定の文字間のカーニングルールを設定します。                                                                                                                                                                                                                                                     | `{between: [string, string], value: string \\| number}[]` | `[]`         |\n\n### 生成される CSS クラス\n\n| CSS クラス名                | 説明                                                                                                               |\n| --------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| `.typesetting-wrapper`      | HTML 文字列中のテキストコンテンツをラップします。\u003cbr\u003eオプションの指定に関わらず、常に生成されます。                |\n| `.typesetting-word-break`   | HTML 文字列中のテキストコンテンツをラップします。\u003cbr\u003e`useWordBreak: true` のときに生成されます。                   |\n| `.typesetting-latin`        | テキストコンテンツ中の英数をラップします。\u003cbr\u003e`wrapLatin: true` のときに生成されます。                             |\n| `.typesetting-char-[label]` | `wrapChars` で指定された特例文字に付与される CSS クラスです。\u003cbr\u003e指定した `label` がクラス名の一部に使用されます。 |\n| `.typesetting-no-breaks`    | テキストコンテンツ中の分離禁則文字をラップします。\u003cbr\u003e`noSpaceBetweenNoBreaks: true` のときに生成されます。        |\n| `.typesetting-thin-space`   | 挿入される四分アキスペースエレメントの CSS クラスです。\u003cbr\u003e`insertThinSpaces: true` のときに生成されます。         |\n| `.typesetting-kerning`      | 挿入されるカーニングエレメントの CSS クラスです。\u003cbr\u003e有効な `kerningRules` が存在するときに生成されます。          |\n\n---\n\n## for Typescript\n\nTypeScript の型定義を提供しています。完全な型定義は[こちら](https://github.com/yamatoiizuka/palt-typesetting/blob/main/types/index.d.ts)をご参照ください。\n\n### サンプルコード\n\n```typescript\nimport Typesetter from 'palt-typesetting'\nimport type { TypesettingOptions, KerningRule, WrapChar } from 'palt-typesetting/types'\nimport 'palt-typesetting/dist/typesetter.css'\n\nconst chars: WrapChar[] = [\n  {\n    char: 'あ',\n    label: 'hira-a',\n  },\n  {\n    char: ['(', ')'],\n    label: 'parenthesis',\n  },\n]\n\nconst kerning: KerningRule[] = [\n  {\n    between: ['し', 'ま'],\n    value: '60',\n  },\n]\n\nconst options: TypesettingOptions = {\n  thinSpaceWidth: '0.25em',\n  kerningRules: kerning,\n  wrapChars: chars,\n}\n\nconst typeset = new Typesetter(options)\ntypesetter.renderToSelector('.my-class')\n```\n\n---\n\n## for Frameworks\n\nモダンな JavaScript フレームワーク用のサンプル集です。\n\n\u003cdetails\u003e\n  \u003csummary\u003eReact\u003c/summary\u003e\n\nTypesetting コンポーネントの作成\n\n`components/Typesetting.jsx`\n\n```jsx\n'use client'\n\nimport React, { useEffect, useState } from 'react'\nimport Typesetter from 'palt-typesetting'\nimport 'palt-typesetting/dist/typesetter.css'\n\nimport './Typesetting.css'\n\nconst Typesetting = ({ content }) =\u003e {\n  const [renderedHtml, setRenderedHtml] = useState('')\n\n  useEffect(() =\u003e {\n    const typesetter = new Typesetter()\n    setRenderedHtml(typesetter.render(content))\n  }, [content])\n\n  return \u003cspan dangerouslySetInnerHTML={{ __html: renderedHtml }} /\u003e\n}\n\nexport default Typesetting\n```\n\n`components/Typesetting.css`\n\n```css\n/* 共通のスタイル */\n.typesetting-wrapper {\n  font-feature-settings: 'palt';\n  letter-spacing: 0.1em;\n}\n\n/* 英数のスタイル */\n.typesetting-latin {\n  font-size: 105%;\n  letter-spacing: 0.05em;\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eAstro.js\u003c/summary\u003e\n\nTypesetting コンポーネントの作成\n\n`components/Typesetting.astro`\n\n```astro\n---\nimport Typesetter from 'palt-typesetting'\nimport 'palt-typesetting/dist/typesetter.css'\n\nconst { content } = Astro.props\nconst slot = await Astro.slots.render('default')\nconst srcHtml = content || slot || ''\n\nconst typesetter = new Typesetter();\n---\n\n\u003cFragment set:html={typesetter.render(srcHtml)} /\u003e\n\n\u003cstyle is:global\u003e\n  /* 共通のスタイル */\n  .typesetting-wrapper {\n    font-feature-settings: 'palt';\n    letter-spacing: 0.1em;\n  }\n\n  /* 英数のスタイル */\n  .typesetting-latin {\n    font-size: 105%;\n    letter-spacing: 0.05em;\n  }\n\u003c/style\u003e\n```\n\nTypesetting コンポーネントの読み込み\n\n`pages/index.astro`\n\n```astro\n---\nimport Typeset from '../components/Typesetting.astro'\n---\n\n\u003cdiv\u003e\n  \u003c!-- props を使った書き方 --\u003e\n  \u003cTypesetting content=\"「日本語」とEnglish、晴れ・28度。\" /\u003e\n\n  \u003c!-- slot を使った書き方 --\u003e\n  \u003cTypesetting\u003e\n    \u003ca href=\"/work\"\u003e作品ページ\u003c/a\u003e\n  \u003c/Typesetting\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n p {\n  font-size: 1.8rem;\n }\n\u003c/style\u003e\n```\n\n\u003c/details\u003e\n\n## Notes\n\n### 環境要件\n\nPalt Typesetting ライブラリは、テキストを言語固有のセグメントに分割する `Intl.Segmenter` という機能に一部依存しています。そのため、以下の環境要件があります。\n\n**SSG など、サーバーサイドで実行する場合**\n\n- Node.js 16.0.0 以上\n\n**クライアントサイドで実行する場合**\n\n- Intl.Segmenter をサポートしているブラウザ\n\nクライアントサイドで実行する場合、この機能は一部のブラウザで利用できません。Palt Typesetting ライブラリは、Firefox などの `Intl.Segmenter` がサポートされていない環境[^1] では、`useWordBreak`（単語区切りでの改行）と `insertThinSpaces`（四分アキの自動挿入）オプションがスキップされます。全てのモダンブラウザで同様の見え方を再現するには、サーバーサイドでの事前処理（Astro.js での SSG など）が必要となります。\n\n`Intl.Segmenter` の対応状況については、[Can I use...](https://caniuse.com/?search=Intl.Segmenter) で確認できます。\n\n[^1]: Firefox では、バージョン 125 から Intl.Segmenter のサポートが予定されています。\n\n### 注意事項\n\nPalt Typesetting ライブラリは HTML 入力をサポートしていますが、入力された HTML をサニタイズする機能は**含まれていません**。 入力を信頼できない場合は、適切なサニタイザライブラリと共に使用することを強く推奨します。\n\n## Author\n\n[飯塚 大和 (Yamato Iizuka)](https://yamatoiizuka.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamatoiizuka%2Fpalt-typesetting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamatoiizuka%2Fpalt-typesetting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamatoiizuka%2Fpalt-typesetting/lists"}