Merge branch 'feature/add-ons' of github.com:sivan/heti into feature/add-ons
This commit is contained in:
Sivan
commit
6d9b4a8fe7
2 changed files with 72 additions and 0 deletions
|
|
@ -772,6 +772,7 @@
|
|||
-webkit-text-emphasis: none;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD:_site/heti.debug.css
|
||||
.heti .heti-ruby--inline {
|
||||
display: inline-flex;
|
||||
flex-direction: column-reverse;
|
||||
|
|
@ -785,12 +786,25 @@
|
|||
|
||||
.heti heti-spacing {
|
||||
display: inline;
|
||||
=======
|
||||
.heti heti-spacing {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.heti heti-spacing.heti-spacing-start {
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
|
||||
.heti heti-spacing.heti-spacing-end {
|
||||
margin-inline-start: 0.25em;
|
||||
>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2:_site/heti.debug.css
|
||||
}
|
||||
|
||||
.heti heti-spacing + sup,
|
||||
.heti heti-spacing + sub {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
<<<<<<< HEAD:_site/heti.debug.css
|
||||
|
||||
.heti .heti-spacing-start {
|
||||
margin-inline-end: 0.25em;
|
||||
|
|
@ -799,3 +813,5 @@
|
|||
.heti .heti-spacing-end {
|
||||
margin-inline-start: 0.25em;
|
||||
}
|
||||
=======
|
||||
>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2:_site/heti.debug.css
|
||||
|
|
|
|||
|
|
@ -51,12 +51,20 @@
|
|||
<ul>
|
||||
<li>贴合网格的排版；</li>
|
||||
<li>全标签样式美化；</li>
|
||||
<<<<<<< HEAD
|
||||
<li>预置古文、诗词样式；</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>预置古文、诗词样式；</li>
|
||||
<li>多种预设字体族（仅限桌面端）；</li>
|
||||
<li>中西文混排美化（基于JavaScript脚本实现）；</li>
|
||||
<li>兼容<i>normalize.css</i>、<i>CSS Reset<sup><a href="#fn-01">[1]</a></sup></i>；</li>
|
||||
>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
|
||||
<li>移动端支持；</li>
|
||||
<li>……</li>
|
||||
</ul>
|
||||
|
|
@ -67,6 +75,7 @@
|
|||
<h2 id="usage">使用方法<a class="anchor" href="#usage">#</a></h2>
|
||||
<p>赫蹏的源文件可在项目仓库（<a href="https://github.com/sivan/heti">https://github.com/sivan/heti</a>）下载，生产文件位于<code>dist</code>文件夹。使用方法如下：</p>
|
||||
<ol>
|
||||
<li>下载项目（<a href="https://github.com/sivan/heti">https://github.com/sivan/heti</a>），将<code>dist</code>文件夹下文件拷出待用；</li>
|
||||
<li>
|
||||
在页面的<code></head></code>标签前中引入<code>heti.css</code>样式文件：
|
||||
<pre><code><link rel="stylesheet" href="./heti.css"></code></pre>
|
||||
|
|
@ -79,13 +88,30 @@
|
|||
……
|
||||
</article></code></pre>
|
||||
</li>
|
||||
<<<<<<< HEAD
|
||||
<li>注意：赫蹏是正文区域的样式增强，不是<i>normalize.css</i>或<i>CSS Reset</i>的替代。因此<b>不建议</b>将它作用在根标签（如<code><body></code>或<code><div class="container"></code>）上，除非像本页面一样通篇都是文章的一部分。</li>
|
||||
=======
|
||||
<li>
|
||||
* 如需中西文混排美化，还要在页面的<code></body></code>标签前引入JavaScript脚本：
|
||||
<pre><code><script src="./heti-addon.min.js"></script>
|
||||
<script>
|
||||
const heti = new Heti();
|
||||
heti.autoSpacing();
|
||||
</script></code></pre>
|
||||
</li>
|
||||
<li>大功告成，查看效果吧~</li>
|
||||
>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
|
||||
</ol>
|
||||
<p>注：赫蹏是正文区域的样式增强，不是<i>normalize.css</i>或<i>CSS Reset</i>的替代。因此<b>不建议</b>将它作用在根标签（如<code><body></code>或<code><div class="container"></code>）上，除非像本页面一样通篇都是文章的一部分。</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 id="examples">效果示例<a class="anchor" href="#examples">#</a></h2>
|
||||
<<<<<<< HEAD
|
||||
<p style="height: 1.5em;">本页面<em>全页</em>应用了赫蹏样式，所见即所得。下面是内置的多种排版效果演示。</p>
|
||||
=======
|
||||
<p>本页面<em>全页</em>应用了赫蹏样式，所见即所得。下面是内置的多种排版效果演示。</p>
|
||||
>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
|
||||
<details open>
|
||||
<summary id="example-1">示例1：古文</summary>
|
||||
<section class="demo">
|
||||
|
|
@ -164,8 +190,13 @@
|
|||
<p>赫蹏预置了多种多栏布局类，可以按栏数或每栏行宽进行设置。</p>
|
||||
<details>
|
||||
<summary>查看使用说明</summary>
|
||||
<<<<<<< HEAD
|
||||
<p>为容器元素添加名为<code>heti--columns-2</code>的class即可实现双栏排版。</p>
|
||||
<pre><code><div class="heti heti--columns-2">...</div></code></pre>
|
||||
=======
|
||||
<p>为容器元素添加名为<code>heti--columns-2</code>的class即可实现三栏排版。</p>
|
||||
<pre><code><div class="heti heti--columns-2"></div></code></pre>
|
||||
>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -209,8 +240,13 @@
|
|||
<p>赫蹏预置了传统的竖排（直排）方向排版，同样贴合栅格。</p>
|
||||
<details>
|
||||
<summary>查看使用说明</summary>
|
||||
<<<<<<< HEAD
|
||||
<p>为容器元素添加名为<code>heti--vertical</code>的class即可实现竖排布局。</p>
|
||||
<pre><code><div class="heti heti--vertical">...</div></code></pre>
|
||||
=======
|
||||
<p>为容器元素添加名为<code>heti--vertical</code>的class即可实现垂直布局：</p>
|
||||
<pre><code><div class="heti heti--vertical"></div></code></pre>
|
||||
>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
|
||||
</details>
|
||||
<figure class="card card--vertical">
|
||||
<div class="card__vertical-container">
|
||||
|
|
@ -232,12 +268,22 @@
|
|||
<hr>
|
||||
|
||||
<h2 id="guidelines">设计原则<a class="anchor" href="#guidelines">#</a></h2>
|
||||
<<<<<<< HEAD
|
||||
<p>赫蹏项目的初衷很简单：它不作为一个CSS Reset出现，而是根据通行的中文排版规范，对网页正文区域进行排版样式增强。在部分CSS特性尚未有浏览器支持前，可通过JavaScript实现部分补充（非必要）。</p>
|
||||
<h3>核心</h3>
|
||||
<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>
|
||||
=======
|
||||
<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">[2]</a></sup>》中描述的四种常见书籍排版字体：宋体、楷体、黑体、仿宋。赫蹏提供黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。</p>
|
||||
>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
|
||||
<details>
|
||||
<summary>查看字体风格对照表</summary>
|
||||
<section class="section">
|
||||
|
|
@ -361,7 +407,17 @@
|
|||
<h3>标点</h3>
|
||||
<p>参考《中文排版需求》制定符号样式。唯一差异在于简体中文一律采用直角引号（「」）替代圆角引号（“”），这样可以保持字符等宽。</p>
|
||||
<h3>间距</h3>
|
||||
<<<<<<< HEAD
|
||||
<p>为保持页面元素总是贴合垂直栅格，块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。标题根据亲密性原则采用相反的边距设计。</p>
|
||||
=======
|
||||
<p>为保持页面元素总是贴合垂直栅格，大部分块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。</p>
|
||||
<h3>其它</h3>
|
||||
<p>赫蹏基于BEM<sup><a href="#fn-02">[3]</a></sup>命名，并提供了一些 helper classes。详细内容看下表：</p>
|
||||
<details>
|
||||
<summary>查看辅助样式列表</summary>
|
||||
<p><i>待补充…</i></p>
|
||||
</details>
|
||||
>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
|
||||
|
||||
<hr>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue