Repository: yamatoiizuka/palt-typesetting
Pull request #71 (2024-02-06 10:06:59)

Refactor: change createXxxSpan to createXxx
- createThinSpaceSpan →  createThinSpace
- createKerningSpan →  createKerning

に変更。ついでに typo も修正。


Patch:
diff --git a/src/apply-style.ts b/src/apply-style.ts
index 54b7e61..7d64770 100644
--- a/src/apply-style.ts
+++ b/src/apply-style.ts
@@ -1,5 +1,5 @@
 import { CharClass, LanguageClass } from './utils-text-classes'
-import { applyWrapperStyle, applyLatinStyle, applyNoBreakStyle, createKerningSpan } from './utils-tags'
+import { applyWrapperStyle, applyLatinStyle, applyNoBreakStyle, createKerning } from './utils-tags'
 import { TypesettingOptions } from './types'
 
 /**
@@ -65,7 +65,7 @@ const applyKerningToSegment = (currentSegment: string, nextSegment: string, opti
 
     if (kerningRule) {
       const kerningValue = typeof kerningRule.value === 'number' ? kerningRule.value : parseInt(kerningRule.value, 10)
-      return currentChar + createKerningSpan(kerningValue, options.classNamePrefix)
+      return currentChar + createKerning(kerningValue, options.classNamePrefix)
     }
 
     return currentChar
diff --git a/src/insert-separators.ts b/src/insert-separators.ts
index 307de26..7255653 100644
--- a/src/insert-separators.ts
+++ b/src/insert-separators.ts
@@ -1,6 +1,6 @@
 import LineBreaker from 'linebreak'
 import { CharClass, LanguageClass } from './utils-text-classes'
-import { wbr, createThinSpaceSpan } from './utils-tags'
+import { wbr, createThinSpace } from './utils-tags'
 import { TypesettingOptions } from './types'
 
 /**
@@ -44,9 +44,7 @@ const addSeparatorsToSegment = (current: string, next = '', options: Typesetting
   const addWbr = options.useWordBreak && shouldAddWbr(current, next)
   const addSpace = options.insertThinSpaces && shouldAddThinSpace(current, next)
   return (
-    current +
-    (addSpace ? createThinSpaceSpan(options.thinSpaceWidth, options.classNamePrefix) : '') +
-    (addWbr ? wbr : '')
+    current + (addSpace ? createThinSpace(options.thinSpaceWidth, options.classNamePrefix) : '') + (addWbr ? wbr : '')
   )
 }
 
diff --git a/src/util-tags.ts b/src/util-tags.ts
new file mode 100644
index 0000000..cde864c
--- /dev/null
+++ b/src/util-tags.ts
@@ -0,0 +1,84 @@
+/**
+ * ユーザーインターフェースのアクセシビリティと検索エンジンの最適化に関連する設定を定義します。
+ * - preventSelect: ユーザーがテキストを選択してコピーすることを防止します。
+ * - hiddenFromReader: スクリーンリーダーなどのアクセシビリティツールからこの要素を隠します。
+ * - noIndex: 検索エンジンがこの要素の内容を検索結果のスニペットとして表示しないようにします。
+ */
+const uiIgnoreSettings = {
+  styles: {
+    preventSelect: 'user-select:none;',
+  },
+  attributes: {
+    hiddenFromReader: 'aria-hidden="true"',
+    noIndex: 'data-nosnippet=""',
+  },
+}
+
+/**
+ * `<wbr>`タグはHTML文書内で単語の区切りを示し、必要に応じて改行の挿入を許可するタグです。
+ */
+const wbr = '<wbr>'
+
+/**
+ * THIN SPACEを指定した幅で生成する関数です。
+ * @param thinSpaceWidth - THIN SPACEの幅。
+ * @param classNamePrefix - 適用するCSSクラス名のプレフィックス。デフォルトは 'typeset'。
+ * @return スタイル適用されたTHIN SPACEを含むspanタグ。
+ */
+const createThinSpace = (thinSpaceWidth: string, classNamePrefix: string): string => {
+  const THIN_SPACE = String.fromCharCode(0x2009) // U+2009 THIN SPACE
+  const className = classNamePrefix + '-thin-space'
+  const style = `font-size: ${thinSpaceWidth}; letter-spacing: 0; line-height: 0; ${uiIgnoreSettings.styles.preventSelect}`
+  return `<span class="${className}" style="${style}" ${uiIgnoreSettings.attributes.hiddenFromReader} ${uiIgnoreSettings.attributes.noIndex}>${THIN_SPACE}</span>`
+}
+
+/**
+ * 指定した数値でカーニング（文字間隔調整）タグを生成する関数です。
+ *
+ * @param kerningValue - カーニング値（千分率）。例: 1000 は 1em のカーニングを意味します。
+ * @param classNamePrefix - 適用するCSSクラス名のプレフィックス。デフォルトは 'typeset'。
+ * @return カーニング適用後のHTMLコンテンツ。
+ */
+const createKerning = (kerningValue: number, classNamePrefix: string): string => {
+  const emValue = kerningValue / 1000 / 2 + 'em'
+  const className = classNamePrefix + '-kerning'
+  const style = `margin: ${emValue}; ${uiIgnoreSettings.styles.preventSelect}`
+  return `<span class="${className}" style="${style}" ${uiIgnoreSettings.attributes.hiddenFromReader} ${uiIgnoreSettings.attributes.noIndex}></span>`
+}
+
+/**
+ * 与えられたテキストにword-breakとoverflow-wrapスタイルを適用します。
+ * @param text - スタイルを適用するテキスト。
+ * @param classNamePrefix - 適用するCSSクラス名のプレフィックス。デフォルトは 'typeset'。
+ * @param useWordBreak - 単語や助詞など、単語区切りでの改行を行うかどうか。デフォルトは true。
+ * @return スタイル適用されたテキストを含むspanタグ。
+ */
+const applyWrapperStyle = (text: string, classNamePrefix: string, useWordBreak: boolean): string => {
+  // <wbr> 以外の箇所で改行しないためのスタイリング
+  const style = useWordBreak ? 'word-break: keep-all; overflow-wrap: anywhere;' : ''
+  return `<span class="${classNamePrefix}" style="${style}">${text}</span>`
+}
+
+/**
+ * 与えられたセグメントにクラス名を適用します。
+ * @param segment - クラスを適用するセグメント。
+ * @param classNamePrefix - 適用するCSSクラス名のプレフィックス。デフォルトは 'typeset'。
+ * @return クラス適用されたセグメントを含むspanタグ。
+ */
+const applyLatinStyle = (segment: string, classNamePrefix: string): string => {
+  const className = classNamePrefix + '-latin'
+  return `<span class="${className}">${segment}</span>`
+}
+
+/**
+ * 与えられたセグメントにno-breakスタイルを適用します。
+ * @param segment - スタイルを適用するセグメント。
+ * @param classNamePrefix - 適用するCSSクラス名のプレフィックス。デフォルトは 'typeset'。
+ * @return スタイル適用されたセグメントを含むspanタグ。
+ */
+const applyNoBreakStyle = (segment: string, classNamePrefix: string): string => {
+  const className = classNamePrefix + '-no-breaks'
+  return `<span class="${className}" style="letter-spacing: 0">${segment}</span>`
+}
+
+export { wbr, createThinSpace, createKerning, applyWrapperStyle, applyLatinStyle, applyNoBreakStyle }
diff --git a/src/utils-tags.ts b/src/utils-tags.ts
index ac1ab4c..9a4aec7 100644
--- a/src/utils-tags.ts
+++ b/src/utils-tags.ts
@@ -25,7 +25,7 @@ const wbr = '<wbr>'
  * @param classNamePrefix - 適用するCSSクラス名のプレフィックス。デフォルトは 'typeset'。
  * @return スタイル適用されたTHIN SPACEを含むspanタグ。
  */
-const createThinSpaceSpan = (thisSpaceWidth: string, classNamePrefix: string): string => {
+const createThinSpace = (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}; letter-spacing: 0; line-height: 0; ${uiIgnoreSettings.styles.preventSelect}`
@@ -39,7 +39,7 @@ const createThinSpaceSpan = (thisSpaceWidth: string, classNamePrefix: string): s
  * @param classNamePrefix - 適用するCSSクラス名のプレフィックス。デフォルトは 'typeset'。
  * @return カーニング適用後のHTMLコンテンツ。
  */
-const createKerningSpan = (kerningValue: number, classNamePrefix: string): string => {
+const createKerning = (kerningValue: number, classNamePrefix: string): string => {
   const emValue = kerningValue / 1000 / 2 + 'em'
   const className = classNamePrefix + '-kerning'
   const style = `margin: ${emValue}; ${uiIgnoreSettings.styles.preventSelect}`
@@ -81,4 +81,4 @@ const applyNoBreakStyle = (segment: string, classNamePrefix: string): string =>
   return `<span class="${className}" style="letter-spacing: 0">${segment}</span>`
 }
 
-export { wbr, createThinSpaceSpan, createKerningSpan, applyWrapperStyle, applyLatinStyle, applyNoBreakStyle }
+export { wbr, createThinSpace, createKerning, applyWrapperStyle, applyLatinStyle, applyNoBreakStyle }


Test patch:
diff --git a/tests/index.test.ts b/tests/index.test.ts
index 4524372..2a24846 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -1,5 +1,5 @@
 import Typesetter from '../src/'
-import { wbr, createThinSpaceSpan, applyWrapperStyle, applyLatinStyle, applyNoBreakStyle } from '../src/utils-tags'
+import { wbr, createThinSpace, applyWrapperStyle, applyLatinStyle, applyNoBreakStyle } from '../src/utils-tags'
 import win from '../src/win'
 import { describe, test, expect, beforeEach } from 'vitest'
 
@@ -8,7 +8,7 @@ describe('Typesetter', () => {
   const prefix = Typesetter.getDefaultOptions().classNamePrefix
   const addwbr = Typesetter.getDefaultOptions().useWordBreak
   const spaceWidth = Typesetter.getDefaultOptions().thinSpaceWidth
-  const space = createThinSpaceSpan(spaceWidth, prefix)
+  const space = createThinSpace(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>`
diff --git a/tests/insert-separators.test.ts b/tests/insert-separators.test.ts
index cb98c72..c199ef6 100644
--- a/tests/insert-separators.test.ts
+++ b/tests/insert-separators.test.ts
@@ -5,11 +5,11 @@ import insertSeparatorsToText, {
   shouldAddWbr,
   shouldAddThinSpace,
 } from '../src/insert-separators'
-import { wbr, createThinSpaceSpan } from '../src/utils-tags'
+import { wbr, createThinSpace } from '../src/utils-tags'
 import { describe, it, expect } from 'vitest'
 
 const options = Typesetter.getDefaultOptions()
-const space = createThinSpaceSpan(options.thinSpaceWidth, options.classNamePrefix)
+const space = createThinSpace(options.thinSpaceWidth, options.classNamePrefix)
 
 describe('insertSeparators', () => {
   it('inserts separators (thin spaces, <wbr>) into HTML text nodes', () => {