feat: support CJK & ANS spacing
This commit is contained in:
Sivan
parent
25cfc2229a
commit
f601c82590
13 changed files with 1125 additions and 87 deletions
|
|
@ -23,21 +23,16 @@
|
|||
margin-block-end: $std-block-unit;
|
||||
font-size: $font-size-h1;
|
||||
line-height: $line-height-size-h1;
|
||||
|
||||
// 中文大标题增加微小文字间距
|
||||
letter-spacing: $font-size-h1 * 0.05;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-size-h2;
|
||||
line-height: $line-height-size-h2;
|
||||
letter-spacing: $font-size-h2 * 0.05;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-h3;
|
||||
line-height: $line-height-size-h3;
|
||||
letter-spacing: $font-size-h3 * 0.05;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -58,6 +53,9 @@
|
|||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
// 中文大标题增加微小文字间距
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
// 非中文时不加间距
|
||||
@include non-cjk-block {
|
||||
letter-spacing: 0;
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
|
||||
rt {
|
||||
font-size: 0.875em;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
// 完美 <small> 字号 by Sivan
|
||||
|
|
@ -111,6 +111,7 @@
|
|||
margin-inline-end: 0.25em;
|
||||
font-size: 0.75em;
|
||||
font-family: $font-family-hei;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
|
@ -121,6 +122,11 @@
|
|||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
|
||||
&:target,
|
||||
a:target {
|
||||
background-color: #def;
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
|
|
@ -155,7 +161,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 为所有加划线的元素增加缝隙
|
||||
// 为带划线的元素添加间距，以防止视觉上混为一个元素
|
||||
// 注: 如果设成为两个相连元素添加间距，会有一个问题：
|
||||
// 如果结构是 `<u>倚天</u>和<u>屠龙</u>`，「屠龙」前面仍然会有边距。
|
||||
// 此处跟预期不一致，应该只在两个同名元素紧邻时增加边距，即：`<u>倚天剑</u><u>屠龙刀</u>`
|
||||
//@each $tag in (abbr[title], del, ins, s, u) {
|
||||
// #{$tag} + #{$tag} {
|
||||
// margin-inline-start: 0.125em;
|
||||
// }
|
||||
//}
|
||||
// 因此采用下面的形式，为所有加划线的元素增加缝隙
|
||||
abbr[title],
|
||||
del,
|
||||
ins,
|
||||
|
|
@ -164,12 +179,4 @@
|
|||
margin-inline-start: 1px;
|
||||
margin-inline-end: 1px;
|
||||
}
|
||||
|
||||
// 带边框的元素，两个相连时添加间距，以防止视觉上混为一个元素
|
||||
// @todo: 此处有一个问题：如果结构是 <u>倚天</u>和<u>屠龙</u>，「屠龙」前面仍然会有边距。此处跟预期不一致，应该只在两个同名元素紧邻时增加边距，即：<u>倚天剑</u><u>屠龙刀</u>
|
||||
//@each $tag in (abbr[title], del, ins, s, u) {
|
||||
// #{$tag} + #{$tag} {
|
||||
// margin-inline-start: 0.125em;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
|
|
|
|||
23
lib/helpers/_add-on.scss
Normal file
23
lib/helpers/_add-on.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// Author: Sivan [sun.sivan@gmail.com]
|
||||
// Description: define add-ons.
|
||||
@import "../variables";
|
||||
|
||||
@mixin hetiAddOns {
|
||||
// 用于中西文混排增加边距
|
||||
heti-spacing {
|
||||
display: inline;
|
||||
|
||||
& + sup,
|
||||
& + sub {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.heti-spacing-start {
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
|
||||
.heti-spacing-end {
|
||||
margin-inline-start: 0.25em;
|
||||
}
|
||||
}
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
&-x-large {
|
||||
font-size: $font-size-x-large;
|
||||
line-height: $line-height-size-x-large;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
&-small {
|
||||
|
|
@ -78,5 +79,11 @@
|
|||
margin-block-start: $std-block-unit / 2;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
&:target {
|
||||
background-color: #def;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@
|
|||
@import "../variables";
|
||||
|
||||
@mixin hetiInlineHelperClasses {
|
||||
// 标点悬挂 Punctuation mark hanging
|
||||
// @todo: 用于标点悬挂用的样式
|
||||
#{$root-selector}-hang {
|
||||
@include hang();
|
||||
}
|
||||
|
||||
// 显示强烈的着重号
|
||||
// 强烈着重号 Emphasis Mark
|
||||
#{$root-selector}-em {
|
||||
-webkit-text-emphasis: filled circle;
|
||||
-webkit-text-emphasis-position: under;
|
||||
|
|
@ -17,4 +18,21 @@
|
|||
-webkit-text-emphasis: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 内联 Ruby
|
||||
// 在非行间注排版中使用 ruby 标签，且不额外占据空间
|
||||
// 注：使用此样式需按字拆分 <ruby class="heti-ruby heti-ruby--inline"><rb>赫</rb><rp>(</rp><rt>hè</rt><rp>)</rp></ruby>
|
||||
// https://stackoverflow.com/questions/38680695/adjust-the-vertical-positioning-of-ruby-text/38877801#38877801
|
||||
#{$root-selector}-ruby {
|
||||
&--inline {
|
||||
display: inline-flex;
|
||||
flex-direction: column-reverse;
|
||||
height: 1.5em;
|
||||
|
||||
rt {
|
||||
display: inline;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
@import "modifiers/annotation";
|
||||
@import "helpers/block";
|
||||
@import "helpers/inline";
|
||||
@import "helpers/add-on";
|
||||
|
||||
#{$root-selector} {
|
||||
// 中文每行展示文字（CPL）建议在 30~50 之间，默认 42
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
// 默认字体大小为 16px，行高 1.5
|
||||
font-size: $font-size-normal;
|
||||
font-weight: $font-weight-normal;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
line-height: $line-height-normal;
|
||||
|
||||
// 自动在中西文间加 1/4 空格（暂无浏览器支持）
|
||||
|
|
@ -52,4 +54,5 @@
|
|||
// .heti .heti-verse, .heti .heti-hang
|
||||
@include hetiBlockHelperClasses();
|
||||
@include hetiInlineHelperClasses();
|
||||
@include hetiAddOns();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue