54798ba578
- 给全部 78 个 Swift 源文件添加详细的中文注释（文件级、类级、方法级） - 删除 LegacyRDReaderController/ 死代码目录（16 文件 4592 行） - 根目录翻页容器文件移入 ReaderView/ 目录 - Resources/ 移入 EPUBCore/Resources/（与使用者归属一致） - RDEPUBTextIndexTable.swift 移入 EPUBTextRendering/（消除反向依赖） - RDURLReaderController.swift 移入 EPUBUI/（入口控制器归入 UI 层） - 更新 podspec 资源路径
217 lines
9.8 KiB
Swift
217 lines
9.8 KiB
Swift
// RDEPUBStyleSheetBuilder.swift
|
||
// EPUB CSS 样式构建器
|
||
// 负责生成重排模式下的分页 CSS（多列布局）和测量 CSS，
|
||
// 以及将分页样式注入到 HTML 中。还提供测量脚本（JS）用于计算页数。
|
||
|
||
import Foundation
|
||
|
||
/// CSS 样式构建工具集，生成分页、渲染和测量所需的 CSS/JS
|
||
public enum RDEPUBStyleSheetBuilder {
|
||
/// 将分页 CSS 注入到 HTML 字符串中（插入 </head> 或 <body 之前）
|
||
public static func injectPaginationCSS(
|
||
into html: String,
|
||
presentation: RDEPUBPresentationStyle
|
||
) -> String {
|
||
let styleTag = "<style id=\"ss-reader-pagination\">\(measurementCSS(for: presentation))</style>"
|
||
if html.range(of: "</head>", options: .caseInsensitive) != nil {
|
||
return html.replacingOccurrences(of: "</head>", with: styleTag + "</head>", options: .caseInsensitive)
|
||
}
|
||
if html.range(of: "<body", options: .caseInsensitive) != nil {
|
||
return html.replacingOccurrences(of: "<body", with: styleTag + "<body", options: .caseInsensitive)
|
||
}
|
||
return styleTag + html
|
||
}
|
||
|
||
/// 生成重排模式的渲染 CSS（视口、body、#ss-reader-viewport、#ss-reader-content 等）
|
||
/// 包含多列布局、字号、行高、主题色、高亮样式等
|
||
public static func renderCSS(for presentation: RDEPUBPresentationStyle) -> String {
|
||
let values = cssValues(for: presentation)
|
||
let backgroundCSS = presentation.themeBackgroundColor.map { "background: \($0) !important;" } ?? ""
|
||
let textCSS = presentation.themeTextColor.map { "color: \($0) !important;" } ?? ""
|
||
|
||
return """
|
||
html {
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
width: \(values.viewportWidth)px !important;
|
||
height: \(values.viewportHeight)px !important;
|
||
min-height: \(values.viewportHeight)px !important;
|
||
overflow-x: hidden !important;
|
||
overflow-y: hidden !important;
|
||
}
|
||
body {
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
box-sizing: border-box !important;
|
||
position: relative !important;
|
||
width: \(values.viewportWidth)px !important;
|
||
height: \(values.viewportHeight)px !important;
|
||
min-height: \(values.viewportHeight)px !important;
|
||
overflow: hidden !important;
|
||
background: transparent !important;
|
||
}
|
||
#ss-reader-viewport {
|
||
position: relative !important;
|
||
width: \(values.viewportWidth)px !important;
|
||
height: \(values.viewportHeight)px !important;
|
||
min-height: \(values.viewportHeight)px !important;
|
||
overflow: hidden !important;
|
||
background: transparent !important;
|
||
}
|
||
#ss-reader-content {
|
||
position: relative !important;
|
||
box-sizing: border-box !important;
|
||
width: \(values.viewportWidth)px !important;
|
||
height: \(values.viewportHeight)px !important;
|
||
min-height: \(values.viewportHeight)px !important;
|
||
overflow: visible !important;
|
||
padding: \(values.paddingTop)px \(values.paddingRight)px \(values.paddingBottom)px \(values.paddingLeft)px !important;
|
||
font-size: \(values.fontSize)px !important;
|
||
line-height: \(values.lineHeight) !important;
|
||
-webkit-column-width: \(values.contentWidth)px !important;
|
||
column-width: \(values.contentWidth)px !important;
|
||
-webkit-column-gap: \(values.columnGap)px !important;
|
||
column-gap: \(values.columnGap)px !important;
|
||
-webkit-column-fill: auto !important;
|
||
column-fill: auto !important;
|
||
transform-origin: top left !important;
|
||
will-change: transform !important;
|
||
\(backgroundCSS)
|
||
\(textCSS)
|
||
}
|
||
#ss-reader-content img, #ss-reader-content svg, #ss-reader-content video, #ss-reader-content canvas, #ss-reader-content iframe {
|
||
max-width: 100% !important;
|
||
height: auto !important;
|
||
break-inside: avoid-column !important;
|
||
-webkit-column-break-inside: avoid !important;
|
||
}
|
||
#ss-reader-content mark.ss-reader-highlight {
|
||
padding: 0;
|
||
border-radius: 2px;
|
||
color: inherit !important;
|
||
}
|
||
#ss-reader-content mark.ss-reader-highlight-highlight {
|
||
text-decoration: none !important;
|
||
color: inherit !important;
|
||
}
|
||
#ss-reader-content mark.ss-reader-highlight-underline {
|
||
background: transparent !important;
|
||
color: inherit !important;
|
||
text-decoration-line: underline !important;
|
||
text-decoration-thickness: 2px !important;
|
||
text-decoration-skip-ink: auto !important;
|
||
}
|
||
"""
|
||
}
|
||
|
||
/// 生成分页测量用的 CSS（与渲染 CSS 类似但不含 transform/will-change 等优化属性）
|
||
public static func measurementCSS(for presentation: RDEPUBPresentationStyle) -> String {
|
||
let values = cssValues(for: presentation)
|
||
let backgroundCSS = presentation.themeBackgroundColor.map { "background: \($0) !important;" } ?? ""
|
||
let textCSS = presentation.themeTextColor.map { "color: \($0) !important;" } ?? ""
|
||
|
||
return """
|
||
html {
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
width: \(values.viewportWidth)px !important;
|
||
height: \(values.viewportHeight)px !important;
|
||
min-height: \(values.viewportHeight)px !important;
|
||
overflow: hidden !important;
|
||
}
|
||
body {
|
||
margin: 0 !important;
|
||
box-sizing: border-box !important;
|
||
position: relative !important;
|
||
width: \(values.viewportWidth)px !important;
|
||
height: \(values.viewportHeight)px !important;
|
||
min-height: \(values.viewportHeight)px !important;
|
||
overflow: visible !important;
|
||
padding: \(values.paddingTop)px \(values.paddingRight)px \(values.paddingBottom)px \(values.paddingLeft)px !important;
|
||
font-size: \(values.fontSize)px !important;
|
||
line-height: \(values.lineHeight) !important;
|
||
-webkit-column-width: \(values.contentWidth)px !important;
|
||
column-width: \(values.contentWidth)px !important;
|
||
-webkit-column-gap: \(values.columnGap)px !important;
|
||
column-gap: \(values.columnGap)px !important;
|
||
-webkit-column-fill: auto !important;
|
||
column-fill: auto !important;
|
||
transform-origin: top left !important;
|
||
\(backgroundCSS)
|
||
\(textCSS)
|
||
}
|
||
img, svg, video, canvas, iframe {
|
||
max-width: 100% !important;
|
||
height: auto !important;
|
||
break-inside: avoid-column !important;
|
||
-webkit-column-break-inside: avoid !important;
|
||
}
|
||
"""
|
||
}
|
||
|
||
/// 生成分页测量脚本（JS）：注入 CSS 后测量 scrollWidth，计算页数
|
||
public static func measurementScript(for presentation: RDEPUBPresentationStyle) -> String {
|
||
let style = measurementCSS(for: presentation)
|
||
.replacingOccurrences(of: "\\", with: "\\\\")
|
||
.replacingOccurrences(of: "`", with: "\\`")
|
||
|
||
let viewportWidth = Double(max(1, presentation.viewportSize.width))
|
||
let viewportWidthJS = String(format: "%.3f", viewportWidth)
|
||
|
||
return """
|
||
(function() {
|
||
var style = document.getElementById('ss-reader-pagination');
|
||
if (!style) {
|
||
style = document.createElement('style');
|
||
style.id = 'ss-reader-pagination';
|
||
document.head.appendChild(style);
|
||
}
|
||
style.textContent = `\(style)`;
|
||
var scrollingElement = document.scrollingElement || document.documentElement || document.body;
|
||
var totalWidth = Math.max(
|
||
scrollingElement ? scrollingElement.scrollWidth : 0,
|
||
scrollingElement ? scrollingElement.offsetWidth : 0,
|
||
document.body ? document.body.scrollWidth : 0,
|
||
document.body ? document.body.offsetWidth : 0,
|
||
document.documentElement ? document.documentElement.scrollWidth : 0,
|
||
document.documentElement ? document.documentElement.offsetWidth : 0
|
||
);
|
||
return Math.max(1, Math.ceil(totalWidth / \(viewportWidthJS)));
|
||
})();
|
||
"""
|
||
}
|
||
|
||
/// 从展示样式计算所有 CSS 变量值（视口尺寸、内边距、字号、行高等）
|
||
private static func cssValues(for presentation: RDEPUBPresentationStyle) -> (
|
||
viewportWidth: String,
|
||
viewportHeight: String,
|
||
contentWidth: String,
|
||
columnGap: String,
|
||
paddingTop: String,
|
||
paddingRight: String,
|
||
paddingBottom: String,
|
||
paddingLeft: String,
|
||
fontSize: String,
|
||
lineHeight: String
|
||
) {
|
||
let viewportWidth = max(1, presentation.viewportSize.width)
|
||
let viewportHeight = max(1, presentation.viewportSize.height)
|
||
let contentInsets = presentation.contentInsets
|
||
let contentWidth = max(1, viewportWidth - contentInsets.left - contentInsets.right)
|
||
let columnGap = max(0, contentInsets.left + contentInsets.right)
|
||
|
||
return (
|
||
viewportWidth: String(format: "%.3f", viewportWidth),
|
||
viewportHeight: String(format: "%.3f", viewportHeight),
|
||
contentWidth: String(format: "%.3f", contentWidth),
|
||
columnGap: String(format: "%.3f", columnGap),
|
||
paddingTop: String(format: "%.3f", contentInsets.top),
|
||
paddingRight: String(format: "%.3f", contentInsets.right),
|
||
paddingBottom: String(format: "%.3f", contentInsets.bottom),
|
||
paddingLeft: String(format: "%.3f", contentInsets.left),
|
||
fontSize: String(format: "%.3f", presentation.fontSize),
|
||
lineHeight: String(format: "%.3f", max(1, presentation.lineHeightMultiple))
|
||
)
|
||
}
|
||
}
|