zhao/heti
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: support double quotation marks #62

Browse source
This commit is contained in:
Sivan 2021-12-09 02:50:12 +08:00 committed by GitHub
commit 78eb216f19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 249 additions and 5590 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
_site/heti-addon.js
View file

@ -680,6 +680,9 @@
const REG_BD_CLOSE = `」』）》〉】〗〕］｝`; const REG_BD_CLOSE = `」』）》〉】〗〕］｝`;
const REG_BD_START = `${REG_BD_OPEN}${REG_BD_CLOSE}`; const REG_BD_START = `${REG_BD_OPEN}${REG_BD_CLOSE}`;
const REG_BD_END = `${REG_BD_STOP}${REG_BD_OPEN}${REG_BD_CLOSE}`; const REG_BD_END = `${REG_BD_STOP}${REG_BD_OPEN}${REG_BD_CLOSE}`;
const REG_BD_HALF_OPEN = `“‘`;
const REG_BD_HALF_CLOSE = `”’`;
const REG_BD_HALF_START = `${REG_BD_HALF_OPEN}${REG_BD_HALF_CLOSE}`;
class Heti { class Heti {
constructor (rootSelector) { constructor (rootSelector) {
@ -754,6 +757,13 @@
replace: portion => getWrapper('heti-adjacent', 'heti-adjacent-quarter', portion.text), replace: portion => getWrapper('heti-adjacent', 'heti-adjacent-quarter', portion.text),
offset: this.offsetWidth, offset: this.offsetWidth,
})); }));
// 使用弯引号的情况下，在停顿符号接弯引号（如「。“」）或弯引号接全角开引号（如“《」）时，间距缩进调整到四分之一
findAndReplaceDOMText($$elm, Object.assign({}, commonConfig, {
find: new RegExp(`([${REG_BD_STOP}])(?=[${REG_BD_HALF_START}])|([${REG_BD_HALF_OPEN}])(?=[${REG_BD_OPEN}])`,'g'),
replace: portion => getWrapper('heti-adjacent', 'heti-adjacent-quarter', portion.text),
offset: this.offsetWidth,
}));
} }
autoSpacing () { autoSpacing () {

4
_site/heti.css
View file

@ -685,6 +685,10 @@
text-align: start; text-align: start;
} }
.heti--vertical q {
quotes: "「" "」" "『" "』";
}
.heti--ancient, .heti--poetry { .heti--ancient, .heti--poetry {
font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
} }

188
_site/index.html
View file

@ -23,14 +23,13 @@
<li> <li>
<a href="#examples">效果演示</a> <a href="#examples">效果演示</a>
<ul> <ul>
<li><a href="#example-1">示例1：古文</a></li> <li><a href="#example-ancient">古文</a></li>
<li><a href="#example-2">示例2：诗词</a></li> <li><a href="#example-verse">诗词</a></li>
<li><a href="#example-3">示例3：行间注</a></li> <li><a href="#example-annotation">行间注</a></li>
<li><a href="#example-3">示例4：英文演示</a></li> <li><a href="#example-columns">多栏排版</a></li>
<li><a href="#example-vertical">竖排排版</a></li>
</ul> </ul>
</li> </li>
<li><a href="#columns">多栏排版</a></li>
<li><a href="#vertical">竖排排版</a></li>
<li><a href="#guidelines">设计原则</a></li> <li><a href="#guidelines">设计原则</a></li>
<li> <li>
<a href="#appendix">附录</a> <a href="#appendix">附录</a>
@ -66,7 +65,7 @@
<hr> <hr>
<h2 id="usage">使用方法<a class="anchor" href="#usage">#</a></h2> <h2 id="usage">使用方法<a class="anchor" href="#usage">#</a></h2>
<p>项目源文件：<a href="https://github.com/sivan/heti">https://github.com/sivan/heti</a>，生产文件已同步至unpkg.com。使用方法如下：</p> <p>项目地址：<a href="https://github.com/sivan/heti">https://github.com/sivan/heti</a>，使用方法如下：</p>
<ol> <ol>
<li> <li>
在页面的<code>&lt;/head&gt;</code>标签前中引入<code>heti.css</code>样式文件： 在页面的<code>&lt;/head&gt;</code>标签前中引入<code>heti.css</code>样式文件：
@ -77,7 +76,7 @@
<pre><code>&lt;article class=&quot;entry <ins>heti</ins>&quot;&gt; <pre><code>&lt;article class=&quot;entry <ins>heti</ins>&quot;&gt;
&lt;h1&gt;我的世界观&lt;/h1&gt; &lt;h1&gt;我的世界观&lt;/h1&gt;
&lt;p&gt;有钱人的生活就是这么朴实无华，且枯燥&lt;/p&gt; &lt;p&gt;有钱人的生活就是这么朴实无华，且枯燥。&lt;/p&gt;
…… ……
&lt;/article&gt;</code></pre> &lt;/article&gt;</code></pre>
</li> </li>
@ -88,10 +87,17 @@
<h2 id="examples">效果示例<a class="anchor" href="#examples">#</a></h2> <h2 id="examples">效果示例<a class="anchor" href="#examples">#</a></h2>
<p>本页面<em>全页</em>应用了赫蹏样式，所见即所得。下面是内置的多种排版效果演示。</p> <p>本页面<em>全页</em>应用了赫蹏样式，所见即所得。下面是内置的多种排版效果演示。</p>
<h3 id="example-ancient">古文<a class="anchor" href="#example-ancient">#</a></h3>
<details>
<summary>如何使用？</summary>
<p>为容器元素<code>&lt;div class=&quot;heti&quot;&gt;</code>添加名为<code>heti--ancient</code>的class即可实现古文版式：</p>
<pre><code>&lt;div class=&quot;heti heti--ancient&quot;&gt;...&lt;/div&gt;</code></pre>
</details>
<details open> <details open>
<summary id="example-1">示例1：古文</summary> <summary>示例</summary>
<section class="demo"> <section class="demo">
<div class="heti--ancient"> <div class="heti heti--ancient">
<h1>出师表</h1> <h1>出师表</h1>
<p class="heti-meta heti-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年～234年10月8日）</p> <p class="heti-meta heti-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年～234年10月8日）</p>
<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p> <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
@ -107,10 +113,41 @@
</section> </section>
</details> </details>
<h3 id="example-verse">诗词<a class="anchor" href="#example-verse">#</a></h3>
<details>
<summary>如何使用？</summary>
<ul>
<li>
诗词：为容器元素<code>&lt;div class=&quot;heti&quot;&gt;</code>添加名为<code>heti--poetry</code>的class实现诗词版式：
<pre><code>&lt;div class=&quot;heti heti--poetry&quot;&gt;
&lt;h2&gt;九月九日忆山东兄弟&lt;span class=&quot;heti-meta heti-small&quot;&gt;[唐]&lt;abbr title=&quot;号摩诘居士&quot;&gt;王维&lt;/abbr&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p class=&quot;heti-x-large&quot;&gt;
独在异乡为异客&lt;span class=&quot;heti-hang&quot;&gt;，&lt;/span&gt;&lt;br&gt;
每逢佳节倍思亲&lt;span class=&quot;heti-hang&quot;&gt;。&lt;/span&gt;&lt;br&gt;
遥知兄弟登高处&lt;span class=&quot;heti-hang&quot;&gt;，&lt;/span&gt;&lt;br&gt;
遍插茱萸少一人&lt;span class=&quot;heti-hang&quot;&gt;。&lt;/span&gt;
&lt;/p&gt;
&lt;/div&gt;</code></pre>
</li>
<li>
诗节：在古文版式<code>&lt;div class=&quot;heti heti--ancient&quot;&gt;</code>中，为诗句添加名为<code>heti-verse</code>的class可以将其居中显示：
<pre><code>&lt;div class=&quot;heti heti--ancient&quot;&gt;
&lt;h2&gt;一剪梅&middot;红藕香残玉簟秋&lt;span class=&quot;heti-meta heti-small&quot;&gt;[宋]&lt;abbr title=&quot;号易安居士&quot;&gt;李清照&lt;/abbr&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p class=&quot;heti-verse heti-x-large&quot;&gt;
红藕香残玉簟秋。轻解罗裳，独上兰舟&lt;span class=&quot;heti-hang&quot;&gt;。&lt;/span&gt;&lt;br&gt;
云中谁寄锦书来，雁字回时，月满西楼&lt;span class=&quot;heti-hang&quot;&gt;。&lt;/span&gt;&lt;br&gt;
花自飘零水自流。一种相思，两处闲愁&lt;span class=&quot;heti-hang&quot;&gt;。&lt;/span&gt;&lt;br&gt;
此情无计可消除，才下眉头，却上心头&lt;span class=&quot;heti-hang&quot;&gt;。&lt;/span&gt;
&lt;/p&gt;
&lt;/div&gt;</code></pre>
</li>
<li>搭配使用标点悬挂<code>&lt;span class=&quot;heti-hang&quot;&gt;</code>、元信息<code>&lt;span class=&quot;heti-meta heti-small&quot;&gt;</code>来丰富展示效果。</li>
</ul>
</details>
<details open> <details open>
<summary id="example-2">示例2：诗词</summary> <summary>示例</summary>
<section class="demo"> <section class="demo">
<div class="heti--ancient"> <div class="heti heti--ancient">
<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-verse heti-x-large"> <p class="heti-verse heti-x-large">
红藕香残玉簟秋。轻解罗裳，独上兰舟<span class="heti-hang">。</span><br> 红藕香残玉簟秋。轻解罗裳，独上兰舟<span class="heti-hang">。</span><br>
@ -120,7 +157,7 @@
</p> </p>
</div> </div>
<hr> <hr>
<div class="heti--poetry"> <div class="heti 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"> <p class="heti-x-large">
李白乘舟将欲行<span class="heti-hang">，</span><br> 李白乘舟将欲行<span class="heti-hang">，</span><br>
@ -132,10 +169,16 @@
</section> </section>
</details> </details>
<h3 id="example-annotation">行间注<a class="anchor" href="#example-annotation">#</a></h3>
<details>
<summary>如何使用？</summary>
<p>为容器元素<code>&lt;div class=&quot;heti&quot;&gt;</code>添加名为<code>heti--annotation</code>的class后，搭配<code>&lt;ruby&gt;</code>元素即可实现整齐的行间注效果：</p>
<pre><code>&lt;div class=&quot;heti heti--annotation&quot;&gt;...&lt;/div&gt;</code></pre>
</details>
<details open> <details open>
<summary id="example-3">示例3：行间注</summary> <summary>示例</summary>
<section class="demo"> <section class="demo">
<div class="heti--ancient heti--annotation"> <div class="heti heti--ancient heti--annotation">
<h2>庖丁解牛</h2> <h2>庖丁解牛</h2>
<p class="heti-meta heti-small">作者：<abbr title="庄子">庄周</abbr>（公元前369～公元前286年）</p> <p class="heti-meta heti-small">作者：<abbr title="庄子">庄周</abbr>（公元前369～公元前286年）</p>
<p>吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑。缘督以为经，可以保身，可以全生，可以养亲，可以尽年。</p> <p>吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑。缘督以为经，可以保身，可以全生，可以养亲，可以尽年。</p>
@ -147,26 +190,11 @@
</section> </section>
</details> </details>
<details open> <h3 id="example-columns">多栏排版<a class="anchor" href="#example-columns">#</a></h3>
<summary id="example-4">示例4：英文演示</summary>
<section class="demo">
<div lang="en-US">
<h1>Lorem Ipsum</h1>
<p><q>There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...</q></p>
<p><dfn>Lorem Ipsum</dfn> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <em>Aldus PageMaker</em> including versions of Lorem Ipsum.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, <i>"Lorem ipsum dolor sit amet.."</i>, comes from a line in section 1.10.32.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from <cite>"de Finibus Bonorum et Malorum"</cite> by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</section>
</details>
<hr>
<h2 id="columns">多栏排版<a class="anchor" href="#columns">#</a></h2>
<p>赫蹏预置了多种多栏布局类，可以按栏数或每栏行宽进行设置。</p> <p>赫蹏预置了多种多栏布局类，可以按栏数或每栏行宽进行设置。</p>
<details> <details>
<summary>查看使用说明</summary> <summary>如何使用？</summary>
<p>为容器元素添加名为<code>heti--columns-2</code>的class即可实现双栏排版。</p> <p>为容器元素<code>&lt;div class=&quot;heti&quot;&gt;</code>添加名为<code>heti--columns-2</code>的class即可实现双栏排版：</p>
<pre><code>&lt;div class=&quot;heti heti--columns-2&quot;&gt;...&lt;/div&gt;</code></pre> <pre><code>&lt;div class=&quot;heti heti--columns-2&quot;&gt;...&lt;/div&gt;</code></pre>
<table> <table>
<thead> <thead>
@ -190,6 +218,8 @@
</tbody> </tbody>
</table> </table>
</details> </details>
<details open>
<summary>示例</summary>
<figure class="card card--multi-column"> <figure class="card card--multi-column">
<section class="heti--columns-2"> <section class="heti--columns-2">
<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p> <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
@ -204,16 +234,17 @@
</section> </section>
<figcaption>多栏排版演示</figcaption> <figcaption>多栏排版演示</figcaption>
</figure> </figure>
</details>
<hr> <h3 id="example-vertical">竖排排版<a class="anchor" href="#example-vertical">#</a></h3>
<h2 id="vertical">竖排排版<a class="anchor" href="#vertical">#</a></h2>
<p>赫蹏预置了传统的竖排（直排）方向排版，同样贴合栅格。</p> <p>赫蹏预置了传统的竖排（直排）方向排版，同样贴合栅格。</p>
<details> <details>
<summary>查看使用说明</summary> <summary>如何使用？</summary>
<p>为容器元素添加名为<code>heti--vertical</code>的class即可实现竖排布局。</p> <p>为容器元素<code>&lt;div class=&quot;heti&quot;&gt;</code>添加名为<code>heti--vertical</code>的class即可实现竖排布局：</p>
<pre><code>&lt;div class=&quot;heti heti--vertical&quot;&gt;...&lt;/div&gt;</code></pre> <pre><code>&lt;div class=&quot;heti heti--vertical&quot;&gt;...&lt;/div&gt;</code></pre>
</details> </details>
<details open>
<summary>示例</summary>
<figure class="card card--vertical"> <figure class="card card--vertical">
<div class="card__vertical-container"> <div class="card__vertical-container">
<section class="heti--vertical heti--ancient"> <section class="heti--vertical heti--ancient">
@ -230,18 +261,29 @@
</div> </div>
<figcaption>竖排排版演示</figcaption> <figcaption>竖排排版演示</figcaption>
</figure> </figure>
</details>
<h3 id="example-latin">英文排版<a class="anchor" href="#example-latin">#</a></h3>
<details>
<summary>效果演示</summary>
<section class="demo">
<div lang="en-US">
<h1>Lorem Ipsum</h1>
<p><q>There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...</q></p>
<p><dfn>Lorem Ipsum</dfn> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <em>Aldus PageMaker</em> including versions of Lorem Ipsum.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from <cite>"de Finibus Bonorum et Malorum"</cite> by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</section>
</details>
<hr> <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> <p>赫蹏项目的初衷很简单：它不作为一个CSS Reset出现，而是根据通行的中文排版规范，对网页正文区域进行排版样式增强。在部分CSS特性尚未有浏览器支持前，可通过JavaScript实现功能补充。</p>
<h3>核心</h3>
<p>美化中文方块字排版，作用范围是网页中的文章区域（含标题、正文、元信息等），不包含网页导航、表单、侧边栏等区域（它们也不需要这套格式排版）。</p>
<p>使用<code>heti.css</code>时建议搭配良好的中文书写习惯，即：使用正确的HTML标签（可参考后面的<a href="#tags">标签示例表</a>）、正确的引号、中文全角标点等。使用Markdown书写文章将助你一臂之力。</p>
<h3>文字</h3> <h3>文字</h3>
<p>参考《中文排版需求<sup><a id="ref-02" href="#fn-02">[2]</a></sup>》中描述的常用书籍排版字体，赫蹏提供了黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。文字默认采用16px作为标准字号。在标题等文字较大的情况下，会适当地增加字间距以便获得更好地可读性。</p> <p>参考《中文排版需求<sup><a id="ref-02" href="#fn-02">[2]</a></sup>》中描述的常用书籍排版字体，赫蹏提供了黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。文字默认采用16px作为标准字号。在标题等文字较大的情况下，会适当地增加字间距以便获得更好地可读性。</p>
<details> <details>
<summary>查看字体风格对照表</summary> <summary>查看字体风格详细对照表</summary>
<section class="section"> <section class="section">
<table> <table>
<caption>各字体族下不同标签对应的字体</caption> <caption>各字体族下不同标签对应的字体</caption>
@ -257,8 +299,8 @@
<tbody> <tbody>
<tr> <tr>
<th>标题</th> <th>标题</th>
<td>黑体</td> <td rowspan="7">黑体</td>
<td>宋体</td> <td rowspan="7">宋体</td>
<td>楷体</td> <td>楷体</td>
<td> <td>
<section> <section>
@ -268,8 +310,6 @@
</tr> </tr>
<tr> <tr>
<th>正文</th> <th>正文</th>
<td>黑体</td>
<td>宋体</td>
<td>宋体</td> <td>宋体</td>
<td> <td>
<section> <section>
@ -279,8 +319,6 @@
</tr> </tr>
<tr> <tr>
<th>引用</th> <th>引用</th>
<td>黑体</td>
<td>宋体</td>
<td>楷体</td> <td>楷体</td>
<td> <td>
<section> <section>
@ -290,8 +328,6 @@
</tr> </tr>
<tr> <tr>
<th>强调</th> <th>强调</th>
<td>黑体</td>
<td>宋体</td>
<td>宋体</td> <td>宋体</td>
<td> <td>
<section> <section>
@ -301,8 +337,6 @@
</tr> </tr>
<tr> <tr>
<th>对话</th> <th>对话</th>
<td>黑体</td>
<td>宋体</td>
<td>楷体</td> <td>楷体</td>
<td> <td>
<section> <section>
@ -313,8 +347,6 @@
<tr> <tr>
<th>图例</th> <th>图例</th>
<td>黑体</td> <td>黑体</td>
<td>宋体</td>
<td>黑体</td>
<td> <td>
<section> <section>
<figure> <figure>
@ -327,8 +359,6 @@
<tr> <tr>
<th>表头</th> <th>表头</th>
<td>黑体</td> <td>黑体</td>
<td>宋体</td>
<td>黑体</td>
<td> <td>
<section> <section>
<table> <table>
@ -361,7 +391,11 @@
</section> </section>
</details> </details>
<h3>标点</h3> <h3>标点</h3>
<p>参考《中文排版需求》制定符号样式。唯一差异在于简体中文一律采用直角引号（「」）替代圆角引号（“”），这样可以保持字符等宽。</p> <p>参考《中文排版需求》制定符号样式。唯一的差异在于简体中文一律采用直角引号（「」）替代弯引号（“”），这样可以保持字符等宽。</p>
<details>
<summary>查看如何将引号设置为弯引号（“”）</summary>
<p>通过源码引用的方式覆盖`_variables.scss`文件中`$chinese-quote-set`变量的值为`cn`即可将引号设为GB/T 15834-2011的国家标准。</p>
</details>
<h3>间距</h3> <h3>间距</h3>
<p>为保持页面元素总是贴合垂直栅格，块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。标题根据亲密性原则采用相反的边距设计。</p> <p>为保持页面元素总是贴合垂直栅格，块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。标题根据亲密性原则采用相反的边距设计。</p>
@ -385,8 +419,8 @@
</tr> </tr>
<tr> <tr>
<th>兼容性</th> <th>兼容性</th>
<td>4</td> <td>69</td>
<td>3.1</td> <td>12.1</td>
<td>3</td> <td>3</td>
<td>暂未支持</td> <td>暂未支持</td>
<td>79</td> <td>79</td>
@ -466,24 +500,22 @@
</details> </details>
<h3 id="javascript">增强脚本<sup>beta</sup><a class="anchor" href="#javascript">#</a></h3> <h3 id="javascript">增强脚本<sup>beta</sup><a class="anchor" href="#javascript">#</a></h3>
<p>由于部分CSS特性尚未有浏览器支持等原因，可选择使用增强脚本进行排版效果优化。目前增强脚本的功能有：</p> <p>由于部分CSS特性尚未有浏览器支持等原因，可选择使用增强脚本进行排版效果优化。在页面的<code>&lt;/body&gt;</code>标签前引入JavaScript脚本后初始化即可：</p>
<ul>
<li>中英文混排优化：无论你的输入习惯是否在中西文之间留有「空格」<sup><a id="ref-03" href="#fn-03">[3]</a></sup>，都会统一成标准间距（¼字宽的空白）；</li>
<li>标点挤压：自动对中文标点进行½字宽的挤压（间隔符挤压¼字宽）。</li>
</ul>
<details>
<summary>使用方法与效果</summary>
<p>在页面的<code>&lt;/body&gt;</code>标签前引入JavaScript脚本：</p>
<pre><code>&lt;script src=&quot;//unpkg.com/heti/umd/heti-addon.min.js&quot;&gt;&lt;/script&gt; <pre><code>&lt;script src=&quot;//unpkg.com/heti/umd/heti-addon.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt; &lt;script&gt;
const heti = new Heti('.heti'); const heti = new Heti('.heti');
heti.autoSpacing(); heti.autoSpacing();
&lt;/script&gt;</code></pre> &lt;/script&gt;</code></pre>
<section> <p>目前支持的功能有：</p>
<ul>
<li>中英文混排优化：无论你的输入习惯是否在中西文之间留有「空格」<sup><a id="ref-03" href="#fn-03">[3]</a></sup>，都会统一成标准间距（¼字宽的空白）；</li>
<li>标点挤压：自动对中文标点进行½字宽的挤压（弯引号和间隔符挤压¼字宽）。</li>
</ul>
<p>效果演示：</p>
<table> <table>
<caption>增强脚本示例表</caption> <caption>增强脚本示例表</caption>
<tr> <tr>
<th colspan="4">中英文间距</th> <th colspan="4">中西文混排美化</th>
</tr> </tr>
<tr> <tr>
<th style="width: 80px;">默认文本</th> <th style="width: 80px;">默认文本</th>
@ -512,9 +544,19 @@
<blockquote style="margin-inline-start: 0; margin-inline-end: 0;">古代称用以书写的小幅绢帛。后亦以借指纸<mark>。《</mark>汉书·外戚传下·孝成赵皇后<mark>》：「</mark>武（籍武 ）发篋中，有裹药二枚，赫蹏书。」<u>颜师古</u>注：「<u>邓展</u>曰：『赫音兄弟鬩墙之鬩。』<u>应劭</u>曰：『赫蹏，薄小纸也。』」<u>宋</u><u>赵彦卫</u>《云麓漫钞》卷七：「《赵后传》所谓『赫蹏』者，注云『薄小纸』，然其寔亦縑帛。」</blockquote> <blockquote style="margin-inline-start: 0; margin-inline-end: 0;">古代称用以书写的小幅绢帛。后亦以借指纸<mark>。《</mark>汉书·外戚传下·孝成赵皇后<mark>》：「</mark>武（籍武 ）发篋中，有裹药二枚，赫蹏书。」<u>颜师古</u>注：「<u>邓展</u>曰：『赫音兄弟鬩墙之鬩。』<u>应劭</u>曰：『赫蹏，薄小纸也。』」<u>宋</u><u>赵彦卫</u>《云麓漫钞》卷七：「《赵后传》所谓『赫蹏』者，注云『薄小纸』，然其寔亦縑帛。」</blockquote>
</td> </td>
</tr> </tr>
<!-- <tr>-->
<!-- <th>默认文本（弯引号）</th>-->
<!-- <td colspan="3">-->
<!-- <blockquote class="heti-skip" style="margin-inline-start: 0; margin-inline-end: 0;">古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后<mark>》：“</mark>武（籍武 ）发篋中，有裹药二枚，赫蹏书。”<u>颜师古</u>注：“<u>邓展</u>曰：‘赫音兄弟鬩墙之鬩。’<u>应劭</u>曰：‘赫蹏，薄小纸也。’”<u>宋</u><u>赵彦卫</u>《云麓漫钞》卷七<mark>：“《</mark>赵后传》所谓‘赫蹏’者，注云‘薄小纸’，然其寔亦縑帛。”</blockquote>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th>脚本效果（弯引号）</th>-->
<!-- <td colspan="3">-->
<!-- <blockquote style="margin-inline-start: 0; margin-inline-end: 0;">古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后<mark>》：“</mark>武（籍武 ）发篋中，有裹药二枚，赫蹏书。”<u>颜师古</u>注：“<u>邓展</u>曰：‘赫音兄弟鬩墙之鬩。’<u>应劭</u>曰：‘赫蹏，薄小纸也。’”<u>宋</u><u>赵彦卫</u>《云麓漫钞》卷七<mark>：“《</mark>赵后传》所谓‘赫蹏’者，注云‘薄小纸’，然其寔亦縑帛。”</blockquote>-->
<!-- </td>-->
<!-- </tr>-->
</table> </table>
</section>
</details>
<h3 id="license">开源协议<a class="anchor" href="#tags">#</a></h3> <h3 id="license">开源协议<a class="anchor" href="#tags">#</a></h3>
<p>「赫蹏」遵循MIT协议开源。</p> <p>「赫蹏」遵循MIT协议开源。</p>
@ -580,7 +622,7 @@
$$article.className = ['article', 'heti', e.target.value].join(' ') $$article.className = ['article', 'heti', e.target.value].join(' ')
}) })
const heti = new Heti() const heti = new Heti('.article')
heti.autoSpacing() heti.autoSpacing()
</script> </script>
</body> </body>

10
js/heti-addon.js
View file

@ -31,6 +31,9 @@ const REG_BD_OPEN = `「『（《〈【〖〔［｛`
const REG_BD_CLOSE = `」』）》〉】〗〕］｝` const REG_BD_CLOSE = `」』）》〉】〗〕］｝`
const REG_BD_START = `${REG_BD_OPEN}${REG_BD_CLOSE}` const REG_BD_START = `${REG_BD_OPEN}${REG_BD_CLOSE}`
const REG_BD_END = `${REG_BD_STOP}${REG_BD_OPEN}${REG_BD_CLOSE}` const REG_BD_END = `${REG_BD_STOP}${REG_BD_OPEN}${REG_BD_CLOSE}`
const REG_BD_HALF_OPEN = `“‘`
const REG_BD_HALF_CLOSE = `”’`
const REG_BD_HALF_START = `${REG_BD_HALF_OPEN}${REG_BD_HALF_CLOSE}`
class Heti { class Heti {
constructor (rootSelector) { constructor (rootSelector) {
@ -105,6 +108,13 @@ class Heti {
replace: portion => getWrapper('heti-adjacent', 'heti-adjacent-quarter', portion.text), replace: portion => getWrapper('heti-adjacent', 'heti-adjacent-quarter', portion.text),
offset: this.offsetWidth, offset: this.offsetWidth,
})) }))
// 使用弯引号的情况下，在停顿符号接弯引号（如「。“」）或弯引号接全角开引号（如“《」）时，间距缩进调整到四分之一
Finder($$elm, Object.assign({}, commonConfig, {
find: new RegExp(`([${REG_BD_STOP}])(?=[${REG_BD_HALF_START}])|([${REG_BD_HALF_OPEN}])(?=[${REG_BD_OPEN}])`,'g'),
replace: portion => getWrapper('heti-adjacent', 'heti-adjacent-quarter', portion.text),
offset: this.offsetWidth,
}))
} }
autoSpacing () { autoSpacing () {

3
lib/_inline.scss
View file

@ -81,8 +81,9 @@
} }
// 设置引用文本为中文引号 // 设置引用文本为中文引号
// 默认无论简繁都采用台湾规范，修改只需重新定义变量 `$chinese-quote-set` 即可。
q { q {
quotes: "「" "」" "『" "』"; quotes: map-get(map-get($chinese-quote-presets, $chinese-quote-set), "horizontal");
@include non-cjk-block { @include non-cjk-block {
quotes: initial; quotes: initial;

22
lib/_variables.scss
View file

@ -77,6 +77,28 @@ $std-inline-unit: $font-size-normal !default;
$text-indent-length: 2em !default; $text-indent-length: 2em !default;
$text-indent-size: $font-size-normal * 2 !default; $text-indent-size: $font-size-normal * 2 !default;
// 中文引号 Chinese Quote Set
// `cn`：中华人民共和国国家标准——GB/T 15834-2011《标点符号用法》 http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf
// `tw`：中国台湾地区标准——《重訂標點符號手冊》 https://language.moe.gov.tw/001/Upload/FILES/SITE_CONTENT/M0001/HAU/h6.htm
// `common`：部分中文社区（如知乎）在简体中文里亦采用与中国台湾地区标准一致的规范。
// 注：垂直时浏览器会自动旋转，无需定义为垂直方向的字符。
$chinese-quote-presets: (
"cn": (
"horizontal": "“" "”" "‘" "’",
"vertical": "『" "』" "「" "」"
),
"tw": (
"horizontal": "「" "」" "『" "』",
"vertical": "「" "」" "『" "』"
),
"common": (
"horizontal": "「" "」" "『" "』",
"vertical": "「" "」" "『" "』"
)
) !default;
$chinese-quote-set: "common" !default;
// 栏 Columns // 栏 Columns
// 分栏 // 分栏
$column-count-list: (1, 2, 3, 4) !default; $column-count-list: (1, 2, 3, 4) !default;

5
lib/modifiers/writing-mode.scss
View file

@ -18,5 +18,10 @@
h6 { h6 {
text-align: start; text-align: start;
} }
// 默认无论简繁都采用台湾规范，修改只需重新定义变量 `$chinese-quote-set` 即可。
q {
quotes: map-get(map-get($chinese-quote-presets, $chinese-quote-set), "vertical");
}
} }
} }

5467
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "heti", "name": "heti",
"version": "0.8.2", "version": "0.9.2",
"description": "赫蹏是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。", "description": "赫蹏是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。",
"main": "lib/heti.scss", "main": "lib/heti.scss",
"files": [ "files": [
@ -46,7 +46,7 @@
"stylelint": "^13.13.1", "stylelint": "^13.13.1",
"stylelint-config-recommended-scss": "^4.3.0", "stylelint-config-recommended-scss": "^4.3.0",
"stylelint-config-standard": "^22.0.0", "stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.20.1" "stylelint-scss": "^3.21.0"
}, },
"stylelint": { "stylelint": {
"extends": [ "extends": [