From 17f9586f3c3b5ebaa6aa303c9c72cbdfdbd42b83 Mon Sep 17 00:00:00 2001 From: Sivan Date: Wed, 12 Feb 2020 12:33:20 +0800 Subject: [PATCH] Updates --- heti.css | 631 ++++++++++++++++++++++++++++++++++++++++++++++++++++- index.css | 62 ++++-- index.html | 156 ++++++++----- 3 files changed, 771 insertions(+), 78 deletions(-) diff --git a/heti.css b/heti.css index 5ec3b5e..4ccf79c 100644 --- a/heti.css +++ b/heti.css @@ -1,6 +1,627 @@ -/*! - * Project: Heti - * URL: https://github.com/sivan/heti +@charset "UTF-8"; +/** * Author: Sivan [sun.sivan@gmail.com] - * Date: 2020-01-22 00:00 - */.heti{max-width:42em;font-size:16px;font-weight:400;line-height:1.5}.heti::before,.heti::after{content:"";display:table}.heti::after{clear:both}.heti>*:first-child,.heti section>*:first-child,.heti td>*:first-child{margin-block-start:0 !important}.heti>*:last-child,.heti section>*:last-child,.heti td>*:last-child{margin-block-end:0 !important}.heti blockquote{margin-block-start:12px;margin-block-end:24px;margin-inline-start:32px;margin-inline-end:32px;padding-block-start:12px;padding-block-end:12px;padding-inline-start:16px;padding-inline-end:16px;background-color:rgba(0,0,0,0.054)}.heti figure{display:block;text-align:center}.heti figure>img{display:block;margin-inline-start:auto;margin-inline-end:auto}.heti hr{width:30%;height:1px;margin-block-start:48px;margin-block-end:47px;margin-inline-start:auto;margin-inline-end:auto;border:0;background-color:#ddd}.heti p{margin-block-start:12px;margin-block-end:24px;text-align:justify}.heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),.heti p:not(:lang(zh)){text-align:left}.heti pre{margin-block-start:12px;margin-block-end:12px;margin-inline-start:0;margin-inline-end:0;padding-block-start:12px;padding-block-end:12px;padding-inline-start:16px;padding-inline-end:16px;overflow:auto;white-space:pre;word-wrap:normal;background-color:rgba(0,0,0,0.054);border-radius:4px}.heti h1,.heti h2,.heti h3,.heti h4,.heti h5,.heti h6{position:relative;margin-block-start:24px;margin-block-end:12px;font-weight:600}.heti h1{margin-block-end:24px;font-size:32px;line-height:48px;letter-spacing:1.6px}.heti h2{font-size:24px;line-height:36px;letter-spacing:1.2px}.heti h3{font-size:20px;line-height:36px;letter-spacing:1px}.heti h4{font-size:18px;line-height:24px}.heti h5{font-size:16px;line-height:24px}.heti h6{font-size:14px;line-height:24px}.heti h1+h2,.heti h2+h3,.heti h3+h4,.heti h4+h5,.heti h5+h6{margin-block-start:12px}.heti ul,.heti ol,.heti dl{margin-block-start:12px;margin-block-end:24px}.heti ul,.heti ol{padding-inline-start:2em}.heti ul ul,.heti ul ol,.heti ol ul,.heti ol ol{margin-block-start:0;margin-block-end:0}.heti ul{list-style-type:disc}.heti ol{list-style-type:decimal}.heti ul ul,.heti ol ul{list-style-type:circle}.heti ul ul ul,.heti ul ol ul,.heti ol ul ul,.heti ol ol ul{list-style-type:square}.heti li{list-style-type:unset}.heti table{box-sizing:border-box;table-layout:fixed;border-collapse:collapse;border:1px solid #ccc;margin-block-start:12px;margin-block-end:24px;margin-inline-start:auto;margin-inline-end:auto}.heti th,.heti td{border:1px solid #ccc;padding:8px 16px}.heti caption{caption-side:bottom;font-size:14px;line-height:24px}.heti a{text-decoration:none}.heti a:hover{padding-block-end:1px;border-block-end:1px solid currentColor;text-decoration:none}.heti abbr[title]{padding-block-end:1px;border-block-end:1px dotted;text-decoration:none;cursor:help}.heti b,.heti strong{font-weight:600}.heti code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px}.heti dfn{font-weight:600}.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),.heti dfn:not(:lang(zh)){font-weight:400}.heti em{font-weight:600}.heti figcaption{display:inline-block;vertical-align:top;font-size:14px;text-align:start}.heti i{font-style:italic}.heti ins,.heti u{padding-block-end:1px;border-block-end:1px solid;text-decoration:none}.heti mark{padding-block-start:2px;padding-block-end:2px;padding-inline-start:1px;padding-inline-end:1px;margin-inline-start:1px;margin-inline-end:1px;background-color:rgba(255,247,0,0.88)}.heti q{quotes:"「" "」" "『" "』"}.heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),.heti q:not(:lang(zh)){quotes:initial;quotes:auto}.heti rt{font-size:0.875em;color:rgba(0,0,0,0.88)}.heti small{font-size:0.875em}.heti strong{font-weight:600}.heti sub,.heti sup{position:relative;margin-inline-start:0.25em;margin-inline-end:0.25em;font-size:0.75em;line-height:1;vertical-align:baseline}.heti sub{bottom:-0.25em}.heti sup{top:-0.5em}.heti summary{padding-left:1em;outline:0;cursor:pointer}.heti summary::-webkit-details-marker{width:0.6em;margin-inline-end:0.4em}.heti u[title]{cursor:help;border-block-end-color:rgba(0,0,0,0.54);border-block-end-width:3px;border-block-end-style:double}.heti address,.heti cite,.heti dfn,.heti dt,.heti em{font-style:normal}.heti address:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),.heti address:not(:lang(zh)),.heti cite:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),.heti cite:not(:lang(zh)),.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),.heti dfn:not(:lang(zh)),.heti dt:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),.heti dt:not(:lang(zh)),.heti em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),.heti em:not(:lang(zh)){font-style:italic}.heti-vertical{max-width:none;max-height:42em;writing-mode:vertical-rl;letter-spacing:0.125em}.heti-poetry,.heti-ancient{font-family:"Times New Roman",Times,"Noto Serif","Noto Serif CJK SC","Noto Serif CJK","Source Han Serif SC",‘Source Han Serif’,source-han-serif-sc,"Songti SC","Songti TC",STSong,SimSun,serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.heti-poetry h1,.heti-poetry h2,.heti-poetry h3,.heti-ancient h1,.heti-ancient h2,.heti-ancient h3{font-family:"Times New Roman",Times,"Noto Serif","Noto Serif CJK SC","Noto Serif CJK","Source Han Serif SC",‘Source Han Serif’,source-han-serif-sc,"Songti SC","Songti TC",STSong,SimSun,serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:800;text-align:center}.heti-poetry h1 .heti-meta,.heti-poetry h2 .heti-meta,.heti-poetry h3 .heti-meta,.heti-ancient h1 .heti-meta,.heti-ancient h2 .heti-meta,.heti-ancient h3 .heti-meta{display:block;font-weight:400}@media screen and (min-width: 640px){.heti-poetry h1 .heti-meta,.heti-poetry h2 .heti-meta,.heti-poetry h3 .heti-meta,.heti-ancient h1 .heti-meta,.heti-ancient h2 .heti-meta,.heti-ancient h3 .heti-meta{position:absolute;line-height:inherit;display:inline;margin-block-start:4px;margin-inline-start:8px}}.heti-poetry .heti-verse,.heti-ancient .heti-verse{text-align:center;text-indent:0}.heti-poetry p,.heti-ancient p{text-indent:2em}.heti-interlinear-annotation p{margin-block-start:0;margin-block-end:0;line-height:2.25;text-indent:2em}.heti-interlinear-annotation em{-webkit-text-emphasis:filled circle;-webkit-text-emphasis-position:under;font-weight:400}.heti-interlinear-annotation em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),.heti-interlinear-annotation em:not(:lang(zh)){-webkit-text-emphasis:none}.heti-sans{font-family:"Helvetica Neue",Helvetica,Arial,"Pingfang SC","Pingfang TC","Heiti SC","Heiti TC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.heti-serif{font-family:"Times New Roman",Times,"Noto Serif","Noto Serif CJK SC","Noto Serif CJK","Source Han Serif SC",‘Source Han Serif’,source-han-serif-sc,"Songti SC","Songti TC",STSong,SimSun,serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.heti-classic{font-family:"Times New Roman",Times,"Noto Serif","Noto Serif CJK SC","Noto Serif CJK","Source Han Serif SC",‘Source Han Serif’,source-han-serif-sc,"Songti SC","Songti TC",STSong,SimSun,serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.heti-classic h1,.heti-classic h2,.heti-classic h3,.heti-classic h4,.heti-classic h5,.heti-classic h6{font-weight:800}.heti-classic h1,.heti-classic h2,.heti-classic h3,.heti-classic h4,.heti-classic h5,.heti-classic h6,.heti-classic blockquote,.heti-classic cite,.heti-classic q{font-family:"Times New Roman",Times,"Kaiti SC",STKaiti,serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.heti-classic figcaption,.heti-classic caption,.heti-classic sup,.heti-classic sub,.heti-classic th{font-family:"Helvetica Neue",Helvetica,Arial,"Pingfang SC","Pingfang TC","Heiti SC","Heiti TC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.heti-x-large{font-size:20px;line-height:30px}.heti-large{font-size:18px;line-height:24px}.heti-small{font-size:14px;line-height:24px}.heti-x-small{font-size:12px;line-height:18px}.heti .heti-list-latin{list-style-type:upper-latin}.heti .heti-list-latin ol{list-style-type:lower-roman}.heti .heti-list-latin ol ol{list-style-type:lower-latin}.heti .heti-list-han{list-style-type:cjk-ideographic}.heti .heti-list-han ol{list-style-type:decimal}.heti .heti-list-han ol ol{list-style-type:decimal-leading-zero}.heti .heti-columns-2{max-width:none;column-count:2;column-gap:2em}.heti .heti-columns-3{max-width:none;column-count:3;column-gap:2em}.heti .heti-columns-4{max-width:none;column-count:4;column-gap:2em}.heti .heti-columns-16em{max-width:none;column-width:16em;column-gap:2em}.heti .heti-columns-20em{max-width:none;column-width:20em;column-gap:2em}.heti .heti-columns-24em{max-width:none;column-width:24em;column-gap:2em}.heti .heti-columns-28em{max-width:none;column-width:28em;column-gap:2em}.heti .heti-columns-32em{max-width:none;column-width:32em;column-gap:2em}.heti .heti-columns-36em{max-width:none;column-width:36em;column-gap:2em}.heti .heti-columns-40em{max-width:none;column-width:40em;column-gap:2em}.heti .heti-columns-44em{max-width:none;column-width:44em;column-gap:2em}.heti .heti-columns-48em{max-width:none;column-width:48em;column-gap:2em}.heti .heti-meta{line-height:24px;text-align:center;text-indent:0}.heti .heti-anchor{position:absolute;left:-1em;width:1em;font-family:"Helvetica Neue",Helvetica,Arial,"Pingfang SC","Pingfang TC","Heiti SC","Heiti TC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;line-height:inherit;text-align:center;opacity:0;transition:opacity 0.2s linear}.heti .heti-anchor:hover{text-decoration:none;border-block-end:0}.heti h1,.heti h2,.heti h3,.heti h4,.heti h5,.heti h6{position:relative}.heti h1:hover .heti-anchor,.heti h2:hover .heti-anchor,.heti h3:hover .heti-anchor,.heti h4:hover .heti-anchor,.heti h5:hover .heti-anchor,.heti h6:hover .heti-anchor{opacity:1}.heti .heti-hang{position:absolute;line-height:inherit} + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: base reset and entry styles. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: heading styles. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: list styles. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: table styles. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: inline element styles. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/* + * Author: Sivan [sun.sivan@gmail.com] + * Description: define global font stacks. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/* + * Author: Sivan [sun.sivan@gmail.com] + * Description: define writing mode styles. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/* + * Author: Sivan [sun.sivan@gmail.com] + * Description: define column styles. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/* + * Author: Sivan [sun.sivan@gmail.com] + * Description: define ancient styles. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/* + * Author: Sivan [sun.sivan@gmail.com] + * Description: define interlinear annotation styles. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/* + * Author: Sivan [sun.sivan@gmail.com] + * Description: define block helper classes. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +/* + * Author: Sivan [sun.sivan@gmail.com] + * Description: define inline helper classes. + */ +/** + * Author: Sivan [sun.sivan@gmail.com] + * Description: define variables, alias etc. + */ +/* 字体 Fonts */ +/* 行 Lines */ +/* 段落 Paragraphs */ +/* 栏 Columns */ +/* 开发用配置项 Develop Configs */ +/* 混合 Mix-ins */ +/* 函数 Functions */ +.heti { + max-width: 42em; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + /* 兼容性处理 */ + /* 段落相关 */ + /* 列表相关 */ } + .heti::before, .heti::after { + content: ""; + display: table; } + .heti::after { + clear: both; } + .heti > *:first-child, + .heti section > *:first-child, + .heti td > *:first-child { + margin-block-start: 0 !important; } + .heti > *:last-child, + .heti section > *:last-child, + .heti td > *:last-child { + margin-block-end: 0 !important; } + .heti blockquote { + margin-block-start: 12px; + margin-block-end: 24px; + margin-inline-start: 32px; + margin-inline-end: 32px; + padding-block-start: 12px; + padding-block-end: 12px; + padding-inline-start: 16px; + padding-inline-end: 16px; + background-color: rgba(0, 0, 0, 0.054); } + .heti figure { + display: block; + text-align: center; } + .heti figure > img { + display: block; + margin-inline-start: auto; + margin-inline-end: auto; } + .heti hr { + width: 30%; + height: 1px; + margin-block-start: 48px; + margin-block-end: 47px; + margin-inline-start: auto; + margin-inline-end: auto; + border: 0; + background-color: #ddd; } + .heti p { + margin-block-start: 12px; + margin-block-end: 24px; + text-align: justify; } + .heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti p:not(:lang(zh)) { + text-align: start; } + .heti pre { + margin-block-start: 12px; + margin-block-end: 12px; + margin-inline-start: 0; + margin-inline-end: 0; + padding-block-start: 12px; + padding-block-end: 12px; + padding-inline-start: 16px; + padding-inline-end: 16px; + overflow: auto; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + white-space: pre; + word-wrap: normal; + background-color: rgba(0, 0, 0, 0.054); + border-radius: 4px; } + .heti h1, + .heti h2, + .heti h3, + .heti h4, + .heti h5, + .heti h6 { + position: relative; + margin: 0; + margin-block-start: 24px; + margin-block-end: 12px; + font-weight: 600; } + .heti h1 { + margin-block-end: 24px; + font-size: 32px; + line-height: 48px; + letter-spacing: 1.6px; } + .heti h2 { + font-size: 24px; + line-height: 36px; + letter-spacing: 1.2px; } + .heti h3 { + font-size: 20px; + line-height: 36px; + letter-spacing: 1px; } + .heti h4 { + font-size: 18px; + line-height: 24px; } + .heti h5 { + font-size: 16px; + line-height: 24px; } + .heti h6 { + font-size: 14px; + line-height: 24px; } + .heti h1 + h2, + .heti h2 + h3, + .heti h3 + h4, + .heti h4 + h5, + .heti h5 + h6 { + margin-block-start: 12px; } + .heti ul, + .heti ol, + .heti dl { + margin-block-start: 12px; + margin-block-end: 24px; } + .heti ul, + .heti ol { + padding-inline-start: 2em; } + .heti ul ul, + .heti ul ol, + .heti ol ul, + .heti ol ol { + margin-block-start: 0; + margin-block-end: 0; } + .heti ul { + list-style-type: disc; } + .heti ol { + list-style-type: decimal; } + .heti ul ul, + .heti ol ul { + list-style-type: circle; } + .heti ul ul ul, + .heti ul ol ul, + .heti ol ul ul, + .heti ol ol ul { + list-style-type: square; } + .heti li { + list-style-type: unset; } + .heti table { + box-sizing: border-box; + table-layout: fixed; + border-collapse: collapse; + border: 1px solid #ccc; + margin-block-start: 12px; + margin-block-end: 24px; + margin-inline-start: auto; + margin-inline-end: auto; } + .heti th, + .heti td { + border: 1px solid #ccc; + padding: 8px 16px; } + .heti caption { + caption-side: bottom; + margin-block-start: 2px; + margin-block-end: -4px; + font-size: 14px; + line-height: 24px; } + .heti a { + text-decoration: none; } + .heti a:hover { + padding-block-end: 1px; + border-block-end: 1px solid currentColor; + text-decoration: none; } + .heti abbr[title] { + padding-block-end: 1px; + border-block-end: 1px dotted; + text-decoration: none; + cursor: help; } + .heti b, + .heti strong { + font-weight: 600; } + .heti code { + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 14px; } + .heti dfn { + font-weight: 600; } + .heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti dfn:not(:lang(zh)) { + font-weight: 400; } + .heti em { + font-weight: 600; } + .heti figcaption { + display: inline-block; + vertical-align: top; + font-size: 14px; + text-align: start; } + .heti i { + font-style: italic; } + .heti ins, + .heti u { + padding-block-end: 1px; + border-block-end: 1px solid; + text-decoration: none; } + .heti mark { + padding-block-start: 2px; + padding-block-end: 2px; + padding-inline-start: 1px; + padding-inline-end: 1px; + margin-inline-start: 1px; + margin-inline-end: 1px; + background-color: rgba(255, 247, 0, 0.88); } + .heti q { + quotes: "「" "」" "『" "』"; } + .heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti q:not(:lang(zh)) { + quotes: initial; + quotes: auto; } + .heti rt { + font-size: 0.875em; + color: rgba(0, 0, 0, 0.88); } + .heti small { + font-size: 0.875em; } + .heti strong { + font-weight: 600; } + .heti sub, + .heti sup { + position: relative; + margin-inline-start: 0.25em; + margin-inline-end: 0.25em; + font-size: 0.75em; + font-family: "Helvetica Neue", Helvetica, Arial, "Pingfang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + line-height: 1; + vertical-align: baseline; } + .heti sub { + bottom: -0.25em; } + .heti sup { + top: -0.5em; } + .heti summary { + padding-left: 1em; + outline: 0; + cursor: pointer; } + .heti summary::-webkit-details-marker { + width: 0.6em; + margin-inline-end: 0.4em; } + .heti u[title] { + cursor: help; + border-block-end-color: rgba(0, 0, 0, 0.54); + border-block-end-width: 3px; + border-block-end-style: double; } + .heti address, + .heti cite, + .heti dfn, + .heti dt, + .heti em { + font-style: normal; } + .heti address:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti address:not(:lang(zh)), + .heti cite:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), + .heti cite:not(:lang(zh)), + .heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), + .heti dfn:not(:lang(zh)), + .heti dt:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), + .heti dt:not(:lang(zh)), + .heti em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), + .heti em:not(:lang(zh)) { + font-style: italic; } + .heti, .heti--sans { + font-family: "Helvetica Neue", Helvetica, Arial, "Pingfang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + .heti--serif { + font-family: "Times New Roman", Times, "Songti SC", STSong, SimSun, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + .heti--classic { + font-family: "Times New Roman", Times, "Songti SC", STSong, SimSun, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + .heti--classic h1, + .heti--classic h2, + .heti--classic h3, + .heti--classic h4, + .heti--classic h5, + .heti--classic h6 { + font-weight: 800; } + .heti--classic h1, + .heti--classic h2, + .heti--classic h3, + .heti--classic h4, + .heti--classic h5, + .heti--classic h6, + .heti--classic blockquote, + .heti--classic cite, + .heti--classic q { + font-family: "Times New Roman", Times, "Kaiti SC", STKaiti, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + .heti--classic figcaption, + .heti--classic caption, + .heti--classic th { + font-family: "Helvetica Neue", Helvetica, Arial, "Pingfang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + .heti--columns-1, .heti--columns-2, .heti--columns-3, .heti--columns-4, .heti--columns-16em, .heti--columns-20em, .heti--columns-24em, .heti--columns-28em, .heti--columns-32em, .heti--columns-36em, .heti--columns-40em, .heti--columns-44em, .heti--columns-48em, .heti comma { + max-width: none; + column-gap: 2em; } + .heti--columns-1 p, .heti--columns-2 p, .heti--columns-3 p, .heti--columns-4 p, .heti--columns-16em p, .heti--columns-20em p, .heti--columns-24em p, .heti--columns-28em p, .heti--columns-32em p, .heti--columns-36em p, .heti--columns-40em p, .heti--columns-44em p, .heti--columns-48em p, .heti comma p { + margin-block-start: 6px; + margin-block-end: 12px; + text-indent: 2em; } + .heti--columns-1 { + column-count: 1; } + .heti--columns-2 { + column-count: 2; } + .heti--columns-3 { + column-count: 3; } + .heti--columns-4 { + column-count: 4; } + .heti--columns-16em { + column-width: 16em; } + .heti--columns-20em { + column-width: 20em; } + .heti--columns-24em { + column-width: 24em; } + .heti--columns-28em { + column-width: 28em; } + .heti--columns-32em { + column-width: 32em; } + .heti--columns-36em { + column-width: 36em; } + .heti--columns-40em { + column-width: 40em; } + .heti--columns-44em { + column-width: 44em; } + .heti--columns-48em { + column-width: 48em; } + .heti--vertical { + max-width: none; + max-height: 42em; + writing-mode: vertical-rl; + letter-spacing: 0.125em; } + .heti--vertical h1, + .heti--vertical h2, + .heti--vertical h3, + .heti--vertical h4, + .heti--vertical h5, + .heti--vertical h6 { + text-align: start; } + .heti--ancient, .heti--poetry { + font-family: "Times New Roman", Times, "Songti SC", STSong, SimSun, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + .heti--ancient h1, + .heti--ancient h2, + .heti--ancient h3, + .heti--ancient h4, + .heti--ancient h5, + .heti--ancient h6, .heti--poetry h1, + .heti--poetry h2, + .heti--poetry h3, + .heti--poetry h4, + .heti--poetry h5, + .heti--poetry h6 { + font-family: "Times New Roman", Times, "Kaiti SC", STKaiti, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-weight: 800; + text-align: center; } + .heti--ancient h1 .heti-meta, + .heti--ancient h2 .heti-meta, + .heti--ancient h3 .heti-meta, + .heti--ancient h4 .heti-meta, + .heti--ancient h5 .heti-meta, + .heti--ancient h6 .heti-meta, .heti--poetry h1 .heti-meta, + .heti--poetry h2 .heti-meta, + .heti--poetry h3 .heti-meta, + .heti--poetry h4 .heti-meta, + .heti--poetry h5 .heti-meta, + .heti--poetry h6 .heti-meta { + font-weight: 400; } + @media screen and (min-width: 640px) { + .heti--ancient h1 .heti-meta, + .heti--ancient h2 .heti-meta, + .heti--ancient h3 .heti-meta, + .heti--ancient h4 .heti-meta, + .heti--ancient h5 .heti-meta, + .heti--ancient h6 .heti-meta, .heti--poetry h1 .heti-meta, + .heti--poetry h2 .heti-meta, + .heti--poetry h3 .heti-meta, + .heti--poetry h4 .heti-meta, + .heti--poetry h5 .heti-meta, + .heti--poetry h6 .heti-meta { + position: absolute; + line-height: inherit; + text-indent: 0; + display: inline; + margin-block-start: 4px; + margin-inline-start: 8px; } } + .heti--ancient .heti-meta, .heti--poetry .heti-meta { + line-height: 24px; + text-align: center; + text-indent: 0; } + .heti--ancient p { + text-indent: 2em; } + .heti--poetry p { + text-align: center; + text-indent: 0; } + .heti--annotation p { + margin-block-start: 0; + margin-block-end: 0; + line-height: 2.25; + text-indent: 2em; } + .heti--annotation em { + -webkit-text-emphasis: filled circle; + -webkit-text-emphasis-position: under; + font-weight: 400; } + .heti--annotation em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti--annotation em:not(:lang(zh)) { + -webkit-text-emphasis: none; } + .heti--annotation .heti-meta { + margin-block-start: 12px; + margin-block-end: 24px; } + .heti .heti-meta { + display: block; + text-indent: 0; } + .heti .heti-verse { + text-align: center; + text-indent: 0; } + .heti .heti-large { + font-size: 18px; + line-height: 24px; } + .heti .heti-x-large { + font-size: 20px; + line-height: 30px; } + .heti .heti-small { + font-size: 14px; + line-height: 24px; } + .heti .heti-x-small { + font-size: 12px; + line-height: 18px; } + .heti .heti-list-latin { + list-style-type: upper-latin; } + .heti .heti-list-latin ol { + list-style-type: lower-roman; } + .heti .heti-list-latin ol ol { + list-style-type: lower-latin; } + .heti .heti-list-han { + list-style-type: cjk-ideographic; } + .heti .heti-list-han ol { + list-style-type: decimal; } + .heti .heti-list-han ol ol { + list-style-type: decimal-leading-zero; } + .heti .heti-hang { + position: absolute; + line-height: inherit; + text-indent: 0; } + .heti .heti-em { + -webkit-text-emphasis: filled circle; + -webkit-text-emphasis-position: under; } + .heti .heti-em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti .heti-em:not(:lang(zh)) { + -webkit-text-emphasis: none; } +eti .heti-em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti .heti-em:not(:lang(zh)) { + -webkit-text-emphasis: none; } diff --git a/index.css b/index.css index 5767b4d..aadadab 100644 --- a/index.css +++ b/index.css @@ -49,7 +49,7 @@ a { outline: 1px solid transparent; } -.article[data-bg-grid="page-grid-24"] { +.article[data-bg-grid="grid-24"] { background-size: 100% 24px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #f8f8f8 1px, rgba(255, 255, 255, 0) 33px), @@ -57,25 +57,25 @@ a { outline-color: #eee; } -.article[data-bg-grid="page-grid-24"], -.article[data-bg-grid="page-grid-24"]:hover { +.article[data-debug-mode][data-bg-grid="grid-24"], +.article[data-bg-grid="grid-24"]:hover { 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); } -.article[data-bg-grid="page-grid-24"] .heti-vertical { +.article[data-bg-grid="grid-24"] .heti--vertical { background-size: 24px 100%; background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 23px, #f8f8f8 1px); outline: 1px solid #eee; } -.article[data-bg-grid="page-grid-24"] .heti-vertical, -.article[data-bg-grid="page-grid-24"]:hover .heti-vertical { +.article[data-debug-mode][data-bg-grid="grid-24"] .heti--vertical, +.article[data-bg-grid="grid-24"]:hover .heti--vertical { background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 23px, #eee 1px); } -.article[data-bg-grid="page-grid-12"] { +.article[data-bg-grid="grid-12"] { background-size: 100% 12px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #f8f8f8 1px, rgba(255, 255, 255, 0) 33px), @@ -83,21 +83,21 @@ a { outline-color: #eee; } -.article[data-bg-grid="page-grid-12"], -.article[data-bg-grid="page-grid-12"]:hover { +.article[data-debug-mode][data-bg-grid="grid-12"], +.article[data-bg-grid="grid-12"]:hover { 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); } -.article[data-bg-grid="page-grid-12"] .heti-vertical { +.article[data-bg-grid="grid-12"] .heti--vertical { background-size: 12px 100%; background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 11px, #f8f8f8 1px); outline: 1px solid #eee; } -.article[data-bg-grid="page-grid-12"] .heti-vertical, -.article[data-bg-grid="page-grid-12"]:hover .heti-vertical { +.article[data-debug-mode][data-bg-grid="grid-12"] .heti--vertical, +.article[data-bg-grid="grid-12"]:hover .heti--vertical { background-image: linear-gradient(to left, transparent 11px, #eee 1px); } @@ -110,8 +110,7 @@ a { /** 页脚样式 **/ .fn { max-width: 42em; - margin-block-start: 12px; - margin-block-end: 12px; + margin-block-start: 24px; margin-inline-start: auto; margin-inline-end: auto; padding-block-start: 4px; @@ -218,6 +217,41 @@ heti-jiya { 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; + 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 { left: -20%; width: 140%; diff --git a/index.html b/index.html index 709e548..65fa2f6 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
-
+

赫蹏

古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后》：武（籍武 ）发篋中，有裹药二枚，赫蹏书。颜师古注：邓展曰：赫音兄弟鬩墙之鬩。应劭曰：赫蹏，薄小纸也。宋 赵彦卫 《云麓漫钞》卷七：《赵后传》所谓『赫蹏』者，注云薄小纸，然其寔亦縑帛。
@@ -23,7 +23,7 @@
  • 效果演示
      -
    • 示例1：出师表
      • +
    • 示例1：古文
    • 示例2：诗词
    • 示例3：行间注
    • 示例4：英文演示
      • @@ -44,23 +44,26 @@ -

      介绍#

      -

      赫蹏（hètí）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。由于它不同于传统的网页样式重置，而是专注于正文区域的样式增强，因此可以很好的与常见的 CSS 样式重置方案共存。它的主要功能有：

      +

      介绍#

      +

      赫蹏（hètí）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。由于它不同于传统的网页样式重置，而是专注于正文区域的样式增强，因此可以很好的与常见的 CSS 样式重置方案共存。它的主要功能有：

      • 全标签样式统一；
      • 贴合网格的排版；
        • -
      • 内置多种预设字体族（仅限桌面端）；
        • -
      • 支持横排、竖排两种排版；
        • -
      • 支持诗词、行间注版式；
        • -
      • 兼容 normalize.css、CSS Reset[1]等常见样式重置；
        • +
      • 预置多种预设字体族（仅限桌面端）；
        • +
      • 预置横排、直排（竖排）样式；
        • +
      • 预置古文、诗词样式；
        • +
      • 预置行间注排版样式；
        • +
      • 预置多栏排版样式；
        • +
      • 兼容normalize.css、CSS Reset[1]；
      • 移动端支持；
        • +
      • 基于BEM[2]命名；
      • ……

      总之，用上就会变好看。

      -

      使用方法#

      +

      使用方法#

      赫蹏的使用方法很简单，只需要引入样式文件并设定作用范围即可：

      1. @@ -81,11 +84,12 @@
        -

        效果示例#

        +

        效果示例#

        +

        本站已全页应用了赫蹏样式，下面是赫蹏在特殊排版下的效果演示。

        - 示例1：出师表 + 示例1：古文
        -
        +

        出师表

        作者：諸葛亮（181年~234年10月8日）

        先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。

        @@ -104,7 +108,7 @@
        示例2：诗词
        -
        +

        一剪梅·红藕香残玉簟秋[宋]李清照

        红藕香残玉簟秋。轻解罗裳，独上兰舟。
        @@ -112,9 +116,11 @@ 花自飘零水自流。一种相思，两处闲愁。
        此情无计可消除，才下眉头，却上心头。

        -
        +
        +
        +

        丑奴儿·书博山道中壁[宋]辛弃疾

        -

        +

        少年不识愁滋味，爱上层楼。
        爱上层楼，为赋新词强说愁。
        而今识尽愁滋味，欲说还休。
        @@ -124,10 +130,10 @@

        -
        +
        示例3：行间注
        -
        +

        庖丁解牛

        作者：庄周（公元前369~公元前286年）

        吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑。缘督以为经，可以保身，可以全生，可以养亲，可以尽年。

        @@ -152,12 +158,12 @@
        -

        多栏排版#

        +

        多栏排版#

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

        查看使用说明 -

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

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

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

        + 
        <div class="heti heti--columns-2"></div>
        @@ -169,39 +175,44 @@ - + - +
        按数量heti-columns-3heti--columns-3 2, 3, 4
        按宽度heti-columns-16emheti--columns-16em 16em, 20em, 24em, … +4em, … , 48em
        -
        -

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

        -

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

        -

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

        -

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

        +
        +

        先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。

        +

        宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理；不宜偏私，使内外异法也。

        +

        侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下：愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。

        +

        将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。

        +

        亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。

        +

        臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。

        +

        先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。

        +

        愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。

        +

        今当远离，临表涕零，不知所言。

        多栏排版演示
        -

        垂直排版#

        +

        垂直排版#

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

        查看使用说明 -

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

        +

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

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

        出師表

        作者：諸葛亮（181年－234年10月8日）

        先帝創業未半，而中道崩殂；今天下三分，益州疲弊，此誠危急存亡之秋也﹗然侍衞之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。

        @@ -218,14 +229,14 @@
        -

        排版原则#

        +

        排版原则#

        核心

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

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

        字号

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

        字体

        -

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

        +

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

        查看对照表 @@ -351,13 +362,13 @@
        -

        附录#

        -

        兼容性#

        +

        附录#

        +

        兼容性#

        赫蹏在间距、边框、位置属性上采用了 Logical properties，在所有现代浏览器上表现良好。

        - 查看兼容性详情 + 查看兼容性列表
        - + @@ -368,23 +379,24 @@ - - - - + + + +
        兼容性列表兼容性列表（未经充分测试）
        Chrome
        兼容性123 453.13暂未支持79
        -

        标签示例表#

        -
        - 标签示例表 +

        标签示例表#

        +
        + 查看标签示例表 + - - - + + + @@ -402,14 +414,39 @@ - - - + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + @@ -421,7 +458,7 @@
        -

        待开发功能#

        +

        待开发功能#

        • ️☑ 中、西文混排
        • ☑ 标点挤压
          • @@ -434,20 +471,21 @@
          1. CSS Reset：指代类似 Eric Meyer's Reset CSS 的样式重置方案
            2. -
          2. 《中文排版需求》：https://w3c.github.io/clreq/
            3. +
          3. BEM：由 Yandex 公司创造的命名方法 https://en.bem.info/
            4. +
          4. 《中文排版需求》：https://w3c.github.io/clreq/
          @@ -464,4 +502,4 @@ } - \ No newline at end of file +
        常用标签样式示例表
        类型标签效果类型标签效果
        链接.heti { star: 5; }
        删除的文字<del datetime="2020-01-23">过期的内容</del>过期的内容专名号此时来自<u title="位于山东省聊城市阳谷县城东">景阳冈</u>的<u>武松</u>大喝一声：<q>纳命来！</q>此时来自景阳冈的武松大喝一声：纳命来！
        文本变动这次考试，我考了<del datetime="17:00:00">97</del><ins datetime="18:15:00">100</ins>分呢！这次考试，我考了97100分呢！
        文本更新最后我们决定把「蹏」字念为 <s>dí</s> tí。最后我们决定把「蹏」字念为 dí tí。
        引号窃·格瓦拉曾经说过：<q>打工是不可能打工的。</q>窃·格瓦拉曾经说过：打工是不可能打工的。
        术语<dfn>窃·格瓦拉</dfn>，中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。窃·格瓦拉，中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。
        强调这次的疫情<em>必将</em>取得胜利。这次的疫情必将取得胜利。稳住，<em>我们能赢</em>！稳住，我们能赢！
        着重号我们<span class="heti-em">必将</span>取得胜利战胜这场疫情。我们必将取得胜利战胜这场疫情。
        标记