Add notes.

Author: cssmagic

.gitignore

@@ -30,3 +30,5 @@ notes/*/*.md
 !notes/chapter-4/*.md
 !notes/*/501.md
 !notes/*/502.md
+!notes/*/503.md
+!notes/*/505.md

doc/index.md

@@ -49,9 +49,9 @@ issue: 17
 **第五章** | **字体排印**|| [购买后阅读 <sup>↗</sup>](http://www.ituring.com.cn/tupubarticle/9397)|
 501| [20] 连字符断行|-|〃| [免费阅读](https://github.com/cssmagic/CSS-Secrets/issues/59)
 502| [21] 插入换行|-|〃| [免费阅读](https://github.com/cssmagic/CSS-Secrets/issues/60)
-503| [22] 文本行的斑马条纹|-|〃|-
+503| [22] 文本行的斑马条纹|-|〃| [免费阅读](https://github.com/cssmagic/CSS-Secrets/issues/61)
 504| [23] 调整 Tab 的宽度|-|〃|-
-505| [24] 连字|-|〃|-
+505| [24] 连字|-|〃| [免费阅读](https://github.com/cssmagic/CSS-Secrets/issues/62)
 506| [25] 华丽的 & 符号|[试读](https://github.com/cssmagic/CSS-Secrets/issues/13)|〃|-
 507| [26] 自定义下划线|-|〃|-
 508| [27] 现实中的文字效果|-|〃|-

notes/chapter-5/503.md

@@ -0,0 +1,14 @@
+---
+title: "[注解] [503] 文本行的斑马条纹"
+issue: 61
+---
+
+## 花絮与注解
+
+#### 第 119 页 ‧ 脚注
+
+> 很多焦头烂额的开发者甚至向 CSS 工作组申请增加 `::nth-line()` 这样的伪元素，不过由于性能上的考量被拒绝了。
+
+原文的说法是 “... an `:nth-line()` pseudo-class ...”，称其为 “伪类”。
+
+但实际上如果真的有这种东西，那它应该是个 “伪元素”。

notes/chapter-5/505.md

@@ -0,0 +1,24 @@
+---
+title: "[注解] [505] 连字"
+issue: 62
+---
+
+## 花絮与注解
+
+#### 第 123 页 ‧ 标题
+
+本节的标题是 “Ligatures”。这个术语一般译作 “合字”，也译作 “连字”、“连结字” 或 “合体字”。
+
+Adobe 系列软件译作 “连笔字”。但由于 ligature 并不一定有连笔的情况，所以没有采用 “连笔字” 的译法，虽然这个译法还挺浅显的。
+
+在翻译时，最终采用了 [W3C 中文兴趣小组](https://www.w3.org/html/ig/zh/wiki/CSS3%E5%AD%97%E4%BD%93%E6%A8%A1%E5%9D%97#.E8.BF.9E.E5.AD.97.EF.BC.9A.E2.80.98font-variant-ligatures.E2.80.99.E5.B1.9E.E6.80.A7) 的译法——“连字”。
+
+#### 第 123 页 ‧ 第二个列表项
+
+> 如果当前字体不包含这个连字字符，结果就跟 “绑票字条” 一个样……
+
+为了不留下线索，绑票字条往往不是绑匪手写的，而且是各种报纸杂志上的字母拼凑成的，当然字体也是杂乱无章的。
+
+![ransom_note](https://cloud.githubusercontent.com/assets/1231359/22731226/dce6ff78-ee24-11e6-85db-4b7bc4f48b52.jpg)
+
+> <sup>（图片来源：[techmediatainment.blogspot.com](http://techmediatainment.blogspot.com/2013/03/the-end-of-newspapers-threatens.html)）</sup>