feat: add demo page
This commit is contained in:
Sivan
parent
d24deae404
commit
6cbbbbfd9b
12 changed files with 1223 additions and 7 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -3,7 +3,6 @@
|
||||||
.settings/
|
.settings/
|
||||||
|
|
||||||
# Dev dependencies and cache files
|
# Dev dependencies and cache files
|
||||||
dist/
|
|
||||||
node_modules/
|
node_modules/
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
|
|
||||||
1. 在页面的 `<head>` 标签中引入 `heti.css` 文件：
|
1. 在页面的 `<head>` 标签中引入 `heti.css` 文件：
|
||||||
```
|
```
|
||||||
<link rel="stylesheet" href="./heti.css">
|
<link rel="stylesheet" href="./dist/heti.min.css">
|
||||||
```
|
```
|
||||||
1. 在要作用的容器元素上增加 `class="heti"` 的类名即可：。
|
1. 在要作用的容器元素上增加 `class="heti"` 的类名即可：。
|
||||||
```
|
```
|
||||||
|
|
|
||||||
BIN
demo/favicon.png
Normal file
BIN
demo/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
16
demo/favicon.svg
Normal file
16
demo/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.3 KiB |
5
demo/heti.min.css
vendored
Normal file
5
demo/heti.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
316
demo/index.css
Normal file
316
demo/index.css
Normal file
|
|
@ -0,0 +1,316 @@
|
||||||
|
/**
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** 测试用代码段 开始 **/
|
||||||
|
|
||||||
|
/* 简单模拟 css reset */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 模拟不知道哪里流传出来的垃圾代码 */
|
||||||
|
ul,
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 测试用代码段 结束 **/
|
||||||
|
|
||||||
|
/** 基础样式 **/
|
||||||
|
body {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #4285f4;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-block-start: 12px;
|
||||||
|
padding-block-end: 12px;
|
||||||
|
padding-inline-start: 12px;
|
||||||
|
padding-inline-end: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 首页样式 **/
|
||||||
|
.article {
|
||||||
|
margin-inline-start: auto;
|
||||||
|
margin-inline-end: auto;
|
||||||
|
outline: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article[data-bg-grid="grid-24"] {
|
||||||
|
background-size: 100% 24px;
|
||||||
|
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #eee 1px, rgba(255, 255, 255, 0) 33px),
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0) 23px, #eee 1px);
|
||||||
|
outline-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article[data-bg-grid="grid-24"] .heti--vertical {
|
||||||
|
background-size: 24px 100%;
|
||||||
|
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 23px, #eee 1px);
|
||||||
|
outline: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article[data-bg-grid="grid-12"] {
|
||||||
|
background-size: 100% 12px;
|
||||||
|
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #eee 1px, rgba(255, 255, 255, 0) 33px),
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0) 11px, #eee 12px);
|
||||||
|
outline-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article[data-bg-grid="grid-12"] .heti--vertical {
|
||||||
|
background-size: 12px 100%;
|
||||||
|
background-image: linear-gradient(to left, transparent 11px, #eee 1px);
|
||||||
|
outline: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anchor {
|
||||||
|
margin-inline-start: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 导航样式 **/
|
||||||
|
.article .article__toc ol {
|
||||||
|
margin-block-start: 24px;
|
||||||
|
margin-block-end: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 控制栏样式 **/
|
||||||
|
.panel {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2;
|
||||||
|
right: 12px;
|
||||||
|
top: 12px;
|
||||||
|
display: flex;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list {
|
||||||
|
display: inline-flex;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-inline-start: 12px;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list li {
|
||||||
|
margin-inline-end: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list label {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 24px;
|
||||||
|
padding: 0;
|
||||||
|
padding-inline-start: 10px;
|
||||||
|
padding-inline-end: 10px;
|
||||||
|
border: 1px solid #c2c2c2;
|
||||||
|
border-block-start-color: #c9c9c9;
|
||||||
|
border-block-end-color: #a6a6a6;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list label:active {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list li:first-child label {
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list li:last-child label {
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list input:checked + label {
|
||||||
|
z-index: 1;
|
||||||
|
border-color: #98989e;
|
||||||
|
border-block-start-color: #a5a5ab;
|
||||||
|
border-block-end-color: #7e7e84;
|
||||||
|
background-image: linear-gradient(to bottom, #b1b1b6, #929297);
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list input:checked + label:active {
|
||||||
|
border-color: #65656b;
|
||||||
|
border-block-start-color: #808086;
|
||||||
|
border-block-end-color: #414147;
|
||||||
|
background-image: linear-gradient(to bottom, #919196, #57575c);
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 演示卡片 **/
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
left: -12px;
|
||||||
|
width: 100%;
|
||||||
|
margin-block-start: 24px;
|
||||||
|
margin-block-end: 48px;
|
||||||
|
padding-block-start: 12px;
|
||||||
|
padding-block-end: 12px;
|
||||||
|
padding-inline-start: 12px;
|
||||||
|
padding-inline-end: 12px;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article .card {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article .card > figcaption {
|
||||||
|
display: inline-block;
|
||||||
|
margin-block-start: 16px;
|
||||||
|
padding-block-start: 4px;
|
||||||
|
padding-block-end: 3px;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
padding-inline-end: 72px;
|
||||||
|
line-height: 24px;
|
||||||
|
border-block-start: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__vertical-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 30em;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
overflow: auto;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 演示区块 **/
|
||||||
|
.demo {
|
||||||
|
margin-block-start: 24px;
|
||||||
|
margin-block-end: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 85vh;
|
||||||
|
margin-block-start: 12px;
|
||||||
|
margin-block-end: 12px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 640px) {
|
||||||
|
body {
|
||||||
|
min-width: 900px;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 75%;
|
||||||
|
min-width: 720px;
|
||||||
|
max-width: 880px;
|
||||||
|
margin-block-start: 48px;
|
||||||
|
margin-block-end: 72px;
|
||||||
|
margin-inline-start: auto;
|
||||||
|
margin-inline-end: auto;
|
||||||
|
padding-block-start: 48px;
|
||||||
|
padding-block-end: 48px;
|
||||||
|
padding-inline-start: 48px;
|
||||||
|
padding-inline-end: 48px;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article h1,
|
||||||
|
.article h2,
|
||||||
|
.article h3,
|
||||||
|
.article h4,
|
||||||
|
.article h5,
|
||||||
|
.article h6 {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article h1:hover .anchor,
|
||||||
|
.article h2:hover .anchor,
|
||||||
|
.article h3:hover .anchor,
|
||||||
|
.article h4:hover .anchor,
|
||||||
|
.article h5:hover .anchor,
|
||||||
|
.article h6:hover .anchor {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article .anchor {
|
||||||
|
position: absolute;
|
||||||
|
left: -1em;
|
||||||
|
width: 1em;
|
||||||
|
margin-inline-start: 0;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: inherit;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article .anchor:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: -20%;
|
||||||
|
width: 140%;
|
||||||
|
padding-block-start: 24px;
|
||||||
|
padding-block-end: 24px;
|
||||||
|
padding-inline-start: 32px;
|
||||||
|
padding-inline-end: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
max-height: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 900px) {
|
||||||
|
.article__toc {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
float: right;
|
||||||
|
width: 192px;
|
||||||
|
margin-block-start: -1px;
|
||||||
|
margin-block-end: 12px;
|
||||||
|
margin-inline-start: 32px;
|
||||||
|
margin-inline-end: -16px;
|
||||||
|
padding-block-start: 12px;
|
||||||
|
padding-block-end: 12px;
|
||||||
|
padding-inline-start: 8px;
|
||||||
|
padding-inline-end: 8px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article .article__toc ol {
|
||||||
|
margin-block-start: 12px;
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
523
demo/index.html
Normal file
523
demo/index.html
Normal file
|
|
@ -0,0 +1,523 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-Hans">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>赫蹏 - 一个简约又简单的网页中文排版增强</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="./normalize.css">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<link rel="stylesheet" href="./heti.min.css">
|
||||||
|
<link rel="icon" href="./favicon.svg">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
<article class="article heti heti--classic">
|
||||||
|
<h1>赫蹏</h1>
|
||||||
|
<blockquote>古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后》：<q>武（籍武 ）发篋中，有裹药二枚，赫蹏书。</q><u>颜师古</u>注：<q><u>邓展</u>曰：<q>赫音兄弟鬩墙之鬩。</q><u>应劭</u>曰：<q>赫蹏，薄小纸也。</q></q><u>宋</u><u>赵彦卫</u> 《云麓漫钞》卷七：<q>《赵后传》所谓『赫蹏』者，注云<q>薄小纸</q>，然其寔亦縑帛。</q></blockquote>
|
||||||
|
|
||||||
|
<nav class="article__toc">
|
||||||
|
<details open>
|
||||||
|
<summary>目录</summary>
|
||||||
|
<ol>
|
||||||
|
<li><a href="#intro">介绍</a></li>
|
||||||
|
<li><a href="#usage">使用方法</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#examples">效果演示</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#example-1">示例1：古文</a></li>
|
||||||
|
<li><a href="#example-2">示例2：诗词</a></li>
|
||||||
|
<li><a href="#example-3">示例3：行间注</a></li>
|
||||||
|
<li><a href="#example-3">示例4：英文演示</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#columns">多栏排版</a></li>
|
||||||
|
<li><a href="#vertical">垂直排版</a></li>
|
||||||
|
<li><a href="#guidelines">排版原则</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#appendix">附录</a>
|
||||||
|
<ol class="heti-list-latin">
|
||||||
|
<li><a href="#compatibility">兼容性</a></li>
|
||||||
|
<li><a href="#tags">标签示例表</a></li>
|
||||||
|
<li><a href="#license">开源协议</a></li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li><a href="#wip">待开发功能</a></li>
|
||||||
|
</ol>
|
||||||
|
</details>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<h2 id="intro">介绍<a class="anchor" href="#intro">#</a></h2>
|
||||||
|
<p><dfn>赫蹏</dfn>（<code>hètí</code>）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。由于它不同于传统的网页样式重置，而是专注于<em>正文区域</em>的样式增强，因此可以很好的与常见的CSS样式重置方案共存。</p>
|
||||||
|
<ul>
|
||||||
|
<li>全标签样式统一；</li>
|
||||||
|
<li>贴合网格的排版；</li>
|
||||||
|
<li>预置多种预设字体族（仅限桌面端）；</li>
|
||||||
|
<li>预置横排、直排（竖排）样式；</li>
|
||||||
|
<li>预置古文、诗词样式；</li>
|
||||||
|
<li>预置行间注排版样式；</li>
|
||||||
|
<li>预置多栏排版样式；</li>
|
||||||
|
<li>兼容<i>normalize.css</i>、<i>CSS Reset</i><sup><a href="#fn-01">[1]</a></sup>；</li>
|
||||||
|
<li>移动端支持；</li>
|
||||||
|
<li>基于BEM<sup><a href="#fn-02">[2]</a></sup>命名；</li>
|
||||||
|
<li>……</li>
|
||||||
|
</ul>
|
||||||
|
<p>总之，用上就会变好看。</p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2 id="usage">使用方法<a class="anchor" href="#usage">#</a></h2>
|
||||||
|
<p>赫蹏的使用方法很简单，只需要引入样式文件并设定作用范围即可：</p>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
在页面的<code><head></code>标签中引入<code>heti.css</code>文件：
|
||||||
|
<pre><code><link rel="stylesheet" href="./heti.css"></code></pre>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
在要作用的容器元素上增加<code>class="heti"</code>的类名即可：
|
||||||
|
<pre><code><article class="entry heti">
|
||||||
|
<h1>我的世界观</h1>
|
||||||
|
<p>有钱人的生活就是这么朴实无华，且枯燥</p>
|
||||||
|
……
|
||||||
|
</article></code></pre>
|
||||||
|
</li>
|
||||||
|
<li>不建议将样式作用在根标签（比如<code><body></code>或<code><div class="container"></code>）上，除非你的页面<u title="就像本页面一样">通篇都是文章的一部分</u>。</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2 id="examples">效果示例<a class="anchor" href="#examples">#</a></h2>
|
||||||
|
<p>本站已<em>全页</em>应用了赫蹏样式，下面是赫蹏在特殊排版下的效果演示。</p>
|
||||||
|
<details open>
|
||||||
|
<summary id="example-1">示例1：古文</summary>
|
||||||
|
<section class="demo">
|
||||||
|
<div class="heti heti--ancient">
|
||||||
|
<h1>出师表</h1>
|
||||||
|
<p class="heti-meta heti-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年～234年10月8日）</p>
|
||||||
|
<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
|
||||||
|
<p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理；不宜偏私，使内外异法也。</p>
|
||||||
|
<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下：愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
|
||||||
|
<p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p>
|
||||||
|
<p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p>
|
||||||
|
<p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p>
|
||||||
|
<p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p>
|
||||||
|
<p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。</p>
|
||||||
|
<p>今当远离，临表涕零，不知所言。</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details open>
|
||||||
|
<summary id="example-2">示例2：诗词</summary>
|
||||||
|
<section class="demo">
|
||||||
|
<div class="heti heti--ancient">
|
||||||
|
<h2>一剪梅·红藕香残玉簟秋<span class="heti-meta heti-small">[宋]<abbr title="号易安居士">李清照</abbr></span></h2>
|
||||||
|
<p class="heti-verse heti-x-large">
|
||||||
|
红藕香残玉簟秋。轻解罗裳，独上兰舟<span class="heti-hang">。</span><br>
|
||||||
|
云中谁寄锦书来，雁字回时，月满西楼<span class="heti-hang">。</span><br>
|
||||||
|
花自飘零水自流。一种相思，两处闲愁<span class="heti-hang">。</span><br>
|
||||||
|
此情无计可消除，才下眉头，却上心头<span class="heti-hang">。</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="heti heti--poetry">
|
||||||
|
<h2>丑奴儿·书博山道中壁<span class="heti-meta heti-small">[宋]<abbr title="号稼轩">辛弃疾</abbr></span></h2>
|
||||||
|
<p class="heti-x-large">
|
||||||
|
少年不识愁滋味，爱上层楼<span class="heti-hang">。</span><br>
|
||||||
|
爱上层楼，为赋新词强说愁<span class="heti-hang">。</span><br>
|
||||||
|
而今识尽愁滋味，欲说还休<span class="heti-hang">。</span><br>
|
||||||
|
欲说还休，却道天凉好个秋<span class="heti-hang">。</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details open>
|
||||||
|
<summary id="example-3">示例3：行间注</summary>
|
||||||
|
<section class="demo">
|
||||||
|
<div class="heti heti--ancient heti--annotation">
|
||||||
|
<h2>庖丁解牛</h2>
|
||||||
|
<p class="heti-meta heti-small">作者：<abbr title="庄子">庄周</abbr>（公元前369～公元前286年）</p>
|
||||||
|
<p>吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑。缘督以为经，可以保身，可以全生，可以养亲，可以尽年。</p>
|
||||||
|
<p><u title="名丁的厨工。先秦古书往往以职业放在人名前"><ruby><rb>庖</rb><rp>(</rp><rt>páo</rt><rp>)</rp></ruby>丁</u>为文惠君解牛，手之所触，肩之所倚，足之所履，膝之所<u title="支撑，接触"><ruby><rb>踦</rb><rp>(</rp><rt>yǐ</rt><rp>)</rp></ruby></u>，<u title="砉然：砉，又读xū，象声词。砉然，皮骨相离的声音"><ruby><rb>砉</rb><rp>(</rp><rt>huā</rt><rp>)</rp></ruby>然</u><ruby><rb>向</rb><rp>(</rp><rt>xiǎng</rt><rp>)</rp></ruby>然，奏刀<u title="騞然：象声词，形容比砉然更大的进刀解牛声"><ruby><rb>騞</rb><rp>(</rp><rt>huō</rt><rp>)</rp></ruby>然</u>，莫不中音。合于《桑林》之舞，乃中《经首》之会。</p>
|
||||||
|
<p>文惠君曰：「嘻，善哉！技<u title="通「盍」，何，怎样"><ruby><rb>盖</rb><rp>(</rp><rt>hé</rt><rp>)</rp></ruby></u>至此乎？」</p>
|
||||||
|
<p>庖丁释刀对曰：「臣之所好者，道也，进乎技矣。始臣之解牛之时，所见无非牛者。三年之后，未尝见全牛也。方今之时，臣以神遇而不以目视，官知止而<u title="指精神活动">神欲</u>行。依乎<u title="指牛的生理上的天然结构">天理</u>，<u title="击入大的缝隙">批大<ruby><rb>郤</rb><rp>(</rp><rt>xì</rt><rp>)</rp></ruby></u>，<u title="顺着（骨节间的）空处进刀">导大<ruby><rb>窾</rb><rp>(</rp><rt>kuǎn</rt><rp>)</rp></ruby></u>，<u title="依">因</u>其<u title="指牛体本来的结构">固然</u>，技经肯<ruby><rb>綮</rb><rp>(</rp><rt>qìng</rt><rp>)</rp></ruby>之未尝，而况大<ruby><rb>軱</rb><rp>(</rp><rt>gū</rt><rp>)</rp></ruby>乎！良庖岁更刀，割也；族庖月更刀，折也。今臣之刀十九年矣，所解数千牛矣，而刀刃若新发于<ruby><rb>硎</rb><rp>(</rp><rt>xíng</rt><rp>)</rp></ruby>。彼节者有间，而刀刃者无厚；以无厚入有间，恢恢乎其于<em>游刃必有余地</em>矣，是以十九年而刀刃若新发于硎。虽然，每至于族，吾见其难为，<ruby><rb>怵</rb><rp>(</rp><rt>chù</rt><rp>)</rp></ruby>然为戒，视为止，行为迟。动刀甚微，<ruby><rb>謋</rb><rp>(</rp><rt>huò</rt><rp>)</rp></ruby>然已解，如土委地。提刀而立，为之四顾，为之<ruby><rb>踌</rb><rp>(</rp><rt>chóu</rt><rp>)</rp><rb>躇</rb><rp>(</rp><rt>chú</rt><rp>)</rp></ruby>满志，善刀而藏之。」</p>
|
||||||
|
<p>文惠君曰：「善哉！吾闻庖丁之言，得养生焉。」</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary id="example-4">示例4：英文演示</summary>
|
||||||
|
<section class="demo">
|
||||||
|
<div class="heti" 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>
|
||||||
|
<details>
|
||||||
|
<summary>查看使用说明</summary>
|
||||||
|
<p>为容器元素添加名为<code>heti--columns-2</code>class即可实现三栏排版。</p>
|
||||||
|
<pre><code><div class="heti heti--columns-2"></div></code></pre>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 60px;">方式</th>
|
||||||
|
<th style="width: 160px;">对应类名</th>
|
||||||
|
<th style="width: 280px;">可选数值</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>按数量</td>
|
||||||
|
<td><code>heti--columns-3</code></td>
|
||||||
|
<td>2, 3, 4</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>按宽度</td>
|
||||||
|
<td><code>heti--columns-16em</code></td>
|
||||||
|
<td>16em, 20em, 24em, … +4em, … , 48em</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</details>
|
||||||
|
<figure class="card card--multi-column">
|
||||||
|
<section class="heti heti--columns-2">
|
||||||
|
<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
|
||||||
|
<p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理；不宜偏私，使内外异法也。</p>
|
||||||
|
<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下：愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
|
||||||
|
<p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p>
|
||||||
|
<p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p>
|
||||||
|
<p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p>
|
||||||
|
<p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p>
|
||||||
|
<p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。</p>
|
||||||
|
<p>今当远离，临表涕零，不知所言。</p>
|
||||||
|
</section>
|
||||||
|
<figcaption>多栏排版演示</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2 id="vertical">垂直排版<a class="anchor" href="#vertical">#</a></h2>
|
||||||
|
<p>赫蹏预置了传统的垂直方向排版，同样贴合栅格。</p>
|
||||||
|
<details>
|
||||||
|
<summary>查看使用说明</summary>
|
||||||
|
<p>为容器元素添加名为<code>heti--vertical</code>class即可实现垂直布局：</p>
|
||||||
|
<pre><code><div class="heti heti--vertical"></div></code></pre>
|
||||||
|
</details>
|
||||||
|
<figure class="card card--vertical">
|
||||||
|
<div class="card__vertical-container">
|
||||||
|
<section class="heti heti--vertical heti--ancient">
|
||||||
|
<h1>出師表</h1>
|
||||||
|
<p class="heti-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年－234年10月8日）</p>
|
||||||
|
<p>先帝創業未半，而中道崩殂；今天下三分，益州疲弊，此誠危急存亡之秋也﹗然侍衞之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。</p>
|
||||||
|
<p>誠宜開張聖聽，以光先帝遺德，恢弘志士之氣﹔不宜妄自菲薄，引喻失義，以塞忠諫之路也。</p>
|
||||||
|
<p>宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作姦、犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。</p>
|
||||||
|
<p>侍中、侍郎郭攸之、費禕、董允等，此皆良實，志慮忠純，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以咨之，然後施行，必能裨補闕漏，有所廣益。將軍向寵，性行淑均，曉暢軍事，試用於昔日，先 帝稱之曰「能」，是以眾議舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優劣得所。</p>
|
||||||
|
<p>親賢臣，遠小人，此先漢所以興隆也﹔親小人，遠賢臣，此後漢所以傾頹也。先帝在時，每與臣論此事，未嘗不歎息痛恨於桓、靈也！侍中、尚書、長史、參軍，此悉貞良死節之臣，願陛下親之、信之，則漢室之隆，可計日而待也。</p>
|
||||||
|
<p>臣本布衣，躬耕於南陽，苟全性命於亂世，不求聞達於諸侯。先帝不以臣卑鄙，猥自枉屈，三顧臣於草廬之中，諮臣以當世之事；由是感激，遂許先帝以驅馳。後值傾覆，受任於敗軍之際，奉命於危難之間，爾來二十有一年矣。先帝知臣謹慎，故臨崩寄臣以大事也。受命以來，夙夜憂歎，恐託付不效，以傷先帝之明。故五月渡瀘，深入不毛。今南方已定，兵甲已足，當獎率三軍，北定中原，庶竭駑鈍，攘除姦凶，興復漢室，還於舊都。此臣所以報先帝而忠陛下之職分也。至於斟酌損益，進盡忠言，則攸之、禕、允之任也。</p>
|
||||||
|
<p>願陛下託臣以討賊興復之效；不效，則治臣之罪，以告先帝之靈。若無興德之言，則責攸之、禕、允等之慢，以彰其咎。陛下亦宜自謀，以諮諏善道，察納雅言，深追先帝遺詔。臣不勝受恩感激。今當遠離，臨表涕零，不知所言！</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<figcaption>垂直排版演示</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2 id="guidelines">排版原则<a class="anchor" href="#guidelines">#</a></h2>
|
||||||
|
<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">[3]</a></sup>》中描述的四种常见书籍排版字体：宋体、楷体、黑体、仿宋。赫蹏提供黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。</p>
|
||||||
|
<details>
|
||||||
|
<summary>查看对照表</summary>
|
||||||
|
<section class="section">
|
||||||
|
<table>
|
||||||
|
<caption>各字体族下不同标签对应的字体</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td style="width: 60px;"></td>
|
||||||
|
<th style="width: 60px;">黑体</th>
|
||||||
|
<th style="width: 60px;">宋体</th>
|
||||||
|
<th style="width: 60px;">传统</th>
|
||||||
|
<th style="width: 380px;">备注</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>标题</th>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>宋体（粗）</td>
|
||||||
|
<td>楷体</td>
|
||||||
|
<td>
|
||||||
|
<section>
|
||||||
|
<h1>记忆中的站台</h1>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>正文</th>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>宋体</td>
|
||||||
|
<td>宋体</td>
|
||||||
|
<td>
|
||||||
|
<section>
|
||||||
|
<p>那是一个风雨交加的夜晚。</p>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>引用</th>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>宋体</td>
|
||||||
|
<td>楷体</td>
|
||||||
|
<td>
|
||||||
|
<section>
|
||||||
|
<blockquote>锣鼓喧天，鞭炮齐鸣，红旗招展，人山人海。</blockquote>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>强调</th>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>宋体</td>
|
||||||
|
<td>宋体</td>
|
||||||
|
<td>
|
||||||
|
<section>
|
||||||
|
<p>父亲<em>特意</em>嘱咐了我两句。</p>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>对话</th>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>宋体</td>
|
||||||
|
<td>楷体</td>
|
||||||
|
<td>
|
||||||
|
<section>
|
||||||
|
<p>他说：<q>我买几个橘子去。你就在此地，不要走动。</q></p>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>图例</th>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>宋体</td>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>
|
||||||
|
<section>
|
||||||
|
<figure>
|
||||||
|
<img src="./orange.jpg" alt="" style="width: 200px;">
|
||||||
|
<figcaption>橘子</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>表头</th>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>宋体</td>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>
|
||||||
|
<section>
|
||||||
|
<table>
|
||||||
|
<caption>当时的情形</caption>
|
||||||
|
<tr>
|
||||||
|
<th>角色</th>
|
||||||
|
<th>物品</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>父亲</td>
|
||||||
|
<td>橘子</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>我</td>
|
||||||
|
<td>车票</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>角标</th>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>黑体</td>
|
||||||
|
<td>鲁迅<sup>[1]</sup>曾经没有说过</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</details>
|
||||||
|
<h3>标点</h3>
|
||||||
|
<p>参考《中文排版需求》制定符号样式。唯一差异在于简体中文一律采用直角引号（「」）替代圆角引号（“”），这样可以保持字符等宽。</p>
|
||||||
|
<h3>间距</h3>
|
||||||
|
<p>为保持页面元素总是贴合垂直栅格，大部分块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。</p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2 id="appendix">附录<a class="anchor" href="#appendix">#</a></h2>
|
||||||
|
<h3 id="compatibility">兼容性<a class="anchor" href="#compatibility">#</a></h3>
|
||||||
|
<p>赫蹏在间距、边框、位置属性上采用了Logical properties，在所有现代浏览器上表现良好。</p>
|
||||||
|
<details>
|
||||||
|
<summary>查看兼容性列表</summary>
|
||||||
|
<section class="section">
|
||||||
|
<table>
|
||||||
|
<caption>兼容性列表（未经充分测试）</caption>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<th>Chrome</th>
|
||||||
|
<th>Safari</th>
|
||||||
|
<th>Firefox</th>
|
||||||
|
<th>IE</th>
|
||||||
|
<th>Edge</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>兼容性</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>3.1</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>暂未支持</td>
|
||||||
|
<td>79</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<h3 id="tags">标签示例表<a class="anchor" href="#tags">#</a></h3>
|
||||||
|
<details open>
|
||||||
|
<summary>查看标签示例表</summary>
|
||||||
|
<section class="section">
|
||||||
|
<table>
|
||||||
|
<caption>常用标签样式示例表</caption>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 80px;">类型</th>
|
||||||
|
<th style="width: 320px;">标签</th>
|
||||||
|
<th style="width: 240px;">效果</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>链接</td>
|
||||||
|
<td><code><a href="https://github.com/sivan/heti" title="赫蹏" target="_blank">heti.css</a></code></td>
|
||||||
|
<td><a href="https://github.com/sivan/heti" title="赫蹏" target="_blank">heti.css</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>缩写</td>
|
||||||
|
<td><code><abbr title="Cascading Style Sheets">CSS</abbr></code></td>
|
||||||
|
<td><abbr title="Cascading Style Sheets">CSS</abbr></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>代码</td>
|
||||||
|
<td><code><code>.heti { star: 5; }</code></code></td>
|
||||||
|
<td><code>.heti { star: 5; }</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>专名号</td>
|
||||||
|
<td><code>此时来自<u title="位于山东省聊城市阳谷县城东">景阳冈</u>的<u>武松</u>大喝一声：<q>纳命来！</q></code></td>
|
||||||
|
<td>此时来自<u title="位于山东省聊城市阳谷县城东">景阳冈</u>的<u>武松</u>大喝一声：<q>纳命来！</q></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>文本变动</td>
|
||||||
|
<td><code>这次考试，我考了<del datetime="17:00:00">97</del><ins datetime="18:15:00">100</ins>分呢！</code></td>
|
||||||
|
<td>这次考试，我考了<del datetime="17:00:00">97</del><ins datetime="18:15:00">100</ins>分呢！</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>文本更新</td>
|
||||||
|
<td><code>因为谁也不认识，所以最后我们决定念<s>dí</s> tí。</code></td>
|
||||||
|
<td>因为谁也不认识，所以最后我们决定念<s>dí</s>tí。</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>引号</td>
|
||||||
|
<td><code>窃·格瓦拉曾经说过：<q>打工是不可能打工的。</q></code></td>
|
||||||
|
<td>窃·格瓦拉曾经说过：<q>打工是不可能打工的。</q></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>术语</td>
|
||||||
|
<td><code><dfn>窃·格瓦拉</dfn>，中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。</code></td>
|
||||||
|
<td><dfn>窃·格瓦拉</dfn>，中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>强调</td>
|
||||||
|
<td><code>稳住，<em>我们能赢</em>！</code></td>
|
||||||
|
<td>稳住，<em>我们能赢</em>！</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>着重号</td>
|
||||||
|
<td><code>我们<span class="heti-em">必将</span>战胜这场疫情。</code></td>
|
||||||
|
<td>我们<span class="heti-em">必将</span>战胜这场疫情。</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>标记</td>
|
||||||
|
<td><code>这道题<mark>必考</mark>，你们爱记不记。</code></td>
|
||||||
|
<td>这道题<mark>必考</mark>，你们爱记不记。</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<h3 id="license">开源协议<a class="anchor" href="#tags">#</a></h3>
|
||||||
|
<p>「赫蹏」遵循MIT协议开源。</p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2 id="wip">待开发功能<a class="anchor" href="#wip">#</a></h2>
|
||||||
|
<ul>
|
||||||
|
<li>️☑ 中、西文混排</li>
|
||||||
|
<li>☑ 标点挤压</li>
|
||||||
|
<li>☑ 标点悬挂</li>
|
||||||
|
<li>✅ 诗词版式</li>
|
||||||
|
<li>✅ 行间注版式</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<footer class="heti-fn">
|
||||||
|
<ol>
|
||||||
|
<li id="fn-01">CSS Reset：指代类似Eric Meyer's Reset CSS的样式重置方案</li>
|
||||||
|
<li id="fn-02">BEM：由Yandex公司创造的命名方ttps://en.bem.info/</li>
|
||||||
|
<li id="fn-03">《中文排版需求》：https://w3c.github.io/clreq/</li>
|
||||||
|
</ol>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<aside class="panel">
|
||||||
|
<ul class="switch-list">
|
||||||
|
<li><input type="radio" class="J_fontStack" value="heti--classic" name="font" id="font-classic" checked><label for="font-classic">传统</label></li>
|
||||||
|
<li><input type="radio" class="J_fontStack" value="heti--sans" name="font" id="font-sans"><label for="font-sans">黑体</label></li>
|
||||||
|
<li><input type="radio" class="J_fontStack" value="heti--serif" name="font" id="font-serif"><label for="font-serif">宋体</label></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="switch-list">
|
||||||
|
<li><input type="radio" class="J_radioGrid" value="" name="grid" id="grid-disable" checked><label for="grid-disable">网格：关</label></li>
|
||||||
|
<li><input type="radio" class="J_radioGrid" value="grid-24" name="grid" id="grid-24"><label for="grid-24">大</label></li>
|
||||||
|
<li><input type="radio" class="J_radioGrid" value="grid-12" name="grid" id="grid-12"><label for="grid-12">小</label></li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const $$root = document.getElementsByTagName('article')[0]
|
||||||
|
|
||||||
|
function addEventListeners(nodeList, event, fn) {
|
||||||
|
[].forEach.call(nodeList, function(elm) {
|
||||||
|
elm.addEventListener(event, fn, false)
|
||||||
|
}, false)
|
||||||
|
}
|
||||||
|
|
||||||
|
addEventListeners(document.getElementsByClassName('J_fontStack'), 'change', function (e) {
|
||||||
|
$$root.className = ['article', 'heti', e.target.value].join(' ')
|
||||||
|
})
|
||||||
|
|
||||||
|
addEventListeners(document.getElementsByClassName('J_radioGrid'), 'change', function (e) {
|
||||||
|
$$root.setAttribute('data-bg-grid', e.target.value)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
349
demo/normalize.css
vendored
Normal file
349
demo/normalize.css
vendored
Normal file
|
|
@ -0,0 +1,349 @@
|
||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the `main` element consistently in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10.
|
||||||
|
* 2. Remove the padding in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
BIN
demo/orange.jpg
Normal file
BIN
demo/orange.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
5
dist/heti.min.css
vendored
Normal file
5
dist/heti.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -2,7 +2,6 @@
|
||||||
* Project: Heti
|
* Project: Heti
|
||||||
* URL: https://github.com/sivan/heti
|
* URL: https://github.com/sivan/heti
|
||||||
* Author: Sivan [sun.sivan@gmail.com]
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
* Date: 2020-01-22 00:00
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "font";
|
@import "font";
|
||||||
|
|
|
||||||
12
package.json
12
package.json
|
|
@ -7,9 +7,9 @@
|
||||||
"lib": "lib"
|
"lib": "lib"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "node-sass -w --output-style=compressed index.scss dist/heti.css",
|
"start": "node-sass -w --output-style=compressed lib/heti.scss demo/heti.min.css",
|
||||||
"build": "node-sass index.scss dist/heti.css --output-style=compressed",
|
"build": "node-sass lib/heti.scss dist/heti.min.css --output-style=compressed",
|
||||||
"deploy": "gh-pages -d dist",
|
"deploy": "npm run build && gh-pages -d demo",
|
||||||
"test": "npx stylelint --config .stylelintrc 'lib/**/*.scss'"
|
"test": "npx stylelint --config .stylelintrc 'lib/**/*.scss'"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|
@ -17,7 +17,11 @@
|
||||||
"url": "git+https://github.com/sivan/heti.git"
|
"url": "git+https://github.com/sivan/heti.git"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"typography"
|
"typography",
|
||||||
|
"clreq",
|
||||||
|
"css",
|
||||||
|
"sass",
|
||||||
|
"scss"
|
||||||
],
|
],
|
||||||
"author": "Sivan <sun.sivan@gmail.com>",
|
"author": "Sivan <sun.sivan@gmail.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue