palt-typesetting 0.4.0 → 0.5.1

package/dist/style/typesetting.css

@@ -1,6 +1,6 @@
 @font-face {
   /* 
-   * カスタムフォント: 1/10000 UPM 幅のスペースとノンブレーキングスペースを定義。
+   * カスタムフォント: 1/10000 UPM 幅の Space と No-Break Space を定義。
    * 注意：完全なゼロ幅スペースを使用すると、Safari では letter-spacing が無視される。
    * @sharapeco による貢献に感謝します。{@link https://gist.github.com/sharapeco/1dd7f4433dad07648e1325e1fa5926ee}
    */
@@ -9,6 +9,14 @@
     format('woff2');
 }
 
+/* 
+ * Safari のリーダーモード対応
+ * See: {@link https://github.com/yamatoiizuka/palt-typesetting/issues/96}
+ */
+.typeset wbr {
+  visibility: hidden;
+}
+
 .typeset-word-break {
   word-break: keep-all;
   overflow-wrap: anywhere;
@@ -16,12 +24,17 @@
 
 .typeset-thin-space,
 .typeset-kerning {
-  font-family: ling-one; /* カスタムフォントのスペースを使用します。 */
-  line-height: 0; /* 空白による行の高さの影響を無視します。 */
   letter-spacing: 0; /* 親要素から継承される letter-spacing の影響を無視します。 */
   user-select: none; /* ユーザーによるテキストのコピーを無効にします。 */
 }
 
+.typeset-thin-space[data-content]::after,
+.typeset-kerning[data-content]::after {
+  content: attr(data-content); /* Space または No-Break Space */
+  font-family: ling-one; /* カスタムフォントのスペースを使用します。 */
+  line-height: 0; /* 空白による行の高さの影響を無視します。 */
+}
+
 .typeset-no-breaks {
   letter-spacing: 0; /* 親要素から継承される letter-spacing の影響を無視します。 */
 }

package/dist/util-tags.d.ts

@@ -1,6 +1,6 @@
 import './style/typesetting.css';
 declare const createWbr: () => string;
-declare const createThinSpace: (thisSpaceWidth: string, breakable?: boolean) => string;
+declare const createThinSpace: (thinSpaceWidth: string, breakable?: boolean) => string;
 declare const createKerning: (kerningValue: number, breakable?: boolean) => string;
 declare const applyWrapperStyle: (text: string, useWordBreak: boolean) => string;
 declare const applyLatinStyle: (segment: string) => string;

package/dist/util-tags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util-tags.d.ts","sourceRoot":"","sources":["../src/util-tags.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAMhC,QAAA,MAAM,SAAS,QAAO,MAErB,CAAA;AAQD,QAAA,MAAM,eAAe,mBAAoB,MAAM,cAAc,OAAO,KAAG,MAMtE,CAAA;AASD,QAAA,MAAM,aAAa,iBAAkB,MAAM,cAAc,OAAO,KAAG,MAiBlE,CAAA;AAQD,QAAA,MAAM,iBAAiB,SAAU,MAAM,gBAAgB,OAAO,KAAG,MAKhE,CAAA;AAOD,QAAA,MAAM,eAAe,YAAa,MAAM,KAAG,MAG1C,CAAA;AAOD,QAAA,MAAM,kBAAkB,YAAa,MAAM,KAAG,MAG7C,CAAA;AAuBD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"util-tags.d.ts","sourceRoot":"","sources":["../src/util-tags.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAQhC,QAAA,MAAM,SAAS,QAAO,MAErB,CAAA;AAQD,QAAA,MAAM,eAAe,mBAAoB,MAAM,cAAc,OAAO,KAAG,MAItE,CAAA;AASD,QAAA,MAAM,aAAa,iBAAkB,MAAM,cAAc,OAAO,KAAG,MAclE,CAAA;AAQD,QAAA,MAAM,iBAAiB,SAAU,MAAM,gBAAgB,OAAO,KAAG,MAKhE,CAAA;AAOD,QAAA,MAAM,eAAe,YAAa,MAAM,KAAG,MAG1C,CAAA;AAOD,QAAA,MAAM,kBAAkB,YAAa,MAAM,KAAG,MAG7C,CAAA;AAkCD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/util-tags.js

@@ -1,49 +1,49 @@
 import "./style/typesetting.css";
+const prefix = "typeset";
 const createWbr = () => {
   return "<wbr>";
 };
-const createThinSpace = (thisSpaceWidth, breakable) => {
-  const content = breakable ? " " : "&nbsp;";
-  const className = "typeset-thin-space";
-  const style = `letter-spacing: ${thisSpaceWidth};`;
-  const uiIgnored = true;
-  return createStyledSpan(content, className, style, uiIgnored);
+const createThinSpace = (thinSpaceWidth, breakable) => {
+  const content = "";
+  const className = `${prefix}-thin-space`;
+  return createSpacer(content, className, thinSpaceWidth, breakable);
 };
 const createKerning = (kerningValue, breakable) => {
   if (kerningValue === 0)
     return "";
-  const className = "typeset-kerning";
-  const uiIgnored = true;
+  const content = "";
+  const className = `${prefix}-kerning`;
   if (kerningValue < 0) {
-    const content = "";
     const emValue = kerningValue / 1e3 / 2 + "em";
     const style = `margin: ${emValue};`;
-    return createStyledSpan(content, className, style, uiIgnored);
+    return createStyledSpan(content, className, style);
   } else {
-    const content = breakable ? " " : "&nbsp;";
     const emValue = kerningValue / 1e3 + "em";
-    const style = `letter-spacing: ${emValue};`;
-    return createStyledSpan(content, className, style, uiIgnored);
+    return createSpacer(content, className, emValue, breakable);
   }
 };
 const applyWrapperStyle = (text, useWordBreak) => {
-  const wrapperName = "typeset";
-  const wordBreakName = "typeset-word-break";
+  const wrapperName = prefix;
+  const wordBreakName = `${prefix}-word-break`;
   const className = useWordBreak ? `${wrapperName} ${wordBreakName}` : wrapperName;
   return createStyledSpan(text, className);
 };
 const applyLatinStyle = (segment) => {
-  const className = "typeset-latin";
+  const className = `${prefix}-latin`;
   return createStyledSpan(segment, className);
 };
 const applyNoBreaksStyle = (segment) => {
-  const className = "typeset-no-breaks";
+  const className = `${prefix}-no-breaks`;
   return createStyledSpan(segment, className);
 };
-const createStyledSpan = (content, className, style = "", uiIgnored = false) => {
+const createStyledSpan = (content, className, style = "", attr = "") => {
   const styleAttr = style ? ` style="${style}"` : "";
-  const extraAttrs = uiIgnored ? ' aria-hidden="true" data-nosnippet=""' : "";
-  return `<span class="${className}"${styleAttr}${extraAttrs}>${content}</span>`;
+  return `<span class="${className}"${styleAttr}${attr}>${content}</span>`;
+};
+const createSpacer = (content, className, value, breakable) => {
+  const style = `letter-spacing: ${value};`;
+  const data = ` data-content="${breakable ? " " : "&nbsp;"}"`;
+  return createStyledSpan(content, className, style, data);
 };
 export {
   applyLatinStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "palt-typesetting",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "A typesetting library.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",