WebToEpub转换Angular官方文档

Posted on Edited on In

背景

使用WebToEpub转换angular官方文档的一些配置,备份用.

WebToEpub的一些配置

第一章链接

https://angular.cn/start

主要内容的css选择器

div.content 打开网页就能看到

文章标题的css选择器

h1 勉强能算吧

排除的内容

  • button.copy-button 代码框里的复制按钮
  • a.header-link 每个小标题后都跟着一个url,若使用该url访问网站则可直接跳转到该标题处
  • [translation-origin] 英语原文的部分
  • aio-toc 网页的content中有不可见的目录结构,带有该标签的内容还会造成大量的空白

自定义输出CSS

1
2
3
4
5
6
7
8
9
pre {
    margin: 16px 24px;
    border: 1px solid black;
    white-space: pre-line;     /* 所有代码行的缩进会消失 */
}

pre > code {
    white-space: pre-wrap;     /* 所有代码行的缩进又会重现 */
}

说明:
代码块在网页上看起来大概是

1
2
3
4
5
6
7
8
9
10
11
12
<code-example>
    <div style="display: none;">框内部的代码,用字符串的形式展现</div>
    <aio-code>
        <pre>
            <button>复制按钮</button>
            <code>
                <span>语句1</span>
                <span>语句2</span>
            </code>
        </pre>
    </aio-code>
</code-example>
  1. code-example, aio-code 等标签,电子书中是不识别的(epub本质上也是html),只知道是一块
  2. pre, code 才支持,为了美观,添加了一些margin和border
  3. 默认情况下代码块的第一句代码缩进会异常
    1. 比第二行多缩进大概30px
    2. 如果删除第一行中的第一个字符,后面的会补上位置
    3. 如果设置第一行中的第一个字符向左移动
      (code>span:first-child{margin-left:-30px}),
      后面的会向左更多(看起来至少40px,原因不明),导致重影.
    4. 最终发现并非是 code 中的 span 如何放置出问题,而是 pre 有问题,
      于是在 pre 中取消代码缩进,然后在 code 中尝试恢复缩进.

white-space的一些说明

white-space: 如何处理空白,这里的空白多数是指 空格,tab,回车

就是爱换行系列

  • break-spaces 不仅空白字符不动,还多加换行(行尾空格会变回车),比较奇葩

原封不动系列:

  • pre: 过长不会折行(仿佛是粘贴了一行字符串到一个不限显示长度的编辑器中)
  • pre-wrap: 过长会折行 (看起来像是普通代码编辑器的行为)

什么空白都不要系列

  • normal: 过长会折行(代码会浓缩到没有缩进,没有空行,密密麻麻的一团)
  • nowrap: 显示成一行

去掉了大部分空白但保留了回车系列:

  • pre-line: 过长会折行(代码会失去所有缩进,但保留了空行,暂且能够分出结构)

参考

  1. white-space的说明