Repository: yamatoiizuka/palt-typesetting
Pull request #149 (2024-03-23 09:46:58)

Change prefix from 'typeset' to 'typesetting'
`.typeset-latin` などの CSS クラス名を `.typesetting-latin` 等に変更し、命名規則に一貫性を持たせました。
またこの変更に伴い、後方互換のために使用していた `.typeset` クラスは削除されました。

**命名規則**
- クラス名：`Typesetter`
- コンポーネントや CSS クラスなど、`Typesetter` により処理されたものに対する命名：`Typesetting` or `typesetting`


Patch:
diff --git a/README.md b/README.md
index 6b4a45e..bb0e41e 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ WordPress や jQuery などの環境で使用する場合
 /**
  * 共通のスタイリング（例）
  */
-.typeset-wrapper {
+.typesetting-wrapper {
   /* プロポーショナルメトリクス（ツメ組み）の設定 */
   font-feature-settings: 'palt';
 
@@ -82,7 +82,7 @@ WordPress や jQuery などの環境で使用する場合
 
   /**
    * Safari のフォントレンダリング対策。
-   * 英数（.typeset-latin）で -webkit-text-stroke を使う場合は必須。
+   * 英数（.typesetting-latin）で -webkit-text-stroke を使う場合は必須。
    * text-stroke-weight > 0, text-stroke-color: transparent
    */
   -webkit-text-stroke: 0.01em transparent;
@@ -91,7 +91,7 @@ WordPress や jQuery などの環境で使用する場合
 /**
  * 英数のみのスタイリング（例）
  */
-.typeset-latin {
+.typesetting-latin {
   /* フォントの拡大・縮小 */
   font-size: 105%;
 
@@ -99,8 +99,8 @@ WordPress や jQuery などの環境で使用する場合
   vertical-align: 0.02em;
 
   /**
-   * 行間の調整。親要素 .typeset-wrapper の行間と視覚的に合わせます。
-   * [.typeset-wrapper の line-height] ÷ [フォントの拡大率] - [ベースラインの調整値の絶対値] × 2 
+   * 行間の調整。親要素 .typesetting-wrapper の行間と視覚的に合わせます。
+   * [.typesetting-wrapper の line-height] ÷ [フォントの拡大率] - [ベースラインの調整値の絶対値] × 2 
    */
   line-height: calc(1.8 / 1.05 - 0.02 * 2);
 
@@ -116,7 +116,7 @@ WordPress や jQuery などの環境で使用する場合
 
 ## Typesetter Class
 
-Palt Typesetting では、Typesetter クラスを使用して HTML テキストに組版を適用します。  
+Palt Typesetting では、Typesetter クラスを使用して HTML 文字列に組版を適用します。  
 ライブラリの機能はオプションを通じてカスタマイズできます。
 
 ### サンプルコード
@@ -130,10 +130,10 @@ const options = {
   // 単語や助詞など、単語区切りでの改行を行います。
   useWordBreak: true,
 
-  // 英数を `.typeset-latin` でラップします。
+  // 英数を `.typesetting-latin` でラップします。
   wrapLatin: true,
 
-  // 罫線などの分離禁則文字を `.typeset-no-breaks` でラップし、文字間を 0 に設定します。
+  // 罫線などの分離禁則文字を `.typesetting-no-breaks` でラップし、文字間を 0 に設定します。
   noSpaceBetweenNoBreaks: true,
 
   // 四分アキスペースを自動で挿入します。
@@ -171,18 +171,18 @@ typesetter.renderToSelector('#my-id')
 
 /**
  * renderToElements(elements: string): void
- * HTML 要素に組版を適用
+ * HTML 文字列に組版を適用
  */
 const elements = document.querySelectorAll('.my-class')
 typesetter.renderToElements(elements)
 
 /**
  * render(srcHtml: string): string
- * 組版を適用した HTML の取得
+ * 組版を適用した HTML 文字列の取得
  */
 const srcHtml = '「日本語」とEnglish'
 console.log('output: ' + typesetter.render(srcHtml))
-// output: <span class="typeset typeset-wrapper typeset-word-break">「日本語」<span class="typeset-thin-space" style="letter-spacing: 0.2em;" data-content=" "></span>と<span class="typeset-thin-space" style="letter-spacing: 0.2em;" data-content=" "></span><span class="typeset-latin">English </span></span>
+// output: <span class="typeset typesetting-wrapper typesetting-word-break">「日本語」<span class="typesetting-thin-space" style="letter-spacing: 0.2em;" data-content=" "></span>と<span class="typesetting-thin-space" style="letter-spacing: 0.2em;" data-content=" "></span><span class="typesetting-latin">English </span></span>
 ```
 
 ### コンストラクタ
@@ -201,25 +201,25 @@ console.log('output: ' + typesetter.render(srcHtml))
 
 ### オプション
 
-| オプション名             | 説明                                                                                    | オプションの型                                                                | デフォルト値 |
-| ------------------------ | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------------ |
-| `useWordBreak`           | 単語や助詞など、単語区切りでの改行を行います。                                          | `boolean`                                                                     | `true`       |
-| `wrapLatin`              | 英数を `span.typeset-latin` でラップします。                                            | `boolean`                                                                     | `true`       |
-| `noSpaceBetweenNoBreaks` | 罫線などの分離禁則文字を `span.typeset-no-breaks` でラップし、文字間を 0 に設定します。 | `boolean`                                                                     | `true`       |
-| `insertThinSpaces`       | 四分アキスペースを自動で挿入します。                                                    | `boolean`                                                                     | `true`       |
-| `thinSpaceWidth`         | 四分アキスペースの幅を設定します。`insertThinSpaces: true` のときのみ有効です。         | `string`                                                                      | `'0.2em' `   |
-| `kerningRules`           | 特定の文字間のカーニングルールを設定します。                                            | `{`<br>`　between: [string, string],`<br>`　value: string \| number`<br>`}[]` | `[]`         |
+| オプション名             | 説明                                                                                        | オプションの型                                                                | デフォルト値 |
+| ------------------------ | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------------ |
+| `useWordBreak`           | 単語や助詞など、単語区切りでの改行を行います。                                              | `boolean`                                                                     | `true`       |
+| `wrapLatin`              | 英数を `span.typesetting-latin` でラップします。                                            | `boolean`                                                                     | `true`       |
+| `noSpaceBetweenNoBreaks` | 罫線などの分離禁則文字を `span.typesetting-no-breaks` でラップし、文字間を 0 に設定します。 | `boolean`                                                                     | `true`       |
+| `insertThinSpaces`       | 四分アキスペースを自動で挿入します。                                                        | `boolean`                                                                     | `true`       |
+| `thinSpaceWidth`         | 四分アキスペースの幅を設定します。`insertThinSpaces: true` のときのみ有効です。             | `string`                                                                      | `'0.2em' `   |
+| `kerningRules`           | 特定の文字間のカーニングルールを設定します。                                                | `{`<br>`　between: [string, string],`<br>`　value: string \| number`<br>`}[]` | `[]`         |
 
 ### 生成される CSS クラス
 
-| CSS クラス名          | 説明                                                           | オプションによる生成の条件     |
-| --------------------- | -------------------------------------------------------------- | ------------------------------ |
-| `.typeset-wrapper`    | ソースとなる HTML 文字列中のテキストコンテンツをラップします。 | 常に生成                       |
-| `.typeset-word-break` | ソースとなる HTML 文字列中のテキストコンテンツをラップします。 | `useWordBreak: true`           |
-| `.typeset-latin`      | テキストコンテンツ中の英数をラップします。                     | `wrapLatin: true`              |
-| `.typeset-no-breaks`  | テキストコンテンツ中の分離禁則文字をラップします。             | `noSpaceBetweenNoBreaks: true` |
-| `.typeset-thin-space` | 挿入される四分アキスペースエレメントの CSS クラスです。        | `insertThinSpaces: true`       |
-| `.typeset-kerning`    | 挿入されるカーニングエレメントの CSS クラスです。              | 有効な `kerningRules` が存在   |
+| CSS クラス名              | 説明                                                    | オプションによる生成の条件     |
+| ------------------------- | ------------------------------------------------------- | ------------------------------ |
+| `.typesetting-wrapper`    | HTML 文字列中のテキストコンテンツをラップします。       | 常に生成                       |
+| `.typesetting-word-break` | HTML 文字列中のテキストコンテンツをラップします。       | `useWordBreak: true`           |
+| `.typesetting-latin`      | テキストコンテンツ中の英数をラップします。              | `wrapLatin: true`              |
+| `.typesetting-no-breaks`  | テキストコンテンツ中の分離禁則文字をラップします。      | `noSpaceBetweenNoBreaks: true` |
+| `.typesetting-thin-space` | 挿入される四分アキスペースエレメントの CSS クラスです。 | `insertThinSpaces: true`       |
+| `.typesetting-kerning`    | 挿入されるカーニングエレメントの CSS クラスです。       | 有効な `kerningRules` が存在   |
 
 ---
 
@@ -280,14 +280,14 @@ const typesetter = new Typesetter();
 <style is:global>
   /* 合成フォントのイメージでスタイルを設定 */
 
- .typeset-wrapper {
+ .typesetting-wrapper {
   font-feature-settings: 'palt';
   line-height: 1.8;
   letter-spacing: 0.1em;
   /* ...その他のスタイル */
 }
 
-.typeset-latin {
+.typesetting-latin {
   font-size: 105%;
   letter-spacing: 0.05em;
   /* ...その他のスタイル */
diff --git a/demo/src/style.css b/demo/src/style.css
index df1fa57..eb48927 100644
--- a/demo/src/style.css
+++ b/demo/src/style.css
@@ -54,10 +54,10 @@ h1 {
 /*
  * 共通のスタイリング
  */
-.typeset-wrapper {
+.typesetting-wrapper {
   /*
    * Safari のフォントレンダリング対策。
-   * 英数（.typeset-latin）で -webkit-text-stroke を使う場合は必須。
+   * 英数（.typesetting-latin）で -webkit-text-stroke を使う場合は必須。
    * text-stroke-weight > 0, text-stroke-color: transparent
    */
   -webkit-text-stroke: 0.01em transparent;
@@ -66,7 +66,7 @@ h1 {
 /*
  * 英数のみのスタイリング
  */
-.typeset-latin {
+.typesetting-latin {
   /* フォントの拡大・縮小 */
   font-size: 104%;
 
@@ -74,8 +74,8 @@ h1 {
   vertical-align: 0.02em;
 
   /*
-   * 行間の調整。親要素 .typeset の行間と視覚的に合わせます。
-   * [.typesetの line-height] ÷ [フォントの拡大率] - [ベースラインの調整値の絶対値] × 2 
+   * 行間の調整。親要素 .typesetting の行間と視覚的に合わせます。
+   * [.typesettingの line-height] ÷ [フォントの拡大率] - [ベースラインの調整値の絶対値] × 2 
    */
   line-height: calc(2 / 1.04 - 0.02 * 2);
 
@@ -97,10 +97,10 @@ h1 {
   line-height: 1.8;
 }
 
-.en-section .typeset-latin {
+.en-section .typesetting-latin {
   /*
-   * 行間の調整。親要素 .typesetの行間と視覚的に合わせます。
-   * [.typesetの line-height] ÷ [フォントの拡大率] - [ベースラインの調整値の絶対値] × 2 
+   * 行間の調整。親要素 .typesetting-wrapper の行間と視覚的に合わせます。
+   * [.typesetting-wrapper の line-height] ÷ [フォントの拡大率] - [ベースラインの調整値の絶対値] × 2 
    */
   line-height: calc(1.8 / 1.05 - 0.02 * 2);
 }
@@ -213,7 +213,7 @@ input:checked + .slider:before {
   color: var(--color-sub);
 }
 
-#target label .typeset-latin {
+#target label .typesetting-latin {
   cursor: pointer;
   color: var(--color-sub);
   -webkit-text-stroke-color: var(--color-sub);
@@ -233,7 +233,7 @@ input:checked + .slider:before {
   color: var(--color-main);
 }
 
-#target input:checked + label .typeset-latin {
+#target input:checked + label .typesetting-latin {
   color: var(--color-main);
   -webkit-text-stroke-color: var(--color-main);
 }
diff --git a/src/typesetter.css b/src/typesetter.css
index c6dccd2..9032d99 100644
--- a/src/typesetter.css
+++ b/src/typesetter.css
@@ -13,28 +13,28 @@
  * Safari のリーダーモード対応
  * See: {@link https://github.com/yamatoiizuka/palt-typesetting/issues/96}
  */
-.typeset wbr {
+.typesetting-wrapper wbr {
   visibility: hidden;
 }
 
-.typeset-word-break {
+.typesetting-word-break {
   word-break: keep-all;
   overflow-wrap: anywhere;
 }
 
-.typeset-thin-space,
-.typeset-kerning {
+.typesetting-thin-space,
+.typesetting-kerning {
   letter-spacing: 0; /* 親要素から継承される letter-spacing の影響を無視します。 */
   user-select: none; /* ユーザーによるテキストのコピーを無効にします。 */
 }
 
-.typeset-thin-space[data-content]::after,
-.typeset-kerning[data-content]::after {
+.typesetting-thin-space[data-content]::after,
+.typesetting-kerning[data-content]::after {
   content: attr(data-content); /* Space または No-Break Space */
   font-family: ling-one; /* カスタムフォントのスペースを使用します。 */
   line-height: 0; /* 空白による行の高さの影響を無視します。 */
 }
 
-.typeset-no-breaks {
+.typesetting-no-breaks {
   letter-spacing: 0; /* 親要素から継承される letter-spacing の影響を無視します。 */
 }
diff --git a/src/util-tags.ts b/src/util-tags.ts
index 3682366..12ebbb1 100644
--- a/src/util-tags.ts
+++ b/src/util-tags.ts
@@ -1,4 +1,4 @@
-const prefix = 'typeset'
+const prefix = 'typesetting'
 
 /**
  * HTML文書内で単語の区切りを示し、必要に応じて改行の挿入を許可する`<wbr>`タグを生成します。
@@ -44,21 +44,20 @@ const createKerning = (kerningValue: number, breakable?: boolean): string => {
 }
 
 /**
- * 単語区切りでの改行を行う場合にのみ、与えられたテキストに`typeset-word-break`クラスを適用します。
+ * 単語区切りでの改行を行う場合にのみ、与えられたテキストに`typesetting-word-break`クラスを適用します。
  * @param text - クラスを適用するテキスト。
  * @param useWordBreak - 単語区切りでの改行を行うかどうか。
  * @return クラス適用されたテキストを含む`span`タグ。
  */
 const applyWrapperStyle = (text: string, useWordBreak?: boolean): string => {
-  // 後方互換性のため、.typeset を保持
-  const wrapperName = `${prefix} ${prefix}-wrapper`
+  const wrapperName = `$${prefix}-wrapper`
   const wordBreakName = `${prefix}-word-break`
   const className = useWordBreak ? `${wrapperName} ${wordBreakName}` : wrapperName
   return createStyledSpan(text, className)
 }
 
 /**
- * 与えられたセグメントに`typeset-latin`クラスを適用します。
+ * 与えられたセグメントに`typesetting-latin`クラスを適用します。
  * @param segment - クラスを適用するセグメント。
  * @return クラス適用されたセグメントを含むspanタグを返します。
  */
@@ -68,7 +67,7 @@ const applyLatinStyle = (segment: string): string => {
 }
 
 /**
- * 与えられたセグメントに`typeset-no-breaks`クラスを適用します。このクラスは、指定されたセグメント内の`letter-spacing`を0にするために使用されます。
+ * 与えられたセグメントに`typesetting-no-breaks`クラスを適用します。このクラスは、指定されたセグメント内の`letter-spacing`を0にするために使用されます。
  * @param segment - クラスを適用するセグメント。
  * @return クラス適用されたセグメントを含む`span`タグを返します。
  */
diff --git a/types/index.d.ts b/types/index.d.ts
index 6a4daee..f7eb559 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -19,13 +19,13 @@ export interface TypesettingOptions {
   useWordBreak?: boolean
 
   /**
-   * 英数を .typeset-latin でラップします。
+   * 英数を .typesetting-latin でラップします。
    * useWordBreak が true の場合にのみ有効です。
    */
   wrapLatin?: boolean
 
   /**
-   * 分離禁則文字を .typeset-nobreaks でラップし、文字間を 0 に設定します。
+   * 分離禁則文字を .typesetting-no-breaks でラップし、文字間を 0 に設定します。
    * useWordBreak が true の場合にのみ有効です。
    */
   noSpaceBetweenNoBreaks?: boolean


Test patch:
diff --git a/tests/apply-style.test.ts b/tests/apply-style.test.ts
index a7cd71b..a29267e 100644
--- a/tests/apply-style.test.ts
+++ b/tests/apply-style.test.ts
@@ -16,7 +16,7 @@ describe('applyStyleToSegment', () => {
   it("applies letter-spacing style to separation prohibited characters '──'", () => {
     const current = '──'
     const next = ''
-    const expected = '<span class="typeset-no-breaks">──</span>'
+    const expected = '<span class="typesetting-no-breaks">──</span>'
     expect(applyStyleToSegment(current, next, options)).toEqual(expected)
   })
 
@@ -44,56 +44,56 @@ describe('applyStyleToSegment', () => {
   it("applies 'latin' class to English words 'English'", () => {
     const current = 'English'
     const next = ''
-    const expected = '<span class="typeset-latin">English</span>'
+    const expected = '<span class="typesetting-latin">English</span>'
     expect(applyStyleToSegment(current, next, options)).toEqual(expected)
   })
 
   it("applies 'latin' class to half-width numbers '28'", () => {
     const current = '28'
     const next = ''
-    const expected = '<span class="typeset-latin">28</span>'
+    const expected = '<span class="typesetting-latin">28</span>'
     expect(applyStyleToSegment(current, next, options)).toEqual(expected)
   })
 
   it("applies 'latin' class to half-width symbol ':'", () => {
     const current = ':'
     const next = ''
-    const expected = '<span class="typeset-latin">:</span>'
+    const expected = '<span class="typesetting-latin">:</span>'
     expect(applyStyleToSegment(current, next, options)).toEqual(expected)
   })
 
   it("applies 'latin' class to currency symbols", () => {
     const current = '¥1,400'
     const next = ''
-    const expected = '<span class="typeset-latin">¥1,400</span>'
+    const expected = '<span class="typesetting-latin">¥1,400</span>'
     expect(applyStyleToSegment(current, next, options)).toEqual(expected)
   })
 
   it("applies 'latin' class to subscript numbers", () => {
     const current = 'CO₂'
     const next = ''
-    const expected = '<span class="typeset-latin">CO₂</span>'
+    const expected = '<span class="typesetting-latin">CO₂</span>'
     expect(applyStyleToSegment(current, next, options)).toEqual(expected)
   })
 
   it("applies 'latin' class to superscript numbers", () => {
     const current = '¹³⁷Cs'
     const next = ''
-    const expected = '<span class="typeset-latin">¹³⁷Cs</span>'
+    const expected = '<span class="typesetting-latin">¹³⁷Cs</span>'
     expect(applyStyleToSegment(current, next, options)).toEqual(expected)
   })
 
   it("adds kerning tag after 'で'", () => {
     const current = 'す'
     const next = '。'
-    const expected = 'す<span class="typeset-kerning" style="margin: -0.04em;"></span>'
+    const expected = 'す<span class="typesetting-kerning" style="margin: -0.04em;"></span>'
     expect(applyKerningToSegment(current, next, options)).toEqual(expected)
   })
 
   it("adds kerning tag after 'で'", () => {
     const current = 'です。'
     const next = 'その'
-    const expected = 'です<span class="typeset-kerning" style="margin: -0.04em;"></span>。'
+    const expected = 'です<span class="typesetting-kerning" style="margin: -0.04em;"></span>。'
     expect(applyKerningToSegment(current, next, options)).toEqual(expected)
   })
 })
@@ -123,7 +123,7 @@ describe('applyStyleToSegment without useWordBreak option', () => {
     const space = ' '
     const current = 'し'
     const next = 'ます。'
-    const expected = `し<span class="typeset-kerning" style="letter-spacing: 0.06em;" data-content="${space}"></span>`
+    const expected = `し<span class="typesetting-kerning" style="letter-spacing: 0.06em;" data-content="${space}"></span>`
     expect(applyKerningToSegment(current, next, options)).toEqual(expected)
   })
 
@@ -131,7 +131,7 @@ describe('applyStyleToSegment without useWordBreak option', () => {
     const space = '&nbsp;'
     const current = 'です'
     const next = '。'
-    const expected = `です<span class="typeset-kerning" style="letter-spacing: 0.02em;" data-content="${space}"></span>`
+    const expected = `です<span class="typesetting-kerning" style="letter-spacing: 0.02em;" data-content="${space}"></span>`
     expect(applyKerningToSegment(current, next, options)).toEqual(expected)
   })
 
@@ -139,7 +139,7 @@ describe('applyStyleToSegment without useWordBreak option', () => {
     const space = '&nbsp;'
     const current = 'Java'
     const next = 'Script'
-    const expected = `Java<span class="typeset-kerning" style="letter-spacing: 0.02em;" data-content="${space}"></span>`
+    const expected = `Java<span class="typesetting-kerning" style="letter-spacing: 0.02em;" data-content="${space}"></span>`
     expect(applyKerningToSegment(current, next, options)).toEqual(expected)
   })
 })