feat: support CJK & ANS spacing (#12)

lib/helpers/_add-on.scss

@@ -0,0 +1,23 @@
+// Author: Sivan [sun.sivan@gmail.com]
+// Description: define add-ons.
+@import "../variables";
+
+@mixin hetiAddOns {
+  // 用于中西文混排增加边距
+  heti-spacing {
+    display: inline;
+
+    & + sup,
+    & + sub {
+      margin-inline-start: 0;
+    }
+  }
+
+  .heti-spacing-start {
+    margin-inline-end: 0.25em;
+  }
+
+  .heti-spacing-end {
+    margin-inline-start: 0.25em;
+  }
+}

lib/helpers/_block.scss

@@ -26,6 +26,7 @@
     &-x-large {
       font-size: $font-size-x-large;
       line-height: $line-height-size-x-large;
+      letter-spacing: 0.05em;
     }
 
     &-small {
@@ -78,5 +79,11 @@
       margin-block-start: $std-block-unit / 2;
       margin-block-end: 0;
     }
+
+    li {
+      &:target {
+        background-color: #def;
+      }
+    }
   }
 }

lib/helpers/_inline.scss

@@ -3,12 +3,13 @@
 @import "../variables";
 
 @mixin hetiInlineHelperClasses {
+  // 标点悬挂 Punctuation mark hanging
   // @todo: 用于标点悬挂用的样式
   #{$root-selector}-hang {
     @include hang();
   }
 
-  // 显示强烈的着重号
+  // 强烈着重号 Emphasis Mark
   #{$root-selector}-em {
     -webkit-text-emphasis: filled circle;
     -webkit-text-emphasis-position: under;
@@ -17,4 +18,21 @@
       -webkit-text-emphasis: none;
     }
   }
+
+  // 内联 Ruby
+  // 在非行间注排版中使用 ruby 标签，且不额外占据空间
+  // 注：使用此样式需按字拆分 <ruby class="heti-ruby heti-ruby--inline"><rb>赫</rb><rp>(</rp><rt>hè</rt><rp>)</rp></ruby>
+  // https://stackoverflow.com/questions/38680695/adjust-the-vertical-positioning-of-ruby-text/38877801#38877801
+  #{$root-selector}-ruby {
+    &--inline {
+      display: inline-flex;
+      flex-direction: column-reverse;
+      height: 1.5em;
+
+      rt {
+        display: inline;
+        line-height: 0.5;
+      }
+    }
+  }
 }