update readme

.vscode/launch.json

@@ -16,6 +16,16 @@
                 "${workspaceFolder}/**/*.js"
             ]
         },
+
+        {
+            "type": "node-terminal",
+            "name": "Debug Current TS File (ts-node)",
+            "request": "launch",
+            "command": "source ${workspaceFolder}/activate.sh ; ts-node -- ${fileBasenameNoExtension}",
+            "cwd": "${fileDirname}"
+          },
+
+
         {
             "type": "node",
             "request": "launch",

README.md

@@ -2,6 +2,7 @@
  - another personal draught of a typesetting language and engine.
  - website: https://kianting.info/wiki/w/Project:Clo
  - license: MIT 
+ - docs : https://buhong.kianting.info/docs/clo/index.html
  - issue tracking mailing list: `clo@kianting.info`
 
 ## How to use
@@ -44,7 +45,8 @@
  - 20231109-10: Keng-kái oa̍h-chōa ián-sǹg-hoat.
  - 20231113: the algorithm is basically fixed, and make a `bigFrame` to prepare for convert to boxes and positions.
  - 20231115-16: grid and basic types laying.
- - 231120 fix the line-breaking algorithm
+ - 20231120: fix the line-breaking algorithm
+ - 20231125: multiple paragraph basic
 
  ## 之後的做法
   - 先做一個前處理註冊器，註冊下列的前處理
@@ -64,7 +66,7 @@
   (hglue 寬度 伸展值)
   (vglue 高度 伸展值)
   (bp 原始模式 斷行模式) ; breakpoint
-  (nl) ; newline
+  (br) ; force newline
   (em 數字)
   (ex 數字)
   (span {"font-family" : "Noto Sans" , "font-size" : 16 })
@@ -75,5 +77,8 @@
  - `typedoc /path/to/src1 [/path/to/another/src/or/.js ...]`
 the generated page will be stored in `/docs`.
 
+   - set the referee source to my repo:
+   - `typedoc --sourceLinkTemplate "https://git.kianting.info/?p=clo;a=blob;f={path};hb=HEAD#l{line}" /path/to/src1 ...`
+
 store the documents
  - `rsync /path/to/docs host@/var/www/docs`

b.js

@@ -9,9 +9,11 @@ let clo = new cloLib.Clo();
 
 /* CLO:  beginning of middle part*/
 clo.mainStream = /* CLO: end of middle part*/
-[`In`, ` `, `the`, ` `, `beginning`, ` `, `was`, ` `, `the`, ` `, `Word,`, ` `, `and`, ` `, `the`, ` `, `Word`, ` `, `was`, ` `, `with`, ` `, `God,`, ` `, `and`, ` `, `the`, ` `, `Word`, ` `, `was`, ` `, `God.`, ` `, `The`, ` `, `same`, ` `, `was`, `
- `, `in`, ` `, `the`, ` `, `beginning`, ` `, `with`, ` `, `God.`, ` `, `All`, ` `, `things`, ` `, `were`, ` `, `made`, ` `, `by`, ` `, `him`, `;`, ` `, `and`, ` `, `without`, ` `, `him`, ` `, `was`, ` `, `not`, ` `, `any`, ` `, `thing`, ` `, `made`, ` `, `that`, `
- `, `was`, ` `, `made.`, ` `, `In`, ` `, `him`, ` `, `was`, ` `, `life`, `;`, ` `, `and`, ` `, `the`, ` `, `life`, ` `, `was`, ` `, `the`, ` `, `light`, ` `, `of`, ` `, `men.`, `  `, `And`, ` `, `the`, ` `, `light`, ` `, `shineth`, ` `, `in`, ` `, `darkness`, `;`, ` `, `and`, ` `, `the`, ` `, `darkness`, ` `, `comprehended`, ` `, `it`, ` `, `not.`, ["hglue", "10000"], " "];
+[`Files`, ` `, `in`, ` `, `the`, ` `, `folder`, ` `, `"%B"`, ` `, `cannot`, ` `, `be`, ` `, `deleted`, ` `, `because`, ` `, `you`, ` `, `do`, ` `, `not`, ` `, `have`, ` `, `permissions`, ` `, `to`, ` `, `see`, ` `, `them.`, `
+
+`, `"Goloshes!"`, ` `, `said`, ` `, `Mrs`, ` `, `Conroy.`, ` `, `"That\'s`, ` `, `the`, ` `, `latest.`, ` `, `Whenever`, ` `, `it\'s`, ` `, `wet`, ` `, `underfoot`, ` `, `I`, ` `, `must`, ` `, `put`, ` `, `on`, ` `, `my`, ` `, `goloshes.`, ` `, `Tonight`, ` `, `even`, ` `, `he`, ` `, `wanted`, ` `, `me`, ` `, `to`, ` `, `put`, ` `, `them`, ` `, `on,`, ` `, `but`, ` `, `I`, ` `, `wouldn\'t.`, ` `, `The`, ` `, `next`, ` `, `thing`, ` `, `he\'ll`, ` `, `buy`, ` `, `me`, ` `, `will`, ` `, `be`, ` `, `a`, ` `, `diving`, ` `, `suit."`, `
+
+ `, `When`, ` `, `the`, ` `, `short`, ` `, `days`, ` `, `of`, ` `, `winter`, ` `, `came`, ` `, `dusk`, ` `, `fell`, ` `, `before`, ` `, `we`, ` `, `had`, ` `, `well`, ` `, `eaten`, ` `, `our`, ` `, `dinners.`, ` `, `When`, ` `, `we`, ` `, `met`, ` `, `in`, ` `, `the`, ` `, `street`, ` `, `the`, ` `, `houses`, ` `, `had`, ` `, `grown`, ` `, `sombre.`, ` `, `The`, ` `, `space`, ` `, `of`, ` `, `sky`, ` `, `above`, ` `, `us`, ` `, `was`, ` `, `the`, ` `, `colour`, ` `, `of`, ` `, `ever-changing`, ` `, `violet`, ` `, `and`, ` `, `towards`, ` `, `it`, ` `, `the`, ` `, `lamps`, ` `, `of`, ` `, `the`, ` `, `street`, ` `, `lifted`, ` `, `their`, ` `, `feeble`, ` `, `lanterns.`, ` `, `The`, ` `, `cold`, ` `, `air`, ` `, `stung`, ` `, `us`, ` `, `and`, ` `, `we`, ` `, `played`, ` `, `till`, ` `, `our`, ` `, `bodies`, ` `, `glowed.`, ` `, `Our`, ` `, `shouts`, ` `, `echoed`, ` `, `in`, ` `, `the`, ` `, `silent`, ` `, `street.`, ` `, `The`, ` `, `career`, ` `, `of`, ` `, `our`, ` `, `play`, ` `, `brought`, ` `, `us`, ` `, `through`, ` `, `the`, ` `, `dark`, ` `, `muddy`, ` `, `lanes`, ` `, `behind`, ` `, `the`, ` `, `houses`, ` `, `where`, ` `, `we`, ` `, `ran`, ` `, `the`, ` `, `gauntlet`, ` `, `of`, ` `, `the`, ` `, `rough`, ` `, `tribes`, ` `, `from`, ` `, `the`, ` `, `cottages,`, ` `, `to`, ` `, `the`, ` `, `back`, ` `, `doors`, ` `, `of`, ` `, `the`, ` `, `dark`, ` `, `dripping`, ` `, `gardens`, ` `, `where`, ` `, `odours`, ` `, `arose`, ` `, `from`, ` `, `the`, ` `, `ashpits,`, ` `, `to`, ` `, `the`, ` `, `dark`, ` `, `odorous`, ` `, `stables`, ` `, `where`, ` `, `a`, ` `, `coachman`, ` `, `smoothed`, ` `, `and`, ` `, `combed`, ` `, `the`, ` `, `horse`, ` `, `or`, ` `, `shook`, ` `, `music`, ` `, `from`, ` `, `the`, ` `, `buckled`, ` `, `harness.`, ` `, `When`, ` `, `we`, ` `, `returned`, ` `, `to`, ` `, `the`, ` `, `street`, ` `, `light`, ` `, `from`, ` `, `the`, ` `, `kitchen`, ` `, `windows`, ` `, `had`, ` `, `filled`, ` `, `the`, ` `, `areas.`, ` `, `If`, ` `, `my`, ` `, `uncle`, ` `, `was`, ` `, `seen`, ` `, `turning`, ` `, `the`, ` `, `corner`, ` `, `we`, ` `, `hid`, ` `, `in`, ` `, `the`, ` `, `shadow`, ` `, `until`, ` `, `we`, ` `, `had`, ` `, `seen`, ` `, `him`, ` `, `safely`, ` `, `housed.`, ` `, `Or`, ` `, `if`, ` `, `Mangan\'s`, ` `, `sister`, ` `, `came`, ` `, `out`, ` `, `on`, ` `, `the`, ` `, `doorstep`, ` `, `to`, ` `, `call`, ` `, `her`, ` `, `brother`, ` `, `in`, ` `, `to`, ` `, `his`, ` `, `tea`, ` `, `we`, ` `, `watched`, ` `, `her`, ` `, `from`, ` `, `our`, ` `, `shadow`, ` `, `peer`, ` `, `up`, ` `, `and`, ` `, `down`, ` `, `the`, ` `, `street.`, ` `, `We`, ` `, `waited`, ` `, `to`, ` `, `see`, ` `, `whether`, ` `, `she`, ` `, `would`, ` `, `remain`, ` `, `or`, ` `, `go`, ` `, `in`, ` `, `and,`, ` `, `if`, ` `, `she`, ` `, `remained,`, ` `, `we`, ` `, `left`, ` `, `our`, ` `, `shadow`, ` `, `and`, ` `, `walked`, ` `, `up`, ` `, `to`, ` `, `Mangan\'s`, ` `, `steps`, ` `, `resignedly.`, ` `, `She`, ` `, `was`, ` `, `waiting`, ` `, `for`, ` `, `us,`, ` `, `her`, ` `, `figure`, ` `, `defined`, ` `, `by`, ` `, `the`, ` `, `light`, ` `, `from`, ` `, `the`, ` `, `half-opened`, ` `, `door.`, ` `, `Her`, ` `, `brother`, ` `, `always`, ` `, `teased`, ` `, `her`, ` `, `before`, ` `, `he`, ` `, `obeyed`, ` `, `and`, ` `, `I`, ` `, `stood`, ` `, `by`, ` `, `the`, ` `, `railings`, ` `, `looking`, ` `, `at`, ` `, `her.`, ` `, `Her`, ` `, `dress`, ` `, `swung`, ` `, `as`, ` `, `she`, ` `, `moved`, ` `, `her`, ` `, `body`, ` `, `and`, ` `, `the`, ` `, `soft`, ` `, `rope`, ` `, `of`, ` `, `her`, ` `, `hair`, ` `, `tossed`, ` `, `from`, ` `, `side`, ` `, `to`, ` `, `side.`, ` `];
 /* CLO: beginning of end part*/
 clo.generatePdf();
 /*CLO : end of end part*/

docs/assets/navigation.js

@@ -1 +1 @@
-window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAA52XUW/aMBDHvwvP1bZ2bbf1jUJoaUuIIFsrVRVygyEejh0lDgVN++4ziQlOnJyjPZX6/vezffbdOa9/egLvRO+mFyC2Rb2zXoxEKP+N+DKjOP2cD38KRUSlbUPYsndzcdYLQkKXCWa9m9cSMOJMzMWe4hMEsyw6IkpzFfb971lJ8OWfZ0zWoWhGnOztjAHlJ2fCBE5WKCj3Ia21vVxdV50HPIqQtIAMJYJQh7XWomGQSg0EWsm4eRLgzV0UYQ+RBCCaYgjtDUdDHmQRZlrAxT4ucZqgxvny49v51YWx3wSj6CcjLbiqxkZcHS+Mzw8/T8hVxgJBONM3rQmr3OtLDRln4rCGdpQSGIg3DSLH8M5MlHy4U6KEmMZDnAYnxhYlBL1rFKWo4r7q0YkTLo897SfrbdN2Co4mArdEyXug581xT8V4p00NSYLzueupqxilvWPqBhSl6WkJRuKeX+iut3zXmBXKW5qhPLiVV3LjcaJfsgZIqQJLSIgSy2qUBKKMEpm+FsxRA3Hu72jWXIEUJBeAseE7nI4FjuopfQptYbelc/9yMXYX3kvTrVesowS49sHvzfaW8mCTjtkMr/VENHCG1sLNNbJ6yhgxC1aXAtQlXqGMivykas3AwBpaO7ehx7RhW1pNNQaIBhlFAud9lixFeF9rxqf6coxFiwtQg9tc+tnuPyaSXsBcK0LlCTlRLPay7xC2BmYwtAA33MchZiOeVEqWgdRlVpq/8ROMrbRCBvU44XMPCmUhAAhpfKgQPs8LXlwtiwbNFINkSsTg4fEXCFQagCM++AyLLGFyYhd/UMKgwDWowW4YoyTF2ivr2A2L8U7d0OcbzB6J/o4suqFilPb2bihq96GouspfNNwCs+QOpq7vuH5TdVAcpQCKwnjiTWcQohBYCY5jZTiOlTK3QuYAw536iz60l0JgJSx858WOyVUAy5tN7wDIwQx4z527CXy2SgEyJuPB9GnqghSlATgU7/R8MRi5HfDnmZAPb0fPFoNRaqyce4zsoIPISpqQ5bK5uVZYhQygoTim+8M3I24upYqmy4Dip2TyKdeFlststHEU88QKK1TdWGk3WGqjuVz0W7/ZdF4ptBE91GF1uagT6ZmIUF6DbhE0PWxzzPG6y61RMjstIgNO9Y+0Np4SWomH9u8+WXmFzEbrctCWMyZMfcP7vO09pWg1JfTckGafP8wB2FHS8LB4+webpy2EZBMAAA=="
+window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAA52VUU/bMBCA/0ueqzE6YFvfShmjm4QqiLZJCCHjXGsvjh3Zl9Jq4r9j0jZx6nJBe3T83Xfns3u9+5cgrDAZJVJnsEoGSclQ+GVhskqBO6o/fxBYKL+X+1UyGg4SLqTKLOhkdNcIBKjyAhxvHUtmJXsMLFuiq/s0fB40ktIaDs6N7WLZeuaV5iiN3nkCqKs6O3m+D2RKPnJl4jNtvr/rUBfSQp27tYCuisbR7HdtX4IqJmEJXDHn2hIm+2UcD8PQcxPciNQIds54G+239w5xehZGW2D5zPg4UtJQlGsimO2pZotQlkvLCujR7BjKc/VdVUBJaoDsjVmBmyIUrQXXZae1m/09ycevn49Pwwc7PnmYXj/M/hx69VvXDiGePf+bL8+V4bmb6htYhD/ESBexPd6amTH0PdI92hAlrBnMWaWwvqlbXCsgtBHb70396p3aBqV6wBSvFEN4hX/LDMUVyIXAQ/Nl14s3QqJp059lXK3+I5GPInLNpfI39K0ocX2LVuoFkSFiCa9YlwL0pbGdkRUpQ6zXluapBei1bTDCVmJqZlQrNwBhcOXrhEhNPfDK7liMbDFMmpXEyY+fv0jhliE8+GRuACurfeJreFJSU407QB/4N7x/AVVnHoriBwAA"

package-lock.json

@@ -14,6 +14,7 @@
         "fontkit": "^2.0.2",
         "hyphen": "^1.7.0",
         "jsdom": "^22.1.0",
+        "memfs": "^4.6.0",
         "minimist": "^1.2.8",
         "npx": "^10.2.2",
         "pdf-lib": "^1.17.1",
@@ -776,11 +777,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@swc/helpers/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -2702,6 +2698,12 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "peer": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -3324,6 +3326,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/hyperdyperid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
+      "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==",
+      "engines": {
+        "node": ">=10.18"
+      }
+    },
     "node_modules/hyphen": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.7.0.tgz",
@@ -3992,6 +4002,41 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "node_modules/json-joy": {
+      "version": "9.9.1",
+      "resolved": "https://registry.npmjs.org/json-joy/-/json-joy-9.9.1.tgz",
+      "integrity": "sha512-/d7th2nbQRBQ/nqTkBe6KjjvDciSwn9UICmndwk3Ed/Bk9AqkTRm4PnLVfXG4DKbT0rEY0nKnwE7NqZlqKE6kg==",
+      "dependencies": {
+        "arg": "^5.0.2",
+        "hyperdyperid": "^1.2.0"
+      },
+      "bin": {
+        "jj": "bin/jj.js",
+        "json-pack": "bin/json-pack.js",
+        "json-pack-test": "bin/json-pack-test.js",
+        "json-patch": "bin/json-patch.js",
+        "json-patch-test": "bin/json-patch-test.js",
+        "json-pointer": "bin/json-pointer.js",
+        "json-pointer-test": "bin/json-pointer-test.js",
+        "json-unpack": "bin/json-unpack.js"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "quill-delta": "^5",
+        "rxjs": "7",
+        "tslib": "2"
+      }
+    },
+    "node_modules/json-joy/node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -4040,11 +4085,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/legacy-swc-helpers/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4090,12 +4130,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "peer": true
+    },
     "node_modules/lodash.flattendeep": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
       "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==",
       "dev": true
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "peer": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4254,6 +4306,25 @@
         "node": ">= 12"
       }
     },
+    "node_modules/memfs": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.6.0.tgz",
+      "integrity": "sha512-I6mhA1//KEZfKRQT9LujyW6lRbX7RkC24xKododIDO3AGShcaFAMKElv1yFGWX8fD4UaSiwasr3NeQ5TdtHY1A==",
+      "dependencies": {
+        "json-joy": "^9.2.0",
+        "thingies": "^1.11.1"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -9684,6 +9755,11 @@
         "tslib": "^1.11.1"
       }
     },
+    "node_modules/pdf-lib/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/pdfkit": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/pdfkit/-/pdfkit-0.13.0.tgz",
@@ -9724,11 +9800,6 @@
       "resolved": "https://registry.npmjs.org/restructure/-/restructure-2.0.1.tgz",
       "integrity": "sha512-e0dOpjm5DseomnXx2M5lpdZ5zoHqF1+bqdMJUohoYVVQa7cBdnk7fdmeI6byNWP/kiME72EeTiSypTCVnpLiDg=="
     },
-    "node_modules/pdfkit/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -9875,6 +9946,20 @@
         }
       ]
     },
+    "node_modules/quill-delta": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
+      "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
+      "peer": true,
+      "dependencies": {
+        "fast-diff": "^1.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -10040,6 +10125,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-array-concat": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
@@ -10436,6 +10530,17 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thingies": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.14.1.tgz",
+      "integrity": "sha512-ktiTHLvVsS5Cifx8zbvg7x4clgf3AS+52gMSGlW+fvk8xYzog8f9qHvivjpQF56NHCKKpj4O1wI6tH92V4a0rQ==",
+      "engines": {
+        "node": ">=10.18"
+      },
+      "peerDependencies": {
+        "tslib": "^2"
+      }
+    },
     "node_modules/tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -10555,9 +10660,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tslint": {
       "version": "6.1.3",
@@ -10590,6 +10695,12 @@
         "typescript": ">=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >=3.0.0-dev || >= 3.1.0-dev || >= 3.2.0-dev || >= 4.0.0-dev"
       }
     },
+    "node_modules/tslint/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/tsutils": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
@@ -10602,6 +10713,12 @@
         "typescript": ">=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >= 3.0.0-dev || >= 3.1.0-dev"
       }
     },
+    "node_modules/tsutils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -11808,13 +11925,6 @@
       "requires": {
         "legacy-swc-helpers": "npm:@swc/helpers@=0.4.14",
         "tslib": "^2.4.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.6.2",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-        }
       }
     },
     "@tootallnate/once": {
@@ -13216,6 +13326,12 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "peer": true
+    },
     "fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -13667,6 +13783,11 @@
         "debug": "4"
       }
     },
+    "hyperdyperid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
+      "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A=="
+    },
     "hyphen": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.7.0.tgz",
@@ -14133,6 +14254,22 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "json-joy": {
+      "version": "9.9.1",
+      "resolved": "https://registry.npmjs.org/json-joy/-/json-joy-9.9.1.tgz",
+      "integrity": "sha512-/d7th2nbQRBQ/nqTkBe6KjjvDciSwn9UICmndwk3Ed/Bk9AqkTRm4PnLVfXG4DKbT0rEY0nKnwE7NqZlqKE6kg==",
+      "requires": {
+        "arg": "^5.0.2",
+        "hyperdyperid": "^1.2.0"
+      },
+      "dependencies": {
+        "arg": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+          "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+        }
+      }
+    },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -14175,13 +14312,6 @@
       "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
       "requires": {
         "tslib": "^2.4.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.6.2",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-        }
       }
     },
     "levn": {
@@ -14219,12 +14349,24 @@
         "p-locate": "^5.0.0"
       }
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "peer": true
+    },
     "lodash.flattendeep": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
       "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==",
       "dev": true
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "peer": true
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -14342,6 +14484,15 @@
       "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
       "dev": true
     },
+    "memfs": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.6.0.tgz",
+      "integrity": "sha512-I6mhA1//KEZfKRQT9LujyW6lRbX7RkC24xKododIDO3AGShcaFAMKElv1yFGWX8fD4UaSiwasr3NeQ5TdtHY1A==",
+      "requires": {
+        "json-joy": "^9.2.0",
+        "thingies": "^1.11.1"
+      }
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -18450,6 +18601,13 @@
         "@pdf-lib/upng": "^1.0.1",
         "pako": "^1.0.11",
         "tslib": "^1.11.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
       }
     },
     "pdfkit": {
@@ -18491,11 +18649,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/restructure/-/restructure-2.0.1.tgz",
           "integrity": "sha512-e0dOpjm5DseomnXx2M5lpdZ5zoHqF1+bqdMJUohoYVVQa7cBdnk7fdmeI6byNWP/kiME72EeTiSypTCVnpLiDg=="
-        },
-        "tslib": {
-          "version": "2.6.2",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
         }
       }
     },
@@ -18600,6 +18753,17 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "quill-delta": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
+      "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
+      "peer": true,
+      "requires": {
+        "fast-diff": "^1.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -18714,6 +18878,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "peer": true,
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "safe-array-concat": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
@@ -19000,6 +19173,12 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "thingies": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.14.1.tgz",
+      "integrity": "sha512-ktiTHLvVsS5Cifx8zbvg7x4clgf3AS+52gMSGlW+fvk8xYzog8f9qHvivjpQF56NHCKKpj4O1wI6tH92V4a0rQ==",
+      "requires": {}
+    },
     "tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -19080,9 +19259,9 @@
       }
     },
     "tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "tslint": {
       "version": "6.1.3",
@@ -19103,6 +19282,14 @@
         "semver": "^5.3.0",
         "tslib": "^1.13.0",
         "tsutils": "^2.29.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
       }
     },
     "tsutils": {
@@ -19112,6 +19299,14 @@
       "dev": true,
       "requires": {
         "tslib": "^1.8.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
       }
     },
     "type-check": {

package.json

@@ -47,6 +47,7 @@
     "fontkit": "^2.0.2",
     "hyphen": "^1.7.0",
     "jsdom": "^22.1.0",
+    "memfs": "^4.6.0",
     "minimist": "^1.2.8",
     "npx": "^10.2.2",
     "pdf-lib": "^1.17.1",

src/libclo/breakLines.js

@@ -34,6 +34,11 @@ class BreakLineAlgorithm {
             return item.width;
         }
     }
+    /**segement node of one paragraph into lines.
+     * @args items: nodes of a line
+     * @args linewidth: the line width
+     * @returns segmented nodes into lines
+    */
     segmentedNodes(items, lineWidth) {
         let lineWidthFixed = lineWidth;
         this.totalCost(items, lineWidthFixed);

src/libclo/breakLines.ts

@@ -49,7 +49,12 @@ export class BreakLineAlgorithm {
             return item.width;
         }
     }
-
+    
+    /**segement node of one paragraph into lines. 
+     * @args items: nodes of a line
+     * @args linewidth: the line width
+     * @returns segmented nodes into lines
+    */
     segmentedNodes(items : BoxesItem[], lineWidth : number) : BoxesItem[][]{
 
         let lineWidthFixed = lineWidth;

src/libclo/index.js

@@ -32,12 +32,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Clo = exports.calculateTextWidthHeightAux = exports.calculateTextWidthHeight = exports.hyphenTkTree = exports.filterEmptyString = exports.spacesToBreakpoint = exports.hyphenForClo = exports.splitCJKV = exports.twoReturnsToNewline = exports.ptToPx = exports.cjkvRegexPattern = exports.cjkvBlocksInRegex = exports.defaultFrameStyle = exports.defaultTextStyle = exports.A4_IN_PX = exports.Direction = void 0;
+exports.Clo = exports.applyVOffset = exports.putInVBox = exports.calculateTextWidthHeightAux = exports.calculateTextWidthHeight = exports.hyphenTkTree = exports.filterEmptyString = exports.spacesToBreakpoint = exports.hyphenForClo = exports.splitCJKV = exports.twoReturnsToNewline = exports.ptToPx = exports.cjkvRegexPattern = exports.cjkvBlocksInRegex = exports.defaultFrameStyle = exports.defaultTextStyle = exports.A4_IN_PX = exports.Direction = void 0;
 const canva_1 = require("../canva");
 const fontkit = __importStar(require("fontkit"));
 const breakLines = __importStar(require("./breakLines"));
 const PDFDocument = require('pdfkit');
-const fs = __importStar(require("fs"));
+const memfs_1 = require("memfs");
 /**
  * TYPES
  */
@@ -60,7 +60,7 @@ var Direction;
 exports.A4_IN_PX = { "width": 793.7,
     "height": 1122.5 };
 exports.defaultTextStyle = {
-    family: "FreeSerif",
+    family: "Noto Sans CJK TC",
     size: ptToPx(12),
     textWeight: canva_1.TextWeight.REGULAR,
     fontStyle: canva_1.FontStyle.ITALIC,
@@ -103,7 +103,7 @@ exports.ptToPx = ptToPx;
  *  REGISTER PART
  */
 /**
- * convert '\n\n' to newline command ["nl"]
+ * convert '\n\n' to new paragraph command ["br"]
  * @param arr the input `tkTree`
  * @param clo the `Clo` object
  * @returns the input tktree
@@ -123,7 +123,7 @@ function twoReturnsToNewline(arr, clo) {
     for (let j = 0; j < middle.length; j++) {
         var item = middle[j];
         if (!Array.isArray(item) && item == "\n\n") {
-            result.push(["nl"]); // push a newline command to the result `tkTree`
+            result.push(["br"]); // push a newline command to the result `tkTree`
         }
         else {
             result.push(middle[j]);
@@ -303,6 +303,7 @@ function calculateTextWidthHeightAux(element, style, styleCache, fontCache) {
                 result.push(item);
             }
             return [result, styleCache, fontCache];
+            // break point of a line
         }
         else if (element[0] == "bp") {
             var beforeNewLine = (yield calculateTextWidthHeightAux(element[1], style, styleCache, fontCache))[0];
@@ -318,17 +319,65 @@ function calculateTextWidthHeightAux(element, style, styleCache, fontCache) {
                 newLined: afterNewLine,
             };
             return [breakPointNode, styleCache, fontCache];
+            // hglue
         }
         else if (element[0] == "hglue" && !Array.isArray(element[1])) {
-            let hGlue = { stretchFactor: parseFloat(element[1]) };
+            let hGlue = {
+                isHorizonalGlue: true,
+                stretchFactor: parseFloat(element[1])
+            };
             return [hGlue, styleCache, fontCache];
         }
+        // new line <br/>
+        else if (element[0] == "br") {
+            let brBoxItem = yield calculateTextWidthHeightAux(["hglue", "10000"], style, styleCache, fontCache);
+            // <br/>
+            let BR = {
+                isBR: true,
+                original: brBoxItem[0],
+                newLined: brBoxItem[0]
+            };
+            return [BR, styleCache, fontCache];
+        }
         else {
             return [yield calculateTextWidthHeight(element, style), styleCache, fontCache];
         }
     });
 }
 exports.calculateTextWidthHeightAux = calculateTextWidthHeightAux;
+/**
+ * put childrenBox inside VBox
+ */
+function putInVBox(childrenBox, parentBox) {
+    var voffset = Array(childrenBox.length).fill(0);
+    for (var i = 0; i < childrenBox.length - 1; i++) {
+        voffset[i + 1] = voffset[i] + childrenBox[i].height;
+    }
+    console.log("~", voffset);
+    for (var i = 0; i < childrenBox.length; i++) {
+        childrenBox[i] = applyVOffset(childrenBox[i], voffset[i]);
+        childrenBox[i].y += voffset[i];
+    }
+    parentBox.content = childrenBox;
+    return parentBox;
+}
+exports.putInVBox = putInVBox;
+/**
+ * apply vertical offset to a box
+ * @param box the box to be applied
+ * @param voffset the vertical offset
+ * @returns applied box
+ */
+function applyVOffset(box, voffset) {
+    if (box.y !== null) {
+        box.y += voffset;
+    }
+    if (Array.isArray(box.content)) {
+        box.content = box.content.map((x) => applyVOffset(x, voffset));
+    }
+    return box;
+}
+exports.applyVOffset = applyVOffset;
 /**
  * whole document-representing class
  */
@@ -375,14 +424,28 @@ class Clo {
             }
             // generate the width and height of the stream
             let defaultFontStyle = this.attrs.defaultFrameStyle.textStyle;
-            let a = yield calculateTextWidthHeight(preprocessed, defaultFontStyle);
+            // calculate the width and height of each chars
+            let calculated = yield calculateTextWidthHeight(preprocessed, defaultFontStyle);
+            //
+            let paragraphized = this.paragraphize(calculated);
             let breakLineAlgorithms = new breakLines.BreakLineAlgorithm();
-            let segmentedNodes = breakLineAlgorithms.segmentedNodes(a, this.attrs.defaultFrameStyle.width);
-            let segmentedNodesToBox = this.segmentedNodesToFrameBox(segmentedNodes, this.attrs.defaultFrameStyle);
-            let boxesFixed = this.fixenBoxesPosition(segmentedNodesToBox);
+            let segmentedNodes = paragraphized.map((x) => breakLineAlgorithms.segmentedNodes(x, this.attrs.defaultFrameStyle.width));
+            let segmentedNodesToBox = segmentedNodes.map((x) => this.segmentedNodesToFrameBoxAux(x, this.attrs.defaultFrameStyle));
+            let boxWithParagraph = putInVBox(segmentedNodesToBox, this.attrs.defaultFrameStyle);
+            console.log(boxWithParagraph);
+            // fix the bug of main Frame x & y
+            if (boxWithParagraph.x !== null) {
+                boxWithParagraph.x *= 0.75;
+            }
+            if (boxWithParagraph.y !== null) {
+                boxWithParagraph.y *= 0.75;
+            }
+            let boxesFixed = this.fixenBoxesPosition(boxWithParagraph);
+            boxesFixed.content.map((e) => { console.log(e.y); });
             // generate pdf
             const doc = new PDFDocument({ size: 'A4' });
-            doc.pipe(fs.createWriteStream('output.pdf'));
+            // let fsMemory = memfs();
+            doc.pipe(memfs_1.vol.createWriteStream('output.pdf'));
             this.grid(doc);
             let styleCache = {};
             let fontPairCache = { path: "", psName: "" };
@@ -391,6 +454,20 @@ class Clo {
             doc.end();
         });
     }
+    paragraphize(calculated) {
+        var res = [[]];
+        for (var i = 0; i < calculated.length; i++) {
+            if ("isBR" in (calculated[i])) {
+                res[res.length - 1] = res[res.length - 1].concat(calculated[i]);
+                res.push([]);
+            }
+            else {
+                res[res.length - 1] = res[res.length - 1].concat(calculated[i]);
+            }
+        }
+        res = res.filter((x) => x.length !== 0);
+        return res;
+    }
     putText(doc, box, styleCache, fontPairCache) {
         return __awaiter(this, void 0, void 0, function* () {
             var fontPair;
@@ -402,13 +479,16 @@ class Clo {
                     fontPair = (0, canva_1.fontStyleTofont)(box.textStyle);
                     styleCache = box.textStyle;
                     fontPairCache = fontPair;
+                    let textColor = box.textStyle.color;
                     if (fontPair.path.match(/\.ttc$/g)) {
                         doc
+                            .fillColor(textColor !== undefined ? textColor : "#000000")
                             .font(fontPair.path, fontPair.psName)
                             .fontSize(box.textStyle.size * 0.75);
                     }
                     else {
                         doc
+                            .fillColor(textColor !== undefined ? textColor : "#000000")
                             .font(fontPair.path)
                             .fontSize(box.textStyle.size * 0.75); // 0.75 must added!  
                     }
@@ -516,7 +596,7 @@ class Clo {
      * @param frame the frame to be layed out.
      * @returns the big `Box`.
      */
-    segmentedNodesToFrameBox(segmentedNodes, frame) {
+    segmentedNodesToFrameBoxAux(segmentedNodes, frame) {
         let baseLineskip = frame.baseLineskip;
         let boxArrayEmpty = [];
         let bigBox = {
@@ -549,6 +629,8 @@ class Clo {
             bigBoxContent.push(currentLineBox);
         }
         bigBox.content = bigBoxContent;
+        let bigBoxHeight = bigBoxContent.map((x) => x.height).reduce((x, y) => x + y, 0);
+        bigBox.height = bigBoxHeight;
         return bigBox;
     }
     /**

src/libclo/index.ts

@@ -6,6 +6,7 @@ const PDFDocument = require('pdfkit');
 import * as fs from "fs";
 import { Style } from "util";
 import { time } from "console";
+import {memfs} from "memfs";
 
 
 /**
@@ -24,12 +25,17 @@ export enum Direction{
     TTB,
     BTT,
 }
-
 /**
  * Horizonal glue.
  * - stretchFactor : the stretch factor in float
  */
 export interface HGlue{
+    isHorizonalGlue : true,
+    stretchFactor: number
+}
+
+export interface VGlue{
+    isHorizonalGlue : false,
     stretchFactor: number
 }
 
@@ -38,6 +44,11 @@ export interface BreakPoint{
     newLined : BoxesItem  
 }
 
+/** BR is like html br */
+export interface BR extends BreakPoint{
+    isBR : true;
+}
+
 export type BoxesItem = HGlue | Box | BreakPoint | BoxesItem[] ;
 
 /**
@@ -85,7 +96,7 @@ export const A4_IN_PX = {"width" : 793.7,
                   "height" : 1122.5};
 
 export const defaultTextStyle : TextStyle = {
-        family : "FreeSerif",
+        family : "Noto Sans CJK TC",
         size : ptToPx(12),
         textWeight : TextWeight.REGULAR,
         fontStyle : FontStyle.ITALIC,
@@ -134,7 +145,7 @@ export function ptToPx(pt : number) : number{
  */
 
 /**
- * convert '\n\n' to newline command ["nl"]
+ * convert '\n\n' to new paragraph command ["br"]
  * @param arr the input `tkTree`
  * @param clo the `Clo` object
  * @returns the input tktree
@@ -156,7 +167,7 @@ export function twoReturnsToNewline(arr : tkTree, clo : Clo): tkTree{
     for (let j = 0; j < middle.length; j++){
         var item = middle[j];
         if (!Array.isArray(item) && item == "\n\n"){
-            result.push(["nl"]); // push a newline command to the result `tkTree`
+            result.push(["br"]); // push a newline command to the result `tkTree`
         }
         else{
             result.push(middle[j]);
@@ -372,7 +383,7 @@ export async function calculateTextWidthHeightAux(element : tkTree,
 
 
         
-
+    // break point of a line
     }else if(element[0] == "bp"){
 
 
@@ -391,18 +402,66 @@ export async function calculateTextWidthHeightAux(element : tkTree,
             newLined : afterNewLine,
         }
 
+    
         return [breakPointNode, styleCache, fontCache];
+    // hglue
     }else if(element[0] == "hglue" && !Array.isArray(element[1])){
-        let hGlue : HGlue = {stretchFactor : parseFloat(element[1])}
+        let hGlue : HGlue = {
+            isHorizonalGlue : true,
+            stretchFactor : parseFloat(element[1])}
         return [hGlue, styleCache, fontCache];
     }
+    // new line <br/>
+    else if(element[0] == "br"){
+        let brBoxItem = await calculateTextWidthHeightAux(["hglue", "10000"],
+                                        style, styleCache, fontCache);
+        // <br/>
+        let BR : BR = {
+                isBR : true,
+                original : brBoxItem[0],
+                newLined : brBoxItem[0]};
+        return [BR, styleCache, fontCache];
+    }
     else{
         return [await calculateTextWidthHeight(element, style), styleCache, fontCache];
     }
 }
 
+/**
+ * put childrenBox inside VBox
+ */
+export function putInVBox(childrenBox: Box[], parentBox: Box) : Box{
+    var voffset = Array(childrenBox.length).fill(0);
 
+    for (var i=0;i<childrenBox.length-1;i++){
+        voffset[i+1] = voffset[i] + childrenBox[i].height;
+        
+    }
+    console.log("~", voffset);
+    for (var i=0; i<childrenBox.length; i++){
+        childrenBox[i] = applyVOffset(childrenBox[i], voffset[i]);
+        childrenBox[i].y += voffset[i];
+    }
 
+    parentBox.content = childrenBox;
+    return parentBox;
+}
+
+/**
+ * apply vertical offset to a box
+ * @param box the box to be applied
+ * @param voffset the vertical offset
+ * @returns applied box
+ */
+export function applyVOffset(box : Box, voffset : number){
+    if(box.y !== null){
+        box.y += voffset;
+    }
+    if (Array.isArray(box.content)){
+        box.content = box.content.map((x)=>applyVOffset(x, voffset));
+    }
+    return box;
+}
 
 /**
  * whole document-representing class
@@ -468,20 +527,34 @@ export class Clo{
 
         let defaultFontStyle : TextStyle = this.attrs.defaultFrameStyle.textStyle;
 
+        // calculate the width and height of each chars
+        let calculated = await calculateTextWidthHeight(preprocessed, defaultFontStyle);
+
+        //
+        let paragraphized = this.paragraphize(calculated);
 
-        let a = await calculateTextWidthHeight(preprocessed, defaultFontStyle);
 
         let breakLineAlgorithms = new breakLines.BreakLineAlgorithm();
 
-        let segmentedNodes = breakLineAlgorithms.segmentedNodes(a, this.attrs.defaultFrameStyle.width);
+        let segmentedNodes = paragraphized.map((x)=>breakLineAlgorithms.segmentedNodes(x, this.attrs.defaultFrameStyle.width));
 
-        let segmentedNodesToBox =
-            this.segmentedNodesToFrameBox(segmentedNodes, <FrameBox>this.attrs.defaultFrameStyle);
+        let segmentedNodesToBox = segmentedNodes.map((x)=>
+            this.segmentedNodesToFrameBoxAux(x, <FrameBox>this.attrs.defaultFrameStyle));
 
+        let boxWithParagraph = putInVBox(segmentedNodesToBox, this.attrs.defaultFrameStyle);
 
-        let boxesFixed = this.fixenBoxesPosition(segmentedNodesToBox);
+        console.log(boxWithParagraph);
+
+        // fix the bug of main Frame x & y
+        if(boxWithParagraph.x !== null)
+            {boxWithParagraph.x *= 0.75}
+        if(boxWithParagraph.y !== null)
+            {boxWithParagraph.y *= 0.75}
+
+        let boxesFixed = this.fixenBoxesPosition(boxWithParagraph);
 
         
+        (<Box[]>boxesFixed.content).map((e)=>{console.log(e.y)});
 
 
         // generate pdf
@@ -498,6 +571,21 @@ export class Clo{
 
     }
 
+    paragraphize(calculated :  BoxesItem[]): BoxesItem[][]{
+        var res : BoxesItem[][] = [[]];
+        for (var i=0;i<calculated.length;i++){
+            if ("isBR" in <Box>(calculated[i])){
+                res[res.length-1] = res[res.length-1].concat(calculated[i]);
+                res.push([]);
+            }else{
+                res[res.length-1] = res[res.length-1].concat(calculated[i]);
+            }
+        }
+
+        res = res.filter((x)=>x.length !== 0);
+        return res;
+    }
+
     async putText(doc : PDFKit.PDFDocument, box : Box, styleCache : TextStyle,
         fontPairCache : fontPathPSNamePair):
         Promise<[PDFKit.PDFDocument, TextStyle, fontPathPSNamePair]>{
@@ -512,13 +600,16 @@ export class Clo{
                 fontPair = fontStyleTofont(box.textStyle);
                 styleCache = box.textStyle;
                 fontPairCache = fontPair;
+                let textColor = box.textStyle.color;
 
                 if (fontPair.path.match(/\.ttc$/g)){
                     doc
+                    .fillColor(textColor !== undefined ? textColor : "#000000")
                     .font(fontPair.path, fontPair.psName)
                     .fontSize(box.textStyle.size * 0.75);}
                 else{
                     doc
+                    .fillColor(textColor !== undefined ? textColor : "#000000")
                     .font(fontPair.path)
                     .fontSize(box.textStyle.size * 0.75); // 0.75 must added!  
                 }
@@ -630,8 +721,6 @@ export class Clo{
                     }
 
                 }
-
-
                 box.content[i] = this.fixenBoxesPosition(box.content[i]);
             }
         }
@@ -645,7 +734,7 @@ export class Clo{
      * @param frame the frame to be layed out.
      * @returns the big `Box`.
      */
-    segmentedNodesToFrameBox(segmentedNodes : BoxesItem[][], frame : FrameBox) : Box{
+    segmentedNodesToFrameBoxAux(segmentedNodes : BoxesItem[][], frame : FrameBox) : Box{
         let baseLineskip = frame.baseLineskip;
         let boxArrayEmpty  : Box[] = [];
         let bigBox : Box = {
@@ -686,6 +775,8 @@ export class Clo{
         }
 
         bigBox.content = bigBoxContent;
+        let bigBoxHeight = bigBoxContent.map((x)=>x.height).reduce((x,y)=>x+y, 0);
+        bigBox.height = bigBoxHeight;
 
         return bigBox;
     }

src/parser.ts

@@ -1,6 +1,7 @@
 /**
  * parser.ts - parser and js generator of clo.
  */
+import { text } from 'pdfkit';
 import * as p from 'typescript-parsec';
 import { Token } from 'typescript-parsec';
 
@@ -60,6 +61,7 @@ export const lexer = p.buildLexer([
     [true, /^[\+\-\*\/\&\|\!\^\<\>\~\=\?]+/g, TokenKind.Op],
     [true, /^\@/g, TokenKind.ExprMark],
     [true, /^[()\[\]{}]/g, TokenKind.Paren],
+    [true, /^[\`]([^\`]|[\\].)*[\`]/g, TokenKind.Str],
     [true, /^[\"]([^\"]|[\\].)*[\"]/g, TokenKind.Str],
     [true, /^[\']([^\']|[\\].)*[\']/g, TokenKind.Str],
     [true, /^[()\[\]{}]/g, TokenKind.Paren],
@@ -141,9 +143,12 @@ export function applyNotAtText(value : Token<TokenKind>): tkTree{
 };
 
 export function applyText (input : tkTree): tkTree[]{
+
     return ["%text", input];
 };
 
+
+
 export function applyContent(input : tkTree[]): tkTree[]{
     return ["%content", input];
 };
@@ -269,6 +274,16 @@ clo.generatePdf();
 /*CLO : end of end part*/
 `
 
+export function splitText(input : tkTree): tkTree{
+    var ret;
+    if (!Array.isArray(input)){
+        ret = input.split(/(\s+)/);
+    }else{
+        ret = input.map((x)=>splitText(x));
+    }
+    return ret;
+}
+
 /**
  * Convert `tree` (ASTTree; `tkTree`) to JS Code.
  */
@@ -312,15 +327,17 @@ export function treeToJS(tree : tkTree): string{
         }
     }
     if (head == "%text"){
-        let textContents = tree[1];
+        var textContents = splitText(tree[1]);
         if (Array.isArray(textContents)){
+            textContents = textContents.flat().filter((x)=>{return x !== ""});
             let decoratedArray = textContents
                                 .flatMap(x=>String(x))
+                                .map(x=>x.replace("\'",  "\\\'"))
                                 .map(x=>x.replace("\`","\\\`"));
             
             return "[`" + decoratedArray.join("\`, \`") + "`]";
         }else{
-            let decorated = textContents.replace("\`","\\\`");
+            let decorated = textContents.replace("\`","\\\`").replace("\'", "\\\'");
 
             return "[`" + decorated + "`]";
         }