diff --git a/_site/heti.debug.css b/_site/heti.debug.css index 7a6d9cc..0979902 100644 --- a/_site/heti.debug.css +++ b/_site/heti.debug.css @@ -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 diff --git a/_site/index.html b/_site/index.html index c6e9271..c1f5918 100644 --- a/_site/index.html +++ b/_site/index.html @@ -51,12 +51,20 @@ @@ -67,6 +75,7 @@

使用方法#

赫蹏的源文件可在项目仓库（https://github.com/sivan/heti）下载，生产文件位于dist文件夹。使用方法如下：

    +
  1. 下载项目（https://github.com/sivan/heti），将dist文件夹下文件拷出待用；
  2. 在页面的</head>标签前中引入heti.css样式文件： 
    <link rel="stylesheet" href="./heti.css">
    @@ -79,13 +88,30 @@ …… </article>
    3. +<<<<<<< HEAD
  3. 注意：赫蹏是正文区域的样式增强，不是normalize.css或CSS Reset的替代。因此不建议将它作用在根标签（如<body>或<div class="container">）上，除非像本页面一样通篇都是文章的一部分。
    4. +======= +
  4. + * 如需中西文混排美化，还要在页面的</body>标签前引入JavaScript脚本： + 
    <script src="./heti-addon.min.js"></script>
+<script>
+  const heti = new Heti();
+  heti.autoSpacing();
+</script>
    +
    5. +
  5. 大功告成，查看效果吧~
    6. +>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
+

注：赫蹏是正文区域的样式增强，不是normalize.css或CSS Reset的替代。因此不建议将它作用在根标签（如<body>或<div class="container">）上，除非像本页面一样通篇都是文章的一部分。

效果示例#

+<<<<<<< HEAD

本页面全页应用了赫蹏样式，所见即所得。下面是内置的多种排版效果演示。

+======= +

本页面全页应用了赫蹏样式，所见即所得。下面是内置的多种排版效果演示。

+>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
示例1：古文
@@ -164,8 +190,13 @@

赫蹏预置了多种多栏布局类，可以按栏数或每栏行宽进行设置。

查看使用说明 +<<<<<<< HEAD

为容器元素添加名为heti--columns-2的class即可实现双栏排版。

<div class="heti heti--columns-2">...</div>
+======= +

为容器元素添加名为heti--columns-2的class即可实现三栏排版。

+ 
<div class="heti heti--columns-2"></div>
+>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2 @@ -209,8 +240,13 @@

赫蹏预置了传统的竖排（直排）方向排版，同样贴合栅格。

查看使用说明 +<<<<<<< HEAD

为容器元素添加名为heti--vertical的class即可实现竖排布局。

<div class="heti heti--vertical">...</div>
+======= +

为容器元素添加名为heti--vertical的class即可实现垂直布局：

+ 
<div class="heti heti--vertical"></div>
+>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
@@ -232,12 +268,22 @@

设计原则#

+<<<<<<< HEAD

赫蹏项目的初衷很简单：它不作为一个CSS Reset出现，而是根据通行的中文排版规范，对网页正文区域进行排版样式增强。在部分CSS特性尚未有浏览器支持前，可通过JavaScript实现部分补充（非必要）。

核心

美化中文方块字排版，作用范围是网页中的文章区域（含标题、正文、元信息等），不包含网页导航、表单、侧边栏等区域（它们也不需要这套格式排版）。

使用heti.css时建议搭配良好的中文书写习惯，即：使用正确的HTML标签（可参考后面的标签示例表）、正确的引号、中文全角标点等。使用Markdown书写文章将助你一臂之力。

文字

参考《中文排版需求[2]》中描述的常用书籍排版字体，赫蹏提供了黑体、宋体和传统三种字体风格，前两者分别对应无衬线、衬线字体族。文字默认采用16px作为标准字号。在标题等文字较大的情况下，会适当地增加字间距以便获得更好地可读性。

+======= +

核心

+

以美化中文方块字排版为目标，假定作用范围是网页中的文章区域（含标题、正文、元信息等），不包含网页导航、表单、侧边栏等区域（它们也不需要这套格式排版）。

+

使用heti.css时建议搭配良好的中文书写习惯，即：使用正确的HTML标签、正确的引号、中文全角标点等。使用Markdown书写文章将助你一臂之力。

+

字号

+

heti.css 采用16px作为默认字号。在文字较大时（作用于标题等情况），会适当地增加字间距以便获得更好地可读性。

+

字体

+

参考《中文排版需求[2]》中描述的四种常见书籍排版字体：宋体、楷体、黑体、仿宋。赫蹏提供黑体、宋体和传统三种字体风格，前两者分别对应无衬线、衬线字体族。

+>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
查看字体风格对照表
@@ -361,7 +407,17 @@

标点

参考《中文排版需求》制定符号样式。唯一差异在于简体中文一律采用直角引号（「」）替代圆角引号（“”），这样可以保持字符等宽。

间距

+<<<<<<< HEAD

为保持页面元素总是贴合垂直栅格，块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。标题根据亲密性原则采用相反的边距设计。

+======= +

为保持页面元素总是贴合垂直栅格，大部分块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。

+

其它

+

赫蹏基于BEM[3]命名，并提供了一些 helper classes。详细内容看下表：

+
+ 查看辅助样式列表 +

待补充…

+
+>>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2