feat: support CJK & ANS spacing (#12)

2020-03-01 22:11:07 +08:00 · 2020-03-01 22:11:07 +08:00 · 91686092ac
commit 91686092ac
parent 25cfc2229a
16 changed files with 534 additions and 1029 deletions
--- a/_site/heti.min.css
+++ b/_site/heti.min.css
@ -1,750 +0,0 @@
-@charset "UTF-8";
-/*!
- * Project: Heti
- * URL: https://github.com/sivan/heti
- * Author: Sivan [sun.sivan@gmail.com]
- */
-@font-face {
-  font-family: "Heti Hei";
-  src: local("PingFang SC Regular"), local("PingFang TC Regular"), local("Hiragino Sans GB W3"), local("Heiti SC Regular"), local("Heiti TC Regular"), local("Microsoft YaHei"), local("Microsoft Jhenghei"), local("Source Han Sans CN Regular"), local("Source Han Sans HK Regular"), local("Source Han Sans TW Regular"), local("Source Han Sans JP Regular"), local("Source Han Sans KR Regular"), local("Noto Sans CJK SC Regular"), local("Noto Sans CJK TC Regular"), local("Noto Sans CJK JP Regular"), local("Noto Sans CJK KR Regular"), local("WenQuanYi Micro Hei"), local("Droid Sans Fallback");
-}
-
-@font-face {
-  font-family: "Heti Hei";
-  font-weight: 200;
-  src: local("PingFang SC Light"), local("PingFang TC Light"), local("Heiti SC Light"), local("Heiti TC Light"), local("Microsoft YaHei Light"), local("Microsoft Jhenghei Light"), local("Source Han Sans CN Light"), local("Source Han Sans HK Light"), local("Source Han Sans TW Light"), local("Source Han Sans JP Light"), local("Source Han Sans KR Light"), local("Noto Sans CJK SC Light"), local("Noto Sans CJK TC Light"), local("Noto Sans CJK JP Light"), local("Noto Sans CJK KR Light");
-}
-
-@font-face {
-  font-family: "Heti Hei";
-  font-weight: 600;
-  src: local("PingFang SC Medium"), local("Hiragino Sans GB W6"), local("PingFang TC Medium"), local("Heiti SC Medium"), local("Heiti TC Medium"), local("Microsoft YaHei Bold"), local("Microsoft Jhenghei Bold"), local("Source Han Sans CN Bold"), local("Source Han Sans HK Bold"), local("Source Han Sans TW Bold"), local("Source Han Sans JP Bold"), local("Source Han Sans KR Bold"), local("Noto Sans CJK SC Bold"), local("Noto Sans CJK TC Bold"), local("Noto Sans CJK JP Bold"), local("Noto Sans CJK KR Bold");
-}
-
-@font-face {
-  font-family: "Heti Hei Black";
-  font-weight: 800;
-  src: local("Lantinghei SC Heavy"), local("Lantinghei TC Heavy"), local("PingFang SC Semibold"), local("PingFang TC Semibold"), local("Hiragino Sans GB W6"), local("Heiti SC Medium"), local("Heiti TC Medium"), local("Microsoft YaHei Bold"), local("Microsoft Jhenghei Bold"), local("Source Han Sans CN Heavy"), local("Source Han Sans HK Heavy"), local("Source Han Sans TW Heavy"), local("Source Han Sans JP Heavy"), local("Source Han Sans KR Heavy"), local("Noto Sans CJK SC Heavy"), local("Noto Sans CJK TC Heavy"), local("Noto Sans CJK JP Heavy"), local("Noto Sans CJK KR Heavy"), local("Droid Sans Fallback");
-}
-
-@font-face {
-  font-family: "Heti Song";
-  src: local("Songti SC Regular"), local("Songti TC Regular"), local("SimSun");
-}
-
-@font-face {
-  font-family: "Heti Song";
-  font-weight: 200;
-  src: local("Songti SC Light"), local("Songti TC Light"), local(STSong), local("SimSun");
-}
-
-@font-face {
-  font-family: "Heti Song";
-  font-weight: 600;
-  src: local("Songti SC Bold"), local("Songti TC Bold"), local("SimSun");
-}
-
-@font-face {
-  font-family: "Heti Song Black";
-  font-weight: 800;
-  src: local("Songti SC Black"), local("SimSun");
-}
-
-@font-face {
-  font-family: "Heti Kai";
-  src: local("Kaiti SC Regular"), local("Kaiti TC Regular"), local("BiauKai");
-}
-
-@font-face {
-  font-family: "Heti Kai";
-  font-weight: 600;
-  src: local("Kaiti SC Bold"), local("Kaiti TC Bold");
-}
-
-@font-face {
-  font-family: "Heti Kai Black";
-  font-weight: 800;
-  src: local("Kaiti SC Black"), local("Kaiti TC Black");
-}
-
-.heti {
-  max-width: 42em;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-}
-
-.heti::before, .heti::after {
-  content: "";
-  display: table;
-}
-
-.heti::after {
-  clear: both;
-}
-
-.heti > *:first-child,
-.heti section > *:first-child,
-.heti td > *:first-child {
-  margin-block-start: 0 !important;
-}
-
-.heti > *:last-child,
-.heti section > *:last-child,
-.heti td > *:last-child {
-  margin-block-end: 0 !important;
-}
-
-.heti blockquote {
-  margin-block-start: 12px;
-  margin-block-end: 24px;
-  margin-inline-start: 32px;
-  margin-inline-end: 32px;
-  padding-block-start: 12px;
-  padding-block-end: 12px;
-  padding-inline-start: 16px;
-  padding-inline-end: 16px;
-  background-color: rgba(0, 0, 0, 0.054);
-}
-
-.heti figure {
-  display: block;
-  text-align: center;
-}
-
-.heti figure > img {
-  display: block;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-}
-
-.heti hr {
-  width: 30%;
-  height: 1px;
-  margin-block-start: 48px;
-  margin-block-end: 47px;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  border: 0;
-  background-color: #ddd;
-}
-
-.heti p {
-  margin-block-start: 12px;
-  margin-block-end: 24px;
-  text-align: justify;
-}
-
-.heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti p:not(:lang(zh)) {
-  text-align: start;
-}
-
-.heti pre {
-  margin-block-start: 12px;
-  margin-block-end: 12px;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  padding-block-start: 12px;
-  padding-block-end: 12px;
-  padding-inline-start: 16px;
-  padding-inline-end: 16px;
-  overflow: auto;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  white-space: pre;
-  word-wrap: normal;
-  background-color: rgba(0, 0, 0, 0.054);
-  border-radius: 4px;
-}
-
-.heti pre code {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background-color: transparent;
-  color: inherit;
-}
-
-.heti h1,
-.heti h2,
-.heti h3,
-.heti h4,
-.heti h5,
-.heti h6 {
-  position: relative;
-  margin: 0;
-  margin-block-start: 24px;
-  margin-block-end: 12px;
-  font-weight: 600;
-}
-
-.heti h1 {
-  margin-block-end: 24px;
-  font-size: 32px;
-  line-height: 48px;
-  letter-spacing: 1.6px;
-}
-
-.heti h2 {
-  font-size: 24px;
-  line-height: 36px;
-  letter-spacing: 1.2px;
-}
-
-.heti h3 {
-  font-size: 20px;
-  line-height: 36px;
-  letter-spacing: 1px;
-}
-
-.heti h4 {
-  font-size: 18px;
-  line-height: 24px;
-}
-
-.heti h5 {
-  font-size: 16px;
-  line-height: 24px;
-}
-
-.heti h6 {
-  font-size: 14px;
-  line-height: 24px;
-}
-
-.heti h1 + h2,
-.heti h2 + h3,
-.heti h3 + h4,
-.heti h4 + h5,
-.heti h5 + h6 {
-  margin-block-start: 12px;
-}
-
-.heti ul,
-.heti ol,
-.heti dl {
-  margin-block-start: 12px;
-  margin-block-end: 24px;
-}
-
-.heti ul,
-.heti ol {
-  padding-inline-start: 32px;
-}
-
-.heti ul ul,
-.heti ul ol,
-.heti ol ul,
-.heti ol ol {
-  margin-block-start: 0;
-  margin-block-end: 0;
-}
-
-.heti ul {
-  list-style-type: disc;
-}
-
-.heti ol {
-  list-style-type: decimal;
-}
-
-.heti ul ul,
-.heti ol ul {
-  list-style-type: circle;
-}
-
-.heti ul ul ul,
-.heti ul ol ul,
-.heti ol ul ul,
-.heti ol ol ul {
-  list-style-type: square;
-}
-
-.heti li {
-  list-style-type: unset;
-}
-
-.heti table {
-  box-sizing: border-box;
-  table-layout: fixed;
-  border-collapse: collapse;
-  border: 1px solid #ccc;
-  margin-block-start: 12px;
-  margin-block-end: 24px;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  word-break: break-word;
-}
-
-.heti th,
-.heti td {
-  border: 1px solid #ccc;
-  padding-block-start: 6px;
-  padding-block-end: 6px;
-  padding-inline-start: 8px;
-  padding-inline-end: 8px;
-}
-
-.heti caption {
-  caption-side: bottom;
-  margin-block-start: 2px;
-  margin-block-end: -4px;
-  font-size: 14px;
-  line-height: 24px;
-}
-
-.heti a {
-  text-decoration: none;
-}
-
-.heti a:hover {
-  padding-block-end: 1px;
-  border-block-end: 1px solid currentColor;
-  text-decoration: none;
-}
-
-.heti abbr[title] {
-  padding-block-end: 1px;
-  border-block-end: 1px dotted;
-  text-decoration: none;
-  cursor: help;
-}
-
-.heti b,
-.heti strong {
-  font-weight: 600;
-}
-
-.heti code {
-  margin-inline-start: 0.25em;
-  margin-inline-end: 0.25em;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 0.875em;
-}
-
-.heti dfn {
-  font-weight: 600;
-}
-
-.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti dfn:not(:lang(zh)) {
-  font-weight: 400;
-}
-
-.heti em {
-  font-weight: 600;
-}
-
-.heti figcaption {
-  display: inline-block;
-  vertical-align: top;
-  font-size: 14px;
-  text-align: start;
-}
-
-.heti i {
-  font-style: italic;
-}
-
-.heti ins,
-.heti u {
-  padding-block-end: 1px;
-  border-block-end: 1px solid;
-  text-decoration: none;
-}
-
-.heti mark {
-  padding-block-start: 2px;
-  padding-block-end: 2px;
-  padding-inline-start: 1px;
-  padding-inline-end: 1px;
-  margin-inline-start: 1px;
-  margin-inline-end: 1px;
-  background-color: rgba(255, 247, 0, 0.88);
-}
-
-.heti q {
-  quotes: "「" "」" "『" "』";
-}
-
-.heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti q:not(:lang(zh)) {
-  quotes: initial;
-  quotes: auto;
-}
-
-.heti rt {
-  font-size: 0.875em;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.heti small {
-  font-size: 0.875em;
-}
-
-.heti strong {
-  font-weight: 600;
-}
-
-.heti sub,
-.heti sup {
-  position: relative;
-  margin-inline-start: 0.25em;
-  margin-inline-end: 0.25em;
-  font-size: 0.75em;
-  font-family: "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  line-height: 1;
-  vertical-align: baseline;
-}
-
-.heti sub {
-  bottom: -0.25em;
-}
-
-.heti sup {
-  top: -0.5em;
-}
-
-.heti summary {
-  padding-inline-start: 1em;
-  outline: 0;
-  cursor: pointer;
-}
-
-.heti summary::-webkit-details-marker {
-  width: 0.6em;
-  margin-inline-end: 0.4em;
-}
-
-.heti u[title] {
-  cursor: help;
-  border-block-end-color: rgba(0, 0, 0, 0.54);
-  border-block-end-width: 3px;
-  border-block-end-style: double;
-}
-
-.heti address,
-.heti cite,
-.heti dfn,
-.heti dt,
-.heti em {
-  font-style: normal;
-}
-
-.heti address:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti address:not(:lang(zh)),
-.heti cite:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
-.heti cite:not(:lang(zh)),
-.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
-.heti dfn:not(:lang(zh)),
-.heti dt:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
-.heti dt:not(:lang(zh)),
-.heti em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
-.heti em:not(:lang(zh)) {
-  font-style: italic;
-}
-
-.heti abbr[title],
-.heti del,
-.heti ins,
-.heti s,
-.heti u {
-  margin-inline-start: 1px;
-  margin-inline-end: 1px;
-}
-
-.heti, .heti--sans {
-  font-family: "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.heti--serif {
-  font-family: "Times New Roman", Times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.heti--classic {
-  font-family: "Times New Roman", Times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.heti--classic h1,
-.heti--classic h2,
-.heti--classic h3,
-.heti--classic h4,
-.heti--classic h5,
-.heti--classic h6 {
-  font-family: "Times New Roman", Times, "Heti Kai Black", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-weight: 800;
-}
-
-.heti--classic blockquote,
-.heti--classic cite,
-.heti--classic q {
-  font-family: "Times New Roman", Times, "Heti Kai", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.heti--classic figcaption,
-.heti--classic caption,
-.heti--classic th {
-  font-family: "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.heti--hei {
-  font-family: "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.heti--song {
-  font-family: "Times New Roman", Times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.heti--kai {
-  font-family: "Times New Roman", Times, "Heti Kai", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.heti--columns-1, .heti--columns-2, .heti--columns-3, .heti--columns-4, .heti--columns-16em, .heti--columns-20em, .heti--columns-24em, .heti--columns-28em, .heti--columns-32em, .heti--columns-36em, .heti--columns-40em, .heti--columns-44em, .heti--columns-48em, .heti comma {
-  max-width: none;
-  column-gap: 2em;
-}
-
-.heti--columns-1 p, .heti--columns-2 p, .heti--columns-3 p, .heti--columns-4 p, .heti--columns-16em p, .heti--columns-20em p, .heti--columns-24em p, .heti--columns-28em p, .heti--columns-32em p, .heti--columns-36em p, .heti--columns-40em p, .heti--columns-44em p, .heti--columns-48em p, .heti comma p {
-  margin-block-start: 6px;
-  margin-block-end: 12px;
-  text-indent: 2em;
-}
-
-.heti--columns-1 {
-  column-count: 1;
-}
-
-.heti--columns-2 {
-  column-count: 2;
-}
-
-.heti--columns-3 {
-  column-count: 3;
-}
-
-.heti--columns-4 {
-  column-count: 4;
-}
-
-.heti--columns-16em {
-  column-width: 16em;
-}
-
-.heti--columns-20em {
-  column-width: 20em;
-}
-
-.heti--columns-24em {
-  column-width: 24em;
-}
-
-.heti--columns-28em {
-  column-width: 28em;
-}
-
-.heti--columns-32em {
-  column-width: 32em;
-}
-
-.heti--columns-36em {
-  column-width: 36em;
-}
-
-.heti--columns-40em {
-  column-width: 40em;
-}
-
-.heti--columns-44em {
-  column-width: 44em;
-}
-
-.heti--columns-48em {
-  column-width: 48em;
-}
-
-.heti--vertical {
-  max-width: none;
-  max-height: 42em;
-  writing-mode: vertical-rl;
-  letter-spacing: 0.125em;
-}
-
-.heti--vertical h1,
-.heti--vertical h2,
-.heti--vertical h3,
-.heti--vertical h4,
-.heti--vertical h5,
-.heti--vertical h6 {
-  text-align: start;
-}
-
-.heti--ancient, .heti--poetry {
-  font-family: "Times New Roman", Times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.heti--ancient h1,
-.heti--ancient h2,
-.heti--ancient h3,
-.heti--ancient h4,
-.heti--ancient h5,
-.heti--ancient h6, .heti--poetry h1,
-.heti--poetry h2,
-.heti--poetry h3,
-.heti--poetry h4,
-.heti--poetry h5,
-.heti--poetry h6 {
-  font-family: "Times New Roman", Times, "Heti Kai Black", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-weight: 800;
-  text-align: center;
-}
-
-.heti--ancient h1 .heti-meta,
-.heti--ancient h2 .heti-meta,
-.heti--ancient h3 .heti-meta,
-.heti--ancient h4 .heti-meta,
-.heti--ancient h5 .heti-meta,
-.heti--ancient h6 .heti-meta, .heti--poetry h1 .heti-meta,
-.heti--poetry h2 .heti-meta,
-.heti--poetry h3 .heti-meta,
-.heti--poetry h4 .heti-meta,
-.heti--poetry h5 .heti-meta,
-.heti--poetry h6 .heti-meta {
-  font-weight: 400;
-}
-
-@media screen and (min-width: 640px) {
-  .heti--ancient h1 .heti-meta,
-  .heti--ancient h2 .heti-meta,
-  .heti--ancient h3 .heti-meta,
-  .heti--ancient h4 .heti-meta,
-  .heti--ancient h5 .heti-meta,
-  .heti--ancient h6 .heti-meta, .heti--poetry h1 .heti-meta,
-  .heti--poetry h2 .heti-meta,
-  .heti--poetry h3 .heti-meta,
-  .heti--poetry h4 .heti-meta,
-  .heti--poetry h5 .heti-meta,
-  .heti--poetry h6 .heti-meta {
-    position: absolute;
-    line-height: inherit;
-    text-indent: 0;
-    display: inline;
-    margin-block-start: 4px;
-    margin-inline-start: 8px;
-  }
-}
-
-.heti--ancient .heti-meta, .heti--poetry .heti-meta {
-  line-height: 24px;
-  text-align: center;
-  text-indent: 0;
-}
-
-.heti--ancient p {
-  text-indent: 2em;
-}
-
-.heti--poetry p {
-  text-align: center;
-  text-indent: 0;
-}
-
-.heti--annotation p {
-  margin-block-start: 0;
-  margin-block-end: 0;
-  line-height: 2.25;
-  text-indent: 2em;
-}
-
-.heti--annotation em {
-  -webkit-text-emphasis: filled circle;
-  -webkit-text-emphasis-position: under;
-  font-weight: 400;
-}
-
-.heti--annotation em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti--annotation em:not(:lang(zh)) {
-  -webkit-text-emphasis: none;
-}
-
-.heti--annotation .heti-meta {
-  margin-block-start: 12px;
-  margin-block-end: 24px;
-}
-
-.heti .heti-meta {
-  display: block;
-  text-indent: 0;
-}
-
-.heti .heti-verse {
-  text-align: center;
-  text-indent: 0;
-}
-
-.heti .heti-large {
-  font-size: 18px;
-  line-height: 24px;
-}
-
-.heti .heti-x-large {
-  font-size: 20px;
-  line-height: 30px;
-}
-
-.heti .heti-small {
-  font-size: 14px;
-  line-height: 24px;
-}
-
-.heti .heti-x-small {
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.heti .heti-list-latin {
-  list-style-type: upper-latin;
-}
-
-.heti .heti-list-latin ol {
-  list-style-type: lower-roman;
-}
-
-.heti .heti-list-latin ol ol {
-  list-style-type: lower-latin;
-}
-
-.heti .heti-list-han {
-  list-style-type: cjk-ideographic;
-}
-
-.heti .heti-list-han ol {
-  list-style-type: decimal;
-}
-
-.heti .heti-list-han ol ol {
-  list-style-type: decimal-leading-zero;
-}
-
-.heti .heti-fn {
-  margin-block-start: 59px;
-  border-block-start: 1px solid #ccc;
-  font-size: 14px;
-  font-family: "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  line-height: 24px;
-}
-
-.heti .heti-fn ol {
-  margin-block-start: 12px;
-  margin-block-end: 0;
-}
-
-.heti .heti-hang {
-  position: absolute;
-  line-height: inherit;
-  text-indent: 0;
-}
-
-.heti .heti-em {
-  -webkit-text-emphasis: filled circle;
-  -webkit-text-emphasis-position: under;
-}
-
-.heti .heti-em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti .heti-em:not(:lang(zh)) {
-  -webkit-text-emphasis: none;
-}
--- a/_site/index.css
+++ b/_site/index.css
@ -50,8 +50,9 @@ a {

 .article[data-bg-grid="grid-24"] {
  background-size: 100% 24px;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #eee 1px, rgba(255, 255, 255, 0) 33px),
-  linear-gradient(rgba(255, 255, 255, 0) 23px, #eee 1px);
+  background-image:
+    linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #eee 1px, rgba(255, 255, 255, 0) 33px),
+    linear-gradient(rgba(255, 255, 255, 0) 23px, #eee 1px);
  outline-color: #eee;
 }

@ -63,8 +64,9 @@ a {

 .article[data-bg-grid="grid-12"] {
  background-size: 100% 12px;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #eee 1px, rgba(255, 255, 255, 0) 33px),
-  linear-gradient(rgba(255, 255, 255, 0) 11px, #eee 12px);
+  background-image:
+    linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #eee 1px, rgba(255, 255, 255, 0) 33px),
+    linear-gradient(rgba(255, 255, 255, 0) 11px, #eee 12px);
  outline-color: #eee;
 }

@ -313,4 +315,7 @@ a {
    margin-block-start: 12px;
    margin-block-end: 0;
  }
+  .article .article__toc ol ol {
+    margin-block-start: 0;
+  }
 }
--- a/_site/index.html
+++ b/_site/index.html
@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./normalize.css">
  <link rel="stylesheet" href="./index.css">
-  <link rel="stylesheet" href="./heti.min.css">
+  <link rel="stylesheet" href="./heti.css">
  <link rel="icon" href="./favicon.svg">
 </head>
 <body>
@ -15,7 +15,7 @@
      <h1>赫蹏</h1>
      <blockquote>古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后》：<q>武（籍武 ）发篋中，有裹药二枚，赫蹏书。</q><u>颜师古</u>注：<q><u>邓展</u>曰：<q>赫音兄弟鬩墙之鬩。</q><u>应劭</u>曰：<q>赫蹏，薄小纸也。</q></q><u>宋</u><u>赵彦卫</u> 《云麓漫钞》卷七：<q>《赵后传》所谓『赫蹏』者，注云<q>薄小纸</q>，然其寔亦縑帛。</q></blockquote>

-      <nav class="article__toc">
+      <nav class="article__toc heti-skip">
        <details open>
          <summary>目录</summary>
          <ol>
@ -31,34 +31,33 @@
              </ul>
            </li>
            <li><a href="#columns">多栏排版</a></li>
-            <li><a href="#vertical">垂直排版</a></li>
-            <li><a href="#guidelines">排版原则</a></li>
+            <li><a href="#vertical">竖排排版</a></li>
+            <li><a href="#guidelines">设计原则</a></li>
            <li>
              <a href="#appendix">附录</a>
              <ol class="heti-list-latin">
                <li><a href="#compatibility">兼容性</a></li>
                <li><a href="#tags">标签示例表</a></li>
+                <li><a href="#javascript">增强脚本</a></li>
                <li><a href="#license">开源协议</a></li>
              </ol>
            </li>
-            <li><a href="#wip">待开发功能</a></li>
          </ol>
        </details>
      </nav>

      <h2 id="intro">介绍<a class="anchor" href="#intro">#</a></h2>
-      <p><dfn>赫蹏</dfn>（<code>hètí</code>）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。由于它不同于传统的网页样式重置，而是专注于<em>正文区域</em>的样式增强，因此可以很好的与常见的CSS样式重置方案共存。</p>
+      <p><ruby class="heti-ruby--inline"><rb>赫</rb><rp>(</rp><rt>hè</rt><rp>)</rp></ruby><ruby class="heti-ruby--inline"><rb>蹏</rb><rp>(</rp><rt>tí</rt><rp>)</rp></ruby>是专为中文网页内容设计的排版样式增强。它基于通行的中文排版规范，可为网站的读者带来更好的内容阅读体验。它的主要特性有：</p>
      <ul>
-        <li>全标签样式统一；</li>
        <li>贴合网格的排版；</li>
-        <li>预置多种预设字体族（仅限桌面端）；</li>
-        <li>预置横排、直排（竖排）样式；</li>
+        <li>全标签样式美化；</li>
        <li>预置古文、诗词样式；</li>
-        <li>预置行间注排版样式；</li>
-        <li>预置多栏排版样式；</li>
-        <li>兼容<i>normalize.css</i>、<i>CSS Reset</i><sup><a href="#fn-01">[1]</a></sup>；</li>
+        <li>预置多种排版样式（行间注、多栏、竖排等）；</li>
+        <li>多种预设字体族（仅限桌面端）；</li>
+        <li>简/繁体中文支持；</li>
+        <li>中西文混排美化（基于JavaScript脚本实现）；</li>
+        <li>兼容<i>normalize.css</i>、<i>CSS Reset<sup><a id="ref-01" href="#fn-01">[1]</a></sup></i>；</li>
        <li>移动端支持；</li>
-        <li>基于BEM<sup><a href="#fn-02">[2]</a></sup>命名；</li>
        <li>……</li>
      </ul>
      <p>总之，用上就会变好看。</p>
@ -66,27 +65,27 @@
      <hr>

      <h2 id="usage">使用方法<a class="anchor" href="#usage">#</a></h2>
-      <p>赫蹏的使用方法很简单，只需要引入样式文件并设定作用范围即可：</p>
+      <p>赫蹏的源文件可在项目仓库（<a href="https://github.com/sivan/heti">https://github.com/sivan/heti</a>）下载，生产文件位于<code>dist</code>文件夹。使用方法如下：</p>
      <ol>
        <li>
-          在页面的<code>&lt;head&gt;</code>标签中引入<code>heti.css</code>文件：
+          在页面的<code>&lt;/head&gt;</code>标签前中引入<code>heti.css</code>样式文件：
          <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;./heti.css&quot;&gt;</code></pre>
        </li>
        <li>
          在要作用的容器元素上增加<code>class="heti"</code>的类名即可：
-          <pre><code>&lt;article class=&quot;entry heti&quot;&gt;
+          <pre><code>&lt;article class=&quot;entry <ins>heti</ins>&quot;&gt;
  &lt;h1&gt;我的世界观&lt;/h1&gt;
  &lt;p&gt;有钱人的生活就是这么朴实无华，且枯燥&lt;/p&gt;
  ……
 &lt;/article&gt;</code></pre>
        </li>
-        <li>不建议将样式作用在根标签（比如<code>&lt;body&gt;</code>或<code>&lt;div class=&quot;container&quot;&gt;</code>）上，除非你的页面<u title="就像本页面一样">通篇都是文章的一部分</u>。</li>
+        <li>注意：赫蹏是正文区域的样式增强，不是<i>normalize.css</i>或<i>CSS Reset</i>的替代。因此<b>不建议</b>将它作用在根标签（如<code>&lt;body&gt;</code>或<code>&lt;div class=&quot;container&quot;&gt;</code>）上，除非像本页面一样通篇都是文章的一部分。</li>
      </ol>

      <hr>

      <h2 id="examples">效果示例<a class="anchor" href="#examples">#</a></h2>
-      <p>本站已<em>全页</em>应用了赫蹏样式，下面是赫蹏在特殊排版下的效果演示。</p>
+      <p>本页面<em>全页</em>应用了赫蹏样式，所见即所得。下面是内置的多种排版效果演示。</p>
      <details open>
        <summary id="example-1">示例1：古文</summary>
        <section class="demo">
@ -120,12 +119,12 @@
          </div>
          <hr>
          <div class="heti--poetry">
-            <h2>丑奴儿·书博山道中壁<span class="heti-meta heti-small">[宋]<abbr title="号稼轩">辛弃疾</abbr></span></h2>
+            <h2>赠汪伦<span class="heti-meta heti-small">[唐]<abbr title="号青莲居士">李白</abbr></span></h2>
            <p class="heti-x-large">
-              少年不识愁滋味，爱上层楼<span class="heti-hang">。</span><br>
-              爱上层楼，为赋新词强说愁<span class="heti-hang">。</span><br>
-              而今识尽愁滋味，欲说还休<span class="heti-hang">。</span><br>
-              欲说还休，却道天凉好个秋<span class="heti-hang">。</span>
+              李白乘舟将欲行<span class="heti-hang">，</span><br>
+              忽闻岸上踏歌声<span class="heti-hang">。</span><br>
+              桃花潭水深千尺<span class="heti-hang">，</span><br>
+              不及汪伦送我情<span class="heti-hang">。</span>
            </p>
          </div>
        </section>
@ -162,27 +161,27 @@
      <hr>

      <h2 id="columns">多栏排版<a class="anchor" href="#columns">#</a></h2>
-      <p>赫蹏预置了多种多栏布局类，可以按栏数或栏宽进行设置。</p>
+      <p>赫蹏预置了多种多栏布局类，可以按栏数或每栏行宽进行设置。</p>
      <details>
        <summary>查看使用说明</summary>
-        <p>为容器元素添加名为<code>heti--columns-2</code>class即可实现三栏排版。</p>
-        <pre><code>&lt;div class=&quot;heti heti--columns-2&quot;&gt;&lt;/div&gt;</code></pre>
+        <p>为容器元素添加名为<code>heti--columns-2</code>的class即可实现双栏排版。</p>
+        <pre><code>&lt;div class=&quot;heti heti--columns-2&quot;&gt;...&lt;/div&gt;</code></pre>
        <table>
          <thead>
          <tr>
-            <th style="width: 60px;">方式</th>
+            <th style="width: 80px;">方式</th>
            <th style="width: 160px;">对应类名</th>
-            <th style="width: 280px;">可选数值</th>
+            <th style="width: 300px;">可选数值</th>
          </tr>
          </thead>
          <tbody>
          <tr>
-            <td>按数量</td>
+            <td>按栏目数量</td>
            <td><code>heti--columns-3</code></td>
            <td>2, 3, 4</td>
          </tr>
          <tr>
-            <td>按宽度</td>
+            <td>按每栏行宽</td>
            <td><code>heti--columns-16em</code></td>
            <td>16em, 20em, 24em, … +4em,  … , 48em</td>
          </tr>
@ -206,12 +205,12 @@

      <hr>

-      <h2 id="vertical">垂直排版<a class="anchor" href="#vertical">#</a></h2>
-      <p>赫蹏预置了传统的垂直方向排版，同样贴合栅格。</p>
+      <h2 id="vertical">竖排排版<a class="anchor" href="#vertical">#</a></h2>
+      <p>赫蹏预置了传统的竖排（直排）方向排版，同样贴合栅格。</p>
      <details>
        <summary>查看使用说明</summary>
-        <p>为容器元素添加名为<code>heti--vertical</code>class即可实现垂直布局：</p>
-        <pre><code>&lt;div class=&quot;heti heti--vertical&quot;&gt;&lt;/div&gt;</code></pre>
+        <p>为容器元素添加名为<code>heti--vertical</code>的class即可实现竖排布局。</p>
+        <pre><code>&lt;div class=&quot;heti heti--vertical&quot;&gt;...&lt;/div&gt;</code></pre>
      </details>
      <figure class="card card--vertical">
        <div class="card__vertical-container">
@ -227,21 +226,20 @@
            <p>願陛下託臣以討賊興復之效；不效，則治臣之罪，以告先帝之靈。若無興德之言，則責攸之、禕、允等之慢，以彰其咎。陛下亦宜自謀，以諮諏善道，察納雅言，深追先帝遺詔。臣不勝受恩感激。今當遠離，臨表涕零，不知所言！</p>
          </section>
        </div>
-        <figcaption>垂直排版演示</figcaption>
+        <figcaption>竖排排版演示</figcaption>
      </figure>

      <hr>

-      <h2 id="guidelines">排版原则<a class="anchor" href="#guidelines">#</a></h2>
+      <h2 id="guidelines">设计原则<a class="anchor" href="#guidelines">#</a></h2>
+      <p>赫蹏项目的初衷很简单：它不作为一个CSS Reset出现，而是根据通行的中文排版规范，对网页正文区域进行排版样式增强。在部分CSS特性尚未有浏览器支持前，可通过JavaScript实现部分补充（非必要）。</p>
      <h3>核心</h3>
-      <p>以美化中文方块字排版为目标，假定作用范围是网页中的文章区域（含标题、正文、元信息等），不包含网页导航、表单、侧边栏等区域（它们也不需要这套格式排版）。</p>
-      <p>使用<code>heti.css</code>时建议搭配良好的中文书写习惯，即：使用正确的HTML标签、正确的引号、中文全角标点等。使用Markdown书写文章将助你一臂之力。</p>
-      <h3>字号</h3>
-      <p><code>heti.css</code> 采用16px作为默认字号。在文字较大时（作用于标题等情况），会适当地增加字间距以便获得更好地可读性。</p>
-      <h3>字体</h3>
-      <p>参考《中文排版需求<sup><a href="#fn-03">[3]</a></sup>》中描述的四种常见书籍排版字体：宋体、楷体、黑体、仿宋。赫蹏提供黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。</p>
+      <p>美化中文方块字排版，作用范围是网页中的文章区域（含标题、正文、元信息等），不包含网页导航、表单、侧边栏等区域（它们也不需要这套格式排版）。</p>
+      <p>使用<code>heti.css</code>时建议搭配良好的中文书写习惯，即：使用正确的HTML标签（可参考后面的<a href="#tags">标签示例表</a>）、正确的引号、中文全角标点等。使用Markdown书写文章将助你一臂之力。</p>
+      <h3>文字</h3>
+      <p>参考《中文排版需求<sup><a id="ref-02" href="#fn-02">[2]</a></sup>》中描述的常用书籍排版字体，赫蹏提供了黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。文字默认采用16px作为标准字号。在标题等文字较大的情况下，会适当地增加字间距以便获得更好地可读性。</p>
      <details>
-        <summary>查看对照表</summary>
+        <summary>查看字体风格对照表</summary>
        <section class="section">
          <table>
            <caption>各字体族下不同标签对应的字体</caption>
@ -258,7 +256,7 @@
            <tr>
              <th>标题</th>
              <td>黑体</td>
-              <td>宋体（粗）</td>
+              <td>宋体</td>
              <td>楷体</td>
              <td>
                <section>
@ -363,7 +361,7 @@
      <h3>标点</h3>
      <p>参考《中文排版需求》制定符号样式。唯一差异在于简体中文一律采用直角引号（「」）替代圆角引号（“”），这样可以保持字符等宽。</p>
      <h3>间距</h3>
-      <p>为保持页面元素总是贴合垂直栅格，大部分块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。</p>
+      <p>为保持页面元素总是贴合垂直栅格，块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。标题根据亲密性原则采用相反的边距设计。</p>

      <hr>

@ -402,14 +400,14 @@
          <table>
            <caption>常用标签样式示例表</caption>
            <tr>
-              <th style="width: 80px;">类型</th>
+              <th style="width: 72px;">类型</th>
              <th style="width: 320px;">标签</th>
              <th style="width: 240px;">效果</th>
            </tr>
            <tr>
              <td>链接</td>
-              <td><code>&lt;a href=&quot;https://github.com/sivan/heti&quot; title=&quot;赫蹏&quot; target=&quot;_blank&quot;&gt;heti.css&lt;/a&gt;</code></td>
-              <td><a href="https://github.com/sivan/heti" title="赫蹏" target="_blank">heti.css</a></td>
+              <td><code>&lt;a href=&quot;https://github.com/sivan/heti&quot; title=&quot;赫蹏&quot;&gt;heti.css&lt;/a&gt;</code></td>
+              <td><a href="https://github.com/sivan/heti" title="赫蹏">heti.css</a></td>
            </tr>
            <tr>
              <td>缩写</td>
@ -428,12 +426,12 @@
            </tr>
            <tr>
              <td>文本变动</td>
-              <td><code>这次考试，我考了&lt;del datetime=&quot;17:00:00&quot;&gt;97&lt;/del&gt;&lt;ins datetime=&quot;18:15:00&quot;&gt;100&lt;/ins&gt;分呢！</code></td>
-              <td>这次考试，我考了<del datetime="17:00:00">97</del><ins datetime="18:15:00">100</ins>分呢！</td>
+              <td><code>这次考试，我考了&lt;del datetime=&quot;17:00:00&quot;&gt;58&lt;/del&gt;&lt;ins datetime=&quot;18:15:00&quot;&gt;98&lt;/ins&gt;分呢！</code></td>
+              <td>这次考试，我考了<del datetime="17:00:00">58</del><ins datetime="18:15:00">98</ins>分呢！</td>
            </tr>
            <tr>
              <td>文本更新</td>
-              <td><code>因为谁也不认识，所以最后我们决定念&lt;s&gt;d&iacute;&lt;/s&gt; t&iacute;。</code></td>
+              <td><code>因为谁也不认识，所以最后我们决定念&lt;s&gt;d&iacute;&lt;/s&gt;t&iacute;。</code></td>
              <td>因为谁也不认识，所以最后我们决定念<s>dí</s>tí。</td>
            </tr>
            <tr>
@ -446,6 +444,11 @@
              <td><code>&lt;dfn&gt;窃&middot;格瓦拉&lt;/dfn&gt;，中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。</code></td>
              <td><dfn>窃·格瓦拉</dfn>，中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。</td>
            </tr>
+            <tr>
+              <td>标记</td>
+              <td><code>这道题&lt;mark&gt;必考&lt;/mark&gt;，你们爱记不记。</code></td>
+              <td>这道题<mark>必考</mark>，你们爱记不记。</td>
+            </tr>
            <tr>
              <td>强调</td>
              <td><code>稳住，&lt;em&gt;我们能赢&lt;/em&gt;！</code></td>
@ -456,15 +459,22 @@
              <td><code>我们&lt;span class=&quot;heti-em&quot;&gt;必将&lt;/span&gt;战胜这场疫情。</code></td>
              <td>我们<span class="heti-em">必将</span>战胜这场疫情。</td>
            </tr>
-            <tr>
-              <td>标记</td>
-              <td><code>这道题&lt;mark&gt;必考&lt;/mark&gt;，你们爱记不记。</code></td>
-              <td>这道题<mark>必考</mark>，你们爱记不记。</td>
-            </tr>
          </table>
        </section>
      </details>

+      <h3 id="javascript">增强脚本<sup>beta</sup><a class="anchor" href="#javascript">#</a></h3>
+      <p>由于部分CSS特性尚未有浏览器，所以可选择使用增强脚本进行中西文混排优化。无论你的输入习惯是否在中西文之间加入「空格」，都会统一成一样的间距（1/4字宽的空白）。</p>
+      <details>
+        <summary>查看使用说明</summary>
+        <p>在页面的<code>&lt;/body&gt;</code>标签前引入JavaScript脚本：</p>
+        <pre><code>&lt;script src=&quot;./heti-addon.min.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+  const heti = new Heti();
+  heti.autoSpacing();
+&lt;/script&gt;</code></pre>
+      </details>
+
      <h3 id="license">开源协议<a class="anchor" href="#tags">#</a></h3>
      <p>「赫蹏」遵循MIT协议开源。</p>

@ -472,18 +482,23 @@

      <h2 id="wip">待开发功能<a class="anchor" href="#wip">#</a></h2>
      <ul>
-        <li>️☑ 中、西文混排</li>
        <li>☑ 标点挤压</li>
        <li>☑ 标点悬挂</li>
+        <li>✅ 中、西文混排</li>
        <li>✅ 诗词版式</li>
        <li>✅ 行间注版式</li>
      </ul>

      <footer class="heti-fn">
        <ol>
-          <li id="fn-01">CSS Reset：指代类似Eric Meyer's Reset CSS的样式重置方案</li>
-          <li id="fn-02">BEM：由Yandex公司创造的命名方式 https://en.bem.info/</li>
-          <li id="fn-03">《中文排版需求》：https://w3c.github.io/clreq/</li>
+          <li id="fn-01">
+            <a href="#ref-01" title="移至">^</a>
+            CSS Reset：指代类似Eric Meyer's Reset CSS的样式重置方案
+          </li>
+          <li id="fn-02">
+            <a href="#ref-02" title="移至">^</a>
+            《中文排版需求》：https://w3c.github.io/clreq/
+          </li>
        </ol>
      </footer>
    </article>
@ -502,6 +517,7 @@
    </ul>
  </aside>

+  <script src="./heti-addon.js"></script>
  <script>
    const $$root = document.getElementsByTagName('article')[0]

@ -518,6 +534,9 @@
    addEventListeners(document.getElementsByClassName('J_radioGrid'), 'change', function (e) {
      $$root.setAttribute('data-bg-grid', e.target.value)
    })
+
+    const heti = new Heti()
+    heti.autoSpacing()
  </script>
 </body>
 </html>