ReedenReeden
阅读与排版高亮规则

高亮规则样式

Reeden 高亮规则支持的 CSS 写法：文字、背景、边框、行内块、尺寸、变换、动画、分块样式和主题色占位。

什么时候看这页

如果你只是想创建关键词高亮，先看 高亮与高亮规则。

这页用于调整高亮规则的显示效果。在规则编辑的「样式」页签，把「编辑方式」切到「CSS」，就能直接写样式。暂不支持的属性会被忽略，框底工具栏右侧会显示「N 处忽略」。CSS 框的补全、取色和「AI 改」见 创建高亮规则。

CSS 框里能写什么

规则的 CSS 框里可以写三种东西：

  1. 直接写的声明：作用于整条规则命中的内容
  2. .名字 { … } 块：只作用于规则里同名的那一部分，见 给规则里的某一部分单独上样式
  3. @keyframes 名字 { … }：自定义动画，见 动画
display: block;
border: 1.5px solid #e9c98f;
border-radius: 0.75em;

.head { color: #b06a12; font-weight: 700; }

@keyframes glow { 50% { opacity: 0.4; } }

括号写错、选择器不认识时，CSS 框下面会提示「CSS 写法有误」，改好才能保存。

基本示例

color: {primaryColor};
background-color: #FFF3C4;
font-weight: 700;
reeden-font-bold: 6;
border-left: 4px solid {primaryColor};
padding: 4px 10px;

显示方式：行内、行内块、块级

display 支持三个值：

  • inline：随文字流动，命中的文字跨行时每行各画一段。适合短词高亮
  • inline-block：把命中的内容当成一个整块嵌在行里，不会从中间断行。宽高、垂直对齐、变换都能用。适合印章、键帽、弹幕、标签
  • block：整段画成一块。适合卡片、引用、整段底色

写其他值会按 inline 处理。可视化编辑里「样式加在」选「整段」，相当于 display: block；行内块只能在 CSS 里写。

行内块示例（歪印章）：

display: inline-block;
transform: rotate(-8deg);
border: 2px solid #d33a2a;
color: #d33a2a;
border-radius: 0.25em;
padding: 0 0.25em;
font-weight: 700;

文字样式

常用属性：

  • color：文字颜色，例如 #FFB800、rgba(255,184,0,.8)、{textColor}、{primaryColor}
  • font-weight：字重，例如 normal、400、700、bold
  • reeden-font-bold：Reeden 阅读页面描边加粗等级，支持 1 到 9
  • font-style：字体样式，例如 normal、italic
  • font-size：字号，例如 14px、1em、1.1rem
  • font-family：字体名列表
  • font-variant：例如 small-caps 小型大写
  • line-height：行高，例如 1.5、24px
  • letter-spacing：字距，例如 0.3em
  • text-align：对齐方式，例如 left、center、right、justify
  • text-indent：首行缩进，例如 2em、0
  • text-transform：英文大小写，例如 uppercase
  • white-space：空白和换行，例如 nowrap 不换行
  • text-shadow：文字阴影，可以写多层
  • -webkit-text-stroke：文字描边，例如 1px {primaryColor}

下划线相关属性：

  • text-decoration
  • text-decoration-line
  • text-decoration-style
  • text-decoration-color
  • text-decoration-thickness：线的粗细
  • text-underline-offset：下划线离文字的距离

示例：

text-decoration: underline wavy {primaryColor};
text-underline-offset: 0.2em;

着重号（每个字下面一个点）用 text-emphasis：

text-emphasis: filled dot {accentColor};
text-emphasis-position: under;

还支持 text-emphasis-style、text-emphasis-color，以及带 -webkit- 前缀的写法。

渐变色文字：

background-image: linear-gradient(90deg, #e5484d, #3b6fd8);
background-clip: text;
-webkit-text-fill-color: transparent;

背景和图片

常用属性：

  • background-color：背景色，例如 #FFF3C4、{primaryColor}
  • background-image：背景图或渐变，例如 url("reeden://bg/xxx")、linear-gradient(…)
  • background-position：背景位置，例如 left top、center、right bottom
  • background-repeat：重复方式，例如 no-repeat、repeat
  • background-size：尺寸，例如 cover、contain、auto
  • background-clip：背景画到哪里，例如 text
  • reeden-background-height：高亮背景高度，支持 half、50%、full、100%
  • reeden-background-nine-slice：背景图 9-Slice 拉伸区域，例如 10 20 30 40
  • reeden-background-nine-slice-scale：9-Slice 边框画多粗
  • reeden-background-nine-slice-basis：bubble（气泡，跟着字变大变小）或 card（卡片，整张图铺满这一块）

阅读正文中建议使用较浅的背景色，避免影响识别。

半高荧光笔示例：

background-color: rgba(254, 240, 138, 0.8);
reeden-background-height: half;

背景图 9-Slice 示例：

background-image: url("assets/bg.png");
background-size: 100% 100%;
reeden-background-nine-slice: 10 20 30 40;

内置素材

背景图可以直接用 App 自带的装饰素材，写 url(builtin:素材名)：

padding-right: 1.2em;
background-image: url(builtin:gem);
background-repeat: no-repeat;
background-position: right center;
background-size: 1em;

这条规则会在命中的文字后面挂一个宝石图标。素材名的完整列表见 替换为。

边框和圆角

常用属性：

  • border、border-left、border-right、border-top、border-bottom
  • border-width、border-style、border-color
  • 单边的长写，例如 border-bottom-width、border-left-style、border-top-color
  • border-radius，以及单个角的 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
  • box-shadow：盒子阴影
  • box-decoration-break：行内高亮跨行时，每行是否各自画完整的边框和圆角，clone 各自画、slice 切开

示例：

border-left: 4px solid #94A3B8;
border-radius: 8px;

键帽效果（底边加粗）：

display: inline-block;
border: 1px solid {mutedColor};
border-bottom-width: 3px;
border-radius: 0.3em;
padding: 0 0.35em;

边框适合标记整段或标题，不一定适合每一个短词。

轮廓线

outline 是画在边框外面的一圈线，不占位置、不会把文字挤开：

  • outline、outline-width、outline-style、outline-color
  • outline-offset：轮廓线和内容的距离
outline: 1.5px solid {primaryColor};
outline-offset: 2px;

间距和展示

常用属性：

  • padding、padding-left、padding-right、padding-top、padding-bottom
  • margin、margin-left、margin-right、margin-top、margin-bottom
  • display
  • opacity
  • float

display: block 更适合整段、连续整段或标题命中。

首字下沉这类效果可以使用 float：

float: left;
font-size: 2em;
line-height: 0.9;
margin-right: 0.12em;

尺寸和对齐

  • width、min-width、max-width
  • height、min-height、max-height
  • vertical-align：行内块在行里的上下位置，例如 middle、top、-0.1em

尺寸对行内块和块级生效，普通行内高亮写了也不起作用。

聊天气泡示例（宽度随内容、最宽 78%、靠右）：

display: block;
text-indent: 0;
width: fit-content;
max-width: 78%;
margin-left: auto;
background-color: #95ec69;
border-radius: 0.75em;
padding: 0.15em 0.6em;

变换

  • transform：旋转、缩放、平移、倾斜，例如 rotate(-8deg)、scale(1.2)、translateY(-0.1em)
  • transform-origin：变换的中心点

变换只改变画出来的样子，不影响排版：旋转、放大后的内容可能盖到旁边的字上，旁边的字不会让开。

变换只对行内块和块级生效，普通行内高亮要先加 display: inline-block。

动画

可以用 animation 简写，或 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。

内置了几个动画，直接写名字就能用：

名字效果
reeden-breathe透明度慢慢起伏
reeden-blink一亮一灭
reeden-shake抖动
reeden-float上下轻轻浮动
reeden-rainbow颜色轮流变化
reeden-pop每隔一会儿放大回弹
reeden-spin一直旋转
reeden-fade-in从透明浮现出来
reeden-sweep背景从左往右扫过
color: #d98b1b;
font-weight: 700;
animation: reeden-breathe 2.4s ease-in-out infinite;

也可以在 CSS 框里写自己的 @keyframes，名字只在这条规则里有效，不会和别的规则撞名：

animation: glow 2s ease-in-out infinite;

@keyframes glow {
  50% { opacity: 0.4; color: #e5484d; }
}

注意：

  • 播放时只会变化透明度、文字颜色、背景色和变换。关键帧里写的宽高、边距这类影响排版的属性不会播放
  • 用到变换的动画（震动、漂浮、弹一下、旋转）要配 display: inline-block
  • 只播放正在显示的页面，翻页时从头开始
  • 墨水屏不播放动画

动画会持续刷新页面，开太多会更耗电。

给规则里的某一部分单独上样式

在 CSS 框里写 .名字 { … }，只给规则命中里同名的那一部分上样式。名字可以来自：

  • 正则里的命名分组：(?<head>…) 对应 .head
  • 「替换为」里的样式块：<span class="who">…</span> 对应 .who
  • 「替换为」里给图片、注音写的 class

另外还能写：

  • img、ruby、rt：「替换为」换出来的图片、注音，注音的小字是 rt
  • .first-para、.last-para：命中跨好几段时（比如用了「结束标记」），第一段和最后一段

示例：称号加名字，左边深底、右边浅底

  • 关键词（正则）：(?<title>剑圣|宗主|掌门|长老)\s?(?<name>[一-龥]{2,3})
  • CSS：
.title {
  background-color: {textColor};
  color: {backgroundColor};
  border-radius: 0.2em 0 0 0.2em;
  padding: 0 0.3em;
}
.name {
  background-color: {primaryColor|a:0.12};
  border-radius: 0 0.2em 0.2em 0;
  padding: 0 0.3em;
  font-weight: 600;
}

.名字 块里能写的属性和外面一样。

动态颜色占位符

可以使用这些占位符适配当前主题：

  • {textColor}：当前主题文字色
  • {backgroundColor}：当前主题背景色
  • {primaryColor}、{accentColor}：当前主题强调色
  • {mutedColor}：次要文字色，介于文字色和背景色之间
  • {roleColor}：当前匹配角色的颜色；没有角色颜色时会回退到文字色或强调色

在占位符后面加 |a:透明度 可以调透明度，做浅色底不用写死颜色：

background-color: {primaryColor|a:0.15};

示例：

color: {primaryColor};
border-left: 4px solid {primaryColor};

角色高亮示例：

color: {roleColor};
text-shadow: 0 0 4px {roleColor};

注意事项

  • 不支持的 CSS 属性会被忽略
  • reeden- 开头的属性主要用于高亮规则，不是通用网页 CSS
  • 规则样式太复杂可能影响阅读舒适度
  • margin-top 和 margin-bottom 更适合块级命中
  • 背景图和深色背景要确认亮色、暗色主题下都能看清正文
  • 宽高、变换、垂直对齐要配行内块或块级才生效

从模板创建

用内置模板快速建出对话、角色、首字下沉、作者有话说、防剧透、动效等常用高亮规则，再按自己的书调整。

替换为

用高亮规则把命中的文字换成别的写法、图片或注音，或者直接删掉，同时套上规则的样式。

On this page

什么时候看这页CSS 框里能写什么基本示例显示方式：行内、行内块、块级文字样式背景和图片内置素材边框和圆角轮廓线间距和展示尺寸和对齐变换动画给规则里的某一部分单独上样式动态颜色占位符注意事项