我在百度做阅读器
如果无法正常显示,请先停止浏览器的去广告插件。
1. T Chat
我在大厂做研发
我在百度做阅读器
Kyo @Baidu
x
2. T Chat 什么是排版?
x
系统是如何帮我们把文字排列的?
场景 1
通过查找 app 找到它们
app
通过查找
找到它们
场景 2
排版:在固定⻚面内,将内容以适合的方式呈现
。这就是排版的定义。
排版:在固定⻚面内,将内容以适合的方式呈
现。这就是排版的定义。
3. T Chat 排版引擎的定义
x
广义排版引擎:排版+⻚面渲染的引擎,它解析输入的
内容(HTML、XML等等)及其属性,根据⻚面布局,并
运用规则,把内容排到合适的位置进行渲染、显示。
狭义排版引擎:仅指广义排版引擎中排版部分。
4. T Chat 排版类型
流式
x
块式
5. T Chat 小说新 C++ 排版内核诞生的背景
背景:iOS、Android 两套阅读器,排版能力差,扩展性低
1、语言:采用 C++ 跨平台设计方案,一套排版引擎支撑多端
2、架构:从解析、排版、渲染全面自研
3、体验:提升排版能力和排版效果,提升阅读体验
x
6. 整体架构图
容
器
层
UI Widgets Recycle ScrollView Page View(Cell) GDI(Draw) Thread Manager … OC/JAVA
Bookmark Manager Cache Manager Catalog Manager Ad Manager Chapter Manager … C++
Interface
排
版
引
擎
C++
Layout Manager RenderMgr Abstract
Retrieval Progress Manager …
Parser
iOS
Layouter
Message Controller
Render
Txt Parser Dom Layout Region Manager Render Render Page
Epub Parser Para Layout Regulation Manager Render Para Render Line
… Line Layout … Render Leaf …
基础层(C++)
系统
Callback Processor
Archive(mmap)
Thread(pthread)
Core Text
Fonts
…
Char Processor
Android
Public De ne
OpenGL
……
Fonts
…
7. T Chat 排版架构
x
(Render Tree)
(DOM)
Layouter
Parser
Render
Txt Parser Dom Layout Region Manager Render Render Page
Epub Parser Para Layout Regulation Manager Render Para Render Line
… Line Layout … Render Leaf …
8. T Chat 排版架构
Box Box Box Box
x
Box
Box Box Box Box
Line “乾达婆”是一种 不吃酒肉 、只寻香气作为滋养
Line 的神,是服侍帝释的乐神之一,身上 发出 浓冽
Line
Line
Line
的香气。“乾达婆”在梵语中又是“变幻莫测”的意
思,魔术师也叫“乾达婆”,海市蜃楼叫做“乾达
婆城”。香气和音乐都是缥缈隐约,难以捉摸。”
9. T Chat 大样数据与小样数据
x
10. T Chat 排版架构
为什么是 Native 而不是 WebView?
x
11. T Chat 排版策略
x
粗排策略:只负责计算每一⻚能个排多少内容,而不进行详
细的排版,如不会应用左右对⻬算法等不影响排内容多少的
策略,同时不存储大样数据。
细排策略:应用全部排版策略,详细计算出每一个节点的
位置坐标,完成渲染需要的全部数据。
Page Info 只存储每一⻚的
开始/结束的节点信息
Layouter
小样数据
粗排
(负责快速分⻚)
只有一层深度的 Page Info 树
只在真正渲染某一⻚时候调用精
细排版
Layouter
细排
(精准阅读)
大样数据
12. T Chat 排版过程
Layout
Para Layout
x
Line Layout
Section Layout
Box Layout
Text Box
Layout
……
Image Box
Layout
13. T Chat 排版体验
x
如何衡量排版体验效果是否出色?
支持多种排版效果
专
Experience
优化翻⻚体验,保障用户阅读、翻⻚
顺畅性
顺
细
精细打磨排版细节
14. T Chat 排版体验
x
小说来讲,保障用户连续阅读的连贯性,关键在于版面灰度
分布均匀
即排版的字与字、字与标点、标点与标点等的空隙分布均匀,以达到版面的灰度均衡。灰度均衡的版面
整体感更强,并最大程度保障读者阅读中不会被突然的空白打断,亦不会太紧密形成阅读的压迫感,整
体提高阅读过程的连贯性)
行首全⻆标点造成上下段首不对⻬ 行内相邻标点造成空洞效果
行首标点挤压 行内相邻标点挤压
15. T Chat 字形信息
x
Advance width
= glyph width + left bearing + right bearing
Ascent & Descent
相对基线的上下高度值,不同的字体可以有不同的
Ascent & Descent 值,常应用于像蒙文等上下排版的
语言
Kering
VA
VI
16. T Chat 思考
x