Merge pull request #110 from sivan/fix-ruby-style

fix: inline <ruby> styles

_site/heti.css

@@ -868,6 +868,7 @@
   display: inline-flex;
   flex-direction: column-reverse;
   height: 1.5em;
+  vertical-align: top;
 }
 .heti .heti-ruby--inline rt {
   display: inline;

_site/index.html

@@ -45,7 +45,7 @@ <h1 class="article__title">赫蹏</h1>
       </nav>
 
       <h2 id="intro">介绍<a class="anchor" href="#intro">#</a></h2>
-      <p><ruby class="heti-ruby--inline"><rb>赫</rb><rp>(</rp><rt lang="zh-Latn">hè</rt><rp>)</rp></ruby><ruby class="heti-ruby--inline"><rb>蹏</rb><rp>(</rp><rt lang="zh-Latn">tí</rt><rp>)</rp></ruby>是专为中文网页内容设计的排版样式增强。它基于通行的中文排版规范，可为网站的读者带来更好的内容阅读体验。它的主要特性有：</p>
+      <p><ruby class="heti-ruby--inline">赫<rp>(</rp><rt lang="zh-Latn">hè</rt><rp>)</rp></ruby><ruby class="heti-ruby--inline">蹏<rp>(</rp><rt lang="zh-Latn">tí</rt><rp>)</rp></ruby>是专为中文网页内容设计的排版样式增强。它基于通行的中文排版规范，可为网站的读者带来更好的内容阅读体验。它的主要特性有：</p>
       <ul>
         <li>贴合网格的排版；</li>
         <li>全标签样式美化；</li>

lib/helpers/_inline.scss

@@ -24,13 +24,14 @@
 
   // 内联 Ruby
   // 在非行间注排版中使用 ruby 标签，且不额外占据空间
-  // 注：使用此样式需按字拆分 <ruby class="heti-ruby heti-ruby--inline"><rb>赫</rb><rp>(</rp><rt>hè</rt><rp>)</rp></ruby>
+  // 注：使用此样式需按字拆分 <ruby class="heti-ruby heti-ruby--inline">赫<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;
+      vertical-align: top;
 
       rt {
         display: inline;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "heti",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "赫蹏是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。",
   "main": "lib/heti.scss",
   "files": [