| name | epub-alite-converter |
| description | 将 EPUB 封面式页面、卷首、章首或海报页转换为项目的 A-lite 可重排全页方案,同时保留原有图文叠加构图、文字、图片和资源。 |
EPUB A-lite 转换
当需要把 EPUB 中已有的封面式页面、卷首、章节标题页或海报页转换成项目最终 A-lite 方案时使用这个 skill。
固定目标
严格使用项目 A-lite 方案:
- reflowable EPUB 页面。
body.fullpage。
.fullframe。
min-height: 100%。
font-size: 16px。
overflow: hidden。
page-break-before/after/inside。
- 背景属于
body.poster-bg 或其他 poster-* modifier,不属于 body.fullpage。
- 既有单图卷封默认使用
background-size: contain,并保留 .poster-fallback 原图回退。
- 竖排文字使用
writing-mode: vertical-rl。
- 竖排列使用
float: right。
- 不转成 FXL。
- 不使用
vh / vw。
- 不使用 absolute positioning。
工作流
- 读取目标页的源 XHTML、关联 CSS、OPF manifest/spine 和资源。
- 识别已有构图:
- 背景图。
- 叠加文字块。
- 装饰性叠加图片。
- 竖排列。
- 字体名和嵌入字体用法。
- 保留构图。不要重设设计、重排内容、改写文字、替换图片或新增装饰。
- 转换页面外壳:
<body class="fullpage poster-bg">
<section class="fullframe" epub:type="chapter">
...
</section>
</body>
- 把竖排叠加文字转成浮动竖列:
.fullframe .vcol {
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;
text-orientation: mixed;
-webkit-text-orientation: mixed;
-epub-text-orientation: mixed;
float: right;
text-indent: 0;
page-break-inside: avoid;
-webkit-page-break-inside: avoid;
}
- 转换定位:
- 保持大体视觉顺序。
- 把大块固定 offset 转成
% margin。
- 把标题字号转成
% 或 em。
- 内部基准
font-size 保持 16px。
- 保留嵌入字体。锁定题名字体时,书内字体名优先,通常只接
serif / sans-serif 作为 generic fallback。
- 保持 CSS 分层:A-lite CSS 必须放入
Styles/poster.css,不要写进 base.css。
- OPF manifest 只为实际使用的 assets/CSS/fonts 增减条目;存在 A-lite 时分开声明
fonts.css / base.css / poster.css。保留已有 nav.xhtml、toc.ncx、spine toc="ncx" 和 cover-image metadata。
- 读取输出 XHTML/CSS,确认所有必须保留的叠加文字和图片没有丢失。
- 如果源页是单张包含全部设计内容的卷封图,使用
poster-bg-contain 或 poster-bg-volume-* modifier;使用 background-size: contain,不要使用会裁图的 cover 或会拉伸图片的 100% 100%;在 .fullframe 内保留 <img class="poster-fallback">,并只在 @supports (background-size: contain) 中隐藏它。
A-lite CSS 骨架
@page { margin: 0; padding: 0; }
html {
width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body.fullpage {
width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
box-sizing: border-box;
page-break-before: always;
page-break-after: always;
page-break-inside: avoid;
-webkit-page-break-before: always;
-webkit-page-break-after: always;
-webkit-page-break-inside: avoid;
overflow: hidden;
}
body.poster-bg {
background-image: url("../Images/poster-bg.png");
background-repeat: no-repeat;
background-position: left bottom;
background-size: 80% auto;
}
.fullframe {
width: 100%;
height: auto;
min-height: 90%;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: visible;
page-break-inside: avoid;
-webkit-page-break-inside: avoid;
}
单图卷封补充:
body.poster-bg-contain {
background-image: url("../Images/poster.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.poster-fallback {
display: block;
width: 100%;
max-width: 100%;
height: auto;
max-height: 100%;
}
@supports (background-size: contain) {
body.poster-bg-contain .poster-fallback {
visibility: hidden;
}
}
禁止事项
- 不转成 fixed layout。
- 不用 padding-ratio、FXL 或纯整页图片替代项目 A-lite 方案。
- 不因为定位困难就删除叠加文字。
- 不新增营销式装饰或新的视觉概念。
- 不把私有阅读器 CSS 作为主路径。
验证 fixture
使用 templates/epub-style-demo/OEBPS/Text/03-vertical-alite.xhtml 作为文本叠加 A-lite 输出参考,使用 Text/03c-poster-contain.xhtml 作为单图卷封参考。转换页应满足这些不变量:
- 有海报背景时使用
<body class="fullpage poster-bg">。
body.fullpage 承载 shell 规则,body.poster-bg 承载背景规则。
body.fullpage 不写页面级 color、background 或 background-color;body.poster-bg 只写背景图、位置和尺寸。
.fullframe 包含叠加内容。
.fullframe 保持 padding:0;叠加文字用元素 margin 定位,不给页面骨架加 padding。
- 竖排叠加文字使用
writing-mode: vertical-rl 和前缀 fallback。
- 不引入 absolute positioning 或 fixed-layout package metadata。
- 单图卷封保留
.poster-fallback,并使用 contain 防止边缘文字被裁切。
Dry-run 约定
本 skill 默认 dry-run。直接调用只输出预期改动 JSON;加 --commit 才真正改。
代理协议示例(注释说明代理动作,不是独立 shell 命令):
cat work/dry-run.json | jq
dry-run 输出格式见 docs/pipeline/cleanup-flow.md。