Repository: yamatoiizuka/palt-typesetting
Pull request #66 (2024-02-05 11:37:58)

Ignore letter spacing of Thin Space
- Thin Space にかかっていた親要素の letter-spacing をキャンセル
- それに伴い、デフォルトの thinSpaceWidth を 50% → 100% に変更
- ついでに line-height を 0 にし、100% 以上でも見え方に影響が出ないように更新


Patch:
diff --git a/README.md b/README.md
index 3fc6738..de0bd8b 100644
--- a/README.md
+++ b/README.md
@@ -115,7 +115,7 @@ typesetter.renderToElements(elements)
 // 組版を適用した HTML の取得
 const srcHtml = '「日本語」とEnglish'
 console.log(typesetter.render(srcHtml))
-// <span class="typeset" /* 中略 */>「日本語」<span class="typeset-thin-space" style="font-size: 50%;" /* 中略 */> </span><wbr>と<span class="typeset-thin-space" style="font-size: 50%;" /* 中略 */> </span><wbr><span class="typeset-latin">English</span></span>
+// <span class="typeset" /* 中略 */>「日本語」<span class="typeset-thin-space" style="font-size: 100%;" /* 中略 */> </span><wbr>と<span class="typeset-thin-space" style="font-size: 100%;" /* 中略 */> </span><wbr><span class="typeset-latin">English</span></span>
 ```
 
 ### Constructor
@@ -154,7 +154,7 @@ const options = {
   insertThinSpaces: true,
 
   // 四分アキスペースの幅を設定します。
-  thinSpaceWidth: '50%',
+  thinSpaceWidth: '100%',
 
   // 特定の文字間のカーニングルールを設定します。
   kerningRules: [
@@ -182,7 +182,7 @@ typesetter.renderToSelector('.my-class')
 | `wrapLatin`              | 英数を `span.typeset-latin` でラップします。<br>`useWordBreak` が `true` の場合にのみ有効です。                                            | `boolean`                                                | `true`       |
 | `noSpaceBetweenNoBreaks` | 罫線などの分離禁則文字を `span.typeset-no-breaks` でラップし、文字間を 0 に設定します。<br>`useWordBreak` が `true` の場合にのみ有効です。 | `boolean`                                                | `true`       |
 | `insertThinSpaces`       | 四分アキスペースを自動で挿入します。                                                                                                       | `boolean`                                                | `true`       |
-| `thinSpaceWidth`         | 四分アキスペースの幅を設定します。<br>`insertThinSpaces` が `true` の場合にのみ有効です。                                                  | `string`                                                 | `'50%' `     |
+| `thinSpaceWidth`         | 四分アキスペースの幅を設定します。<br>`insertThinSpaces` が `true` の場合にのみ有効です。                                                  | `string`                                                 | `'100%' `    |
 | `kerningRules`           | 特定の文字間のカーニングルールを設定します。                                                                                               | `{between: [string, string], value: string \| number}[]` | `[]`         |
 
 ## Notes
diff --git a/demo/package-lock.json b/demo/package-lock.json
index 3f11099..3086065 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -12,28 +12,28 @@
         "palt-typesetting": "file:../"
       },
       "devDependencies": {
+        "@parcel/transformer-css": "^2.11.0",
         "parcel": "^2.11.0",
         "typescript": "^5.3.3"
       }
     },
     "..": {
-      "version": "0.1.11",
+      "version": "0.2.1",
       "license": "MIT",
       "dependencies": {
         "jsdom": "^23.0.1",
         "linebreak": "^1.1.0"
       },
       "devDependencies": {
-        "@types/jest": "^29.5.11",
         "@types/jsdom": "^21.1.6",
         "@types/node": "^20",
         "@typescript-eslint/eslint-plugin": "^6.18.0",
         "@typescript-eslint/parser": "^6.18.0",
         "babel-jest": "^29.7.0",
+        "esbuild": "^0.19.11",
         "eslint": "^8",
-        "jest": "^29.7.0",
-        "ts-jest": "^29.1.1",
-        "typescript": "^5"
+        "typescript": "^5",
+        "vitest": "^1.2.2"
       }
     },
     "../palt-typesetting": {
diff --git a/src/index.ts b/src/index.ts
index 7e4ae93..2bcc782 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -19,7 +19,7 @@ class Typesetter extends HTMLProcessor {
       wrapLatin: true,
       noSpaceBetweenNoBreaks: true,
       insertThinSpaces: true,
-      thinSpaceWidth: '50%',
+      thinSpaceWidth: '100%',
       kerningRules: [],
     }
   }
diff --git a/src/utils-tags.ts b/src/utils-tags.ts
index b95c101..ac1ab4c 100644
--- a/src/utils-tags.ts
+++ b/src/utils-tags.ts
@@ -28,7 +28,7 @@ const wbr = '<wbr>'
 const createThinSpaceSpan = (thisSpaceWidth: string, classNamePrefix: string): string => {
   const THIN_SPACE = String.fromCharCode(0x2009) // U+2009 THIN SPACE
   const className = classNamePrefix + '-thin-space'
-  const style = `font-size: ${thisSpaceWidth}; ${uiIgnoreSettings.styles.preventSelect}`
+  const style = `font-size: ${thisSpaceWidth}; letter-spacing: 0; line-height: 0; ${uiIgnoreSettings.styles.preventSelect}`
   return `<span class="${className}" style="${style}" ${uiIgnoreSettings.attributes.hiddenFromReader} ${uiIgnoreSettings.attributes.noIndex}>${THIN_SPACE}</span>`
 }
 


Test patch:
diff --git a/tests/index.test.ts b/tests/index.test.ts
index 408331b..4524372 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -7,7 +7,8 @@ import { describe, test, expect, beforeEach } from 'vitest'
 describe('Typesetter', () => {
   const prefix = Typesetter.getDefaultOptions().classNamePrefix
   const addwbr = Typesetter.getDefaultOptions().useWordBreak
-  const space = createThinSpaceSpan('50%', prefix)
+  const spaceWidth = Typesetter.getDefaultOptions().thinSpaceWidth
+  const space = createThinSpaceSpan(spaceWidth, prefix)
   const srcHtml = `<p>──<b>こんにちは。</b>「日本語」とEnglish、晴れ・28度。</p>`
 
   const expectedHtml = `<p>${applyWrapperStyle(`${applyNoBreakStyle('──', prefix)}${wbr}`, prefix, addwbr)}<b>${applyWrapperStyle(`こんにちは。${space}${wbr}`, prefix, addwbr)}</b>${applyWrapperStyle(`「日本語」${space}${wbr}と${space}${wbr}${applyLatinStyle('English', prefix)}${space}、${space}${wbr}晴れ${space}・${space}${wbr}${applyLatinStyle('28', prefix)}${space}${wbr}度。`, prefix, addwbr)}</p>`