release: 0.5.0

feat: add word wrap fix: support browsers dont support regexp positive lookbehind
2020-03-15 21:01:19 +08:00 · 2020-03-15 21:01:19 +08:00 · c37bd4c0e1
commit c37bd4c0e1
parent 84d7077335 5a7182fcca
9 changed files with 692 additions and 676 deletions
--- a/_site/assets/index.css
+++ b/_site/assets/index.css
@ -36,7 +36,7 @@ a {
 .container {
  box-sizing: border-box;
  padding-block-start: 12px;
-  padding-block-end: 12px;
+  padding-block-end: 72px;
  padding-inline-start: 12px;
  padding-inline-end: 12px;
 }
@ -315,6 +315,7 @@ a {
    margin-block-start: 12px;
    margin-block-end: 0;
  }
+
  .article .article__toc ol ol {
    margin-block-start: 0;
  }
--- a/_site/heti-addon.js
+++ b/_site/heti-addon.js
@ -163,6 +163,11 @@
 	     */
 	    function Finder(node, options) {

+	        // Add offset to fix browsers which don't support regex lookbehind.
+	        if (!options.offset) {
+	            options.offset = 0;
+	        }
+
 	        var preset = options.preset && exposed.PRESETS[options.preset];

 	        options.portionMode = options.portionMode || PORTION_MODE_RETAIN;
@ -349,12 +354,12 @@
 	                        endPortion = {
 	                            node: curNode,
 	                            index: portionIndex++,
-								text: curNode.data.substring(match.startIndex - atIndex, match.endIndex - atIndex),
+	                            text: curNode.data.substring(match.startIndex - atIndex + this.options.offset, match.endIndex - atIndex),

 	                            // If it's the first match (atIndex==0) we should just return 0
 	                            indexInMatch: atIndex === 0 ? 0 : atIndex - match.startIndex,

-								indexInNode: match.startIndex - atIndex,
+	                            indexInNode: match.startIndex - atIndex + this.options.offset,
 	                            endIndexInNode: match.endIndex - atIndex,
 	                            isEnd: true
 	                        };
@ -376,9 +381,9 @@
 	                            node: curNode,
 	                            index: portionIndex++,
 	                            indexInMatch: 0,
-								indexInNode: match.startIndex - atIndex,
+	                            indexInNode: match.startIndex - atIndex + this.options.offset,
 	                            endIndexInNode: match.endIndex - atIndex,
-								text: curNode.data.substring(match.startIndex - atIndex, match.endIndex - atIndex)
+	                            text: curNode.data.substring(match.startIndex - atIndex + this.options.offset, match.endIndex - atIndex)
 	                        };
 	                    }

@ -655,45 +660,42 @@
 	const N = '0-9';
 	const S = '`~!@#\\$%\\^&\\*\\(\\)-_=\\+\\[\\]{}\\\\\\|;:\'",<.>\\/\\?';
 	const ANS = `${A}${N}${S}`;
-	const HETI_NON_CONTIGUOUS_ELEMENTS = {
-	  // Block Elements
-	  address: 1, article: 1, aside: 1, blockquote: 1, dd: 1, div: 1,
-	  dl: 1, fieldset: 1, figcaption: 1, figure: 1, footer: 1, form: 1, h1: 1, h2: 1, h3: 1,
-	  h4: 1, h5: 1, h6: 1, header: 1, hgroup: 1, hr: 1, main: 1, nav: 1, noscript: 1, ol: 1,
-	  output: 1, p: 1, pre: 1, section: 1, ul: 1,
-	  // Other misc. elements that are not part of continuous inline prose:
-	  br: 1, li: 1, summary: 1, dt: 1, details: 1, rp: 1, rt: 1, rtc: 1,
-	  // Media / Source elements:
-	  script: 1, style: 1, img: 1, video: 1, audio: 1, canvas: 1, svg: 1, map: 1, object: 1,
-	  // Input elements
-	  input: 1, textarea: 1, select: 1, option: 1, optgroup: 1, button: 1,
-	  // Table related elements:
-	  table: 1, tbody: 1, thead: 1, th: 1, tr: 1, td: 1, caption: 1, col: 1, tfoot: 1, colgroup: 1,
+	const HETI_NON_CONTIGUOUS_ELEMENTS = Object.assign({}, findAndReplaceDOMText.NON_CONTIGUOUS_PROSE_ELEMENTS, {
 	  // Inline elements
 	  ins: 1, del: 1, s: 1,
-	};
-	const HETI_SKIPPED_ELEMENTS = {
-	  br: 1, hr: 1,
-	  // Media / Source elements:
-	  script: 1, style: 1, img: 1, video: 1, audio: 1, canvas: 1, svg: 1, map: 1, object: 1,
-	  // Input elements:
-	  input: 1, textarea: 1, select: 1, option: 1, optgroup: 1, button: 1,
-	  // Pre elements:
+	});
+	const HETI_SKIPPED_ELEMENTS = Object.assign({}, findAndReplaceDOMText.NON_PROSE_ELEMENTS, {
 	  pre: 1, code: 1, sup: 1, sub: 1,
 	  // Heti elements
 	  'heti-spacing': 1,
-	};
+	});
 	const HETI_SKIPPED_CLASS = 'heti-skip';
 	const hasOwn = {}.hasOwnProperty;
+	const REG_FULL = `(?<=[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`;
+	const REG_FULL_FIX = `(?:[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`;
+	const REG_START = `([${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`;
+	const REG_END = `(?<=[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)*)`;
+	const REG_END_FIX = `(?:[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)*)`;

 	class Heti {
 	  constructor (rootSelector) {
+	    let supportLookBehind = true;
+
+	    try {
+	      new RegExp(`(?<=\d)\d`, 'g').test('');
+	    } catch (err) {
+	      console.info(err.name, '该浏览器尚未实现 RegExp positive lookbehind');
+	      supportLookBehind = false;
+	    }
+
 	    this.rootSelector = rootSelector || '.heti';
-	    this.REG_FULL = new RegExp(`(?<=[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`, 'g');
-	    this.REG_START = new RegExp(`([${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`, 'g');
-	    this.REG_END = new RegExp(`(?<=[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)*)`, 'g');
+	    this.REG_FULL = new RegExp(supportLookBehind ? REG_FULL : REG_FULL_FIX, 'g');
+	    this.REG_START = new RegExp(REG_START, 'g');
+	    this.REG_END = new RegExp(supportLookBehind ? REG_END : REG_END_FIX, 'g');
+	    this.offsetWidth = supportLookBehind ? 0 : 1;
 	    this.funcForceContext = function forceContext (el) {
 	      return hasOwn.call(HETI_NON_CONTIGUOUS_ELEMENTS, el.nodeName.toLowerCase())
+	      // return true
 	    };
 	    this.funcFilterElements = function filterElements (el) {
 	      return (
@ -721,19 +723,21 @@
 	      return $$r
 	    };

-	    findAndReplaceDOMText($$elm, Object.assign(commonConfig, {
+	    findAndReplaceDOMText($$elm, Object.assign({}, commonConfig, {
 	      find: this.REG_FULL,
 	      replace: portion => getWrapper('heti-spacing-start heti-spacing-end', portion.text),
+	      offset: this.offsetWidth,
 	    }));

-	    findAndReplaceDOMText($$elm, Object.assign(commonConfig, {
+	    findAndReplaceDOMText($$elm, Object.assign({}, commonConfig, {
 	      find: this.REG_START,
 	      replace: portion => getWrapper('heti-spacing-start', portion.text),
 	    }));

-	    findAndReplaceDOMText($$elm, Object.assign(commonConfig, {
+	    findAndReplaceDOMText($$elm, Object.assign({}, commonConfig, {
 	      find: this.REG_END,
 	      replace: portion => getWrapper('heti-spacing-end', portion.text),
+	      offset: this.offsetWidth,
 	    }));
 	  }

--- a/_site/heti.css
+++ b/_site/heti.css
@ -73,6 +73,9 @@
  font-weight: 400;
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: 1.5;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
 }

 .heti::before, .heti::after {
--- a/_site/index.html
+++ b/_site/index.html
@ -145,7 +145,7 @@
        </section>
      </details>

-      <details>
+      <details open>
        <summary id="example-4">示例4：英文演示</summary>
        <section class="demo">
          <div lang="en-US">
--- a/js/heti-addon.js
+++ b/js/heti-addon.js
@ -3,7 +3,7 @@
 * Add right spacing between CJK & ANS characters
 */

-import Finder from 'findandreplacedomtext'
+import Finder from 'heti-findandreplacedomtext'

 // 正则表达式来自 pangu.js https://github.com/vinta/pangu.js
 const CJK = '\u2e80-\u2eff\u2f00-\u2fdf\u3040-\u309f\u30a0-\u30fa\u30fc-\u30ff\u3100-\u312f\u3200-\u32ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff'
@ -11,45 +11,42 @@ const A = 'A-Za-z\u0370-\u03ff'
 const N = '0-9'
 const S = '`~!@#\\$%\\^&\\*\\(\\)-_=\\+\\[\\]{}\\\\\\|;:\'",<.>\\/\\?'
 const ANS = `${A}${N}${S}`
-const HETI_NON_CONTIGUOUS_ELEMENTS = {
-  // Block Elements
-  address: 1, article: 1, aside: 1, blockquote: 1, dd: 1, div: 1,
-  dl: 1, fieldset: 1, figcaption: 1, figure: 1, footer: 1, form: 1, h1: 1, h2: 1, h3: 1,
-  h4: 1, h5: 1, h6: 1, header: 1, hgroup: 1, hr: 1, main: 1, nav: 1, noscript: 1, ol: 1,
-  output: 1, p: 1, pre: 1, section: 1, ul: 1,
-  // Other misc. elements that are not part of continuous inline prose:
-  br: 1, li: 1, summary: 1, dt: 1, details: 1, rp: 1, rt: 1, rtc: 1,
-  // Media / Source elements:
-  script: 1, style: 1, img: 1, video: 1, audio: 1, canvas: 1, svg: 1, map: 1, object: 1,
-  // Input elements
-  input: 1, textarea: 1, select: 1, option: 1, optgroup: 1, button: 1,
-  // Table related elements:
-  table: 1, tbody: 1, thead: 1, th: 1, tr: 1, td: 1, caption: 1, col: 1, tfoot: 1, colgroup: 1,
+const HETI_NON_CONTIGUOUS_ELEMENTS = Object.assign({}, Finder.NON_CONTIGUOUS_PROSE_ELEMENTS, {
  // Inline elements
  ins: 1, del: 1, s: 1,
-}
-const HETI_SKIPPED_ELEMENTS = {
-  br: 1, hr: 1,
-  // Media / Source elements:
-  script: 1, style: 1, img: 1, video: 1, audio: 1, canvas: 1, svg: 1, map: 1, object: 1,
-  // Input elements:
-  input: 1, textarea: 1, select: 1, option: 1, optgroup: 1, button: 1,
-  // Pre elements:
+})
+const HETI_SKIPPED_ELEMENTS = Object.assign({}, Finder.NON_PROSE_ELEMENTS, {
  pre: 1, code: 1, sup: 1, sub: 1,
  // Heti elements
  'heti-spacing': 1,
-}
+})
 const HETI_SKIPPED_CLASS = 'heti-skip'
 const hasOwn = {}.hasOwnProperty
+const REG_FULL = `(?<=[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`
+const REG_FULL_FIX = `(?:[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`
+const REG_START = `([${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`
+const REG_END = `(?<=[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)*)`
+const REG_END_FIX = `(?:[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)*)`

 class Heti {
  constructor (rootSelector) {
+    let supportLookBehind = true
+
+    try {
+      new RegExp(`(?<=\d)\d`, 'g').test('')
+    } catch (err) {
+      console.info(err.name, '该浏览器尚未实现 RegExp positive lookbehind')
+      supportLookBehind = false
+    }
+
    this.rootSelector = rootSelector || '.heti'
-    this.REG_FULL = new RegExp(`(?<=[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`, 'g')
-    this.REG_START = new RegExp(`([${ANS}]+(?: +[${ANS}]+)* *)(?=[${CJK}])`, 'g')
-    this.REG_END = new RegExp(`(?<=[${CJK}])( *[${ANS}]+(?: +[${ANS}]+)*)`, 'g')
+    this.REG_FULL = new RegExp(supportLookBehind ? REG_FULL : REG_FULL_FIX, 'g')
+    this.REG_START = new RegExp(REG_START, 'g')
+    this.REG_END = new RegExp(supportLookBehind ? REG_END : REG_END_FIX, 'g')
+    this.offsetWidth = supportLookBehind ? 0 : 1
    this.funcForceContext = function forceContext (el) {
      return hasOwn.call(HETI_NON_CONTIGUOUS_ELEMENTS, el.nodeName.toLowerCase())
+      // return true
    }
    this.funcFilterElements = function filterElements (el) {
      return (
@ -77,19 +74,21 @@ class Heti {
      return $$r
    }

-    Finder($$elm, Object.assign(commonConfig, {
+    Finder($$elm, Object.assign({}, commonConfig, {
      find: this.REG_FULL,
      replace: portion => getWrapper('heti-spacing-start heti-spacing-end', portion.text),
+      offset: this.offsetWidth,
    }))

-    Finder($$elm, Object.assign(commonConfig, {
+    Finder($$elm, Object.assign({}, commonConfig, {
      find: this.REG_START,
      replace: portion => getWrapper('heti-spacing-start', portion.text),
    }))

-    Finder($$elm, Object.assign(commonConfig, {
+    Finder($$elm, Object.assign({}, commonConfig, {
      find: this.REG_END,
      replace: portion => getWrapper('heti-spacing-end', portion.text),
+      offset: this.offsetWidth,
    }))
  }

--- a/lib/heti.scss
+++ b/lib/heti.scss
@ -29,6 +29,12 @@
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: $line-height-normal;

+  // 针对混合英文段落，采取按词折行，长单词通过连词符段行
+  // https://justmarkup.com/articles/2015-07-31-dealing-with-long-words-in-css/
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
+
  // 自动在中西文间加 1/4 空格（暂无浏览器支持）
  //text-spacing: ideograph-alpha;

--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "heti",
-  "version": "0.4.1",
+  "version": "0.5.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -1124,11 +1124,6 @@
        "path-exists": "^4.0.0"
      }
    },
-    "findandreplacedomtext": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/findandreplacedomtext/-/findandreplacedomtext-0.4.6.tgz",
-      "integrity": "sha512-CVRIKbEwfWoKTSnLrmyX26WjMY7o0aUUTm0RXN47fF/eHINJa8C+YHZxGagC7gMWVaAEBFwH7uVXuhwZcylWOQ=="
-    },
    "flat-cache": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
@ -1424,6 +1419,11 @@
      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
      "dev": true
    },
+    "heti-findandreplacedomtext": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/heti-findandreplacedomtext/-/heti-findandreplacedomtext-0.5.0.tgz",
+      "integrity": "sha512-GFZjqU8LAdu1uR72GqrReI+lzNLMlcWtvdz1TKNJiofyo1mfTecFYSZEoEbcLcRMl+KwEldnNQoS4BwO8wtg0A=="
+    },
    "hosted-git-info": {
      "version": "2.8.5",
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "heti",
-  "version": "0.4.3",
+  "version": "0.5.0",
  "description": "赫蹏是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。",
  "main": "lib/heti.scss",
  "files": [
@ -34,7 +34,7 @@
  },
  "homepage": "https://github.com/sivan/heti#readme",
  "dependencies": {
-    "findandreplacedomtext": "^0.4.6"
+    "heti-findandreplacedomtext": "^0.5.0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.0.2",
--- a/rollup.config.js
+++ b/rollup.config.js
@ -16,6 +16,9 @@ export default {
      name: 'Heti',
      plugins: [
        terser({
+          compress: {
+            pure_funcs: ["console.info"] // 移除调试信息
+          },
          output: {
            comments: false
          }