This document summarizes techniques for building web reading applications. It discusses using modular scripts and responsive design for building structured web apps. It also covers HTML5 concepts, web apps versus native apps, and keeping code DRY. Additionally, it provides examples of using Stylus and Jade for CSS preprocessing and templating. Key techniques discussed include range and selection, real-time collaboration, web storage, widgets, typography, font rendering, and intelligent page splitting for responsive layouts across devices.

1. Web Reading
阅读类 Web 应用前端技术探索
mockee@douban
http://bit.ly/N8lLqK

2. Things
We Don't Talk About
Native or Web App
Modular Scripts Structured App
Responsive Web Design
HTML5 concepts

3. Further Reading
Web Apps and more
http://bit.ly/IAhFE5
转化的灵感
http://bit.ly/LkIZvz

4. read.douban.com

5. Vagrant

6. Keep things DRY
Stylus
https://github.com/learnboost/stylus
http://pypi.python.org/pypi/pyjade

7. .jade .styl
article#novella( vendors = webkit moz official
data-aid='17893' border-radius(val)
data-layout='vertical') for vendor in vendors
.page if vendor == official
.hd title border-radius val
.bd content else
.ft pagination -{vendor}-border-radius val
<article @import 'mixins/border'
id="novella" .btn-flat
data-aid="17893" border-radius 5px
data-layout="vertical">
<div class="page">
<div class="hd">title</div>
<div class="bd">content</div>
<div class="ft"> .btn-flat {
pagination -webkit-border-radius: 5px;
</div> -moz-border-radius: 5px;
</div> border-radius: 5px;
</article> }

8. Submit Reader Store
Web App iPad App
Desktop
Laptop
Web App
Kindle
Android Web
iPhone Web App
iPad Hybrid

9. Apple iPad
SonyEricsson LT15i Xperia Arc
Visits Apple iPhone
Apple iPod Touch
HTC S710E Incredible S

10. Google Analytics 2012.5 - 6

11. Submission System
Author Editor
WYS WYG

14. DEMO
Submission System

15. Key Points
Range & Selection rangy
Real-time Web document
Web Storage & Data Sync
Collaboration substance etherpad

16. Web Reader
Intelligence Paging
Typographic Web Design
* punctuation compression
Widget System

17. Widget System
title page text page
Figure Code
note
Interacting components

18. Title Page - Note

20. Figure Code Widget

21. Purchase tips

22. Typography
Fixed-Layout Reflowable
Adobe PDF Kindle Cloud Reader
iBook Author Google Books
(landscape)
Hybird
Douban Web Reader

23. Punctuation Compression
“ ‘ （ 《
” ’ ） 》
， 。 、 ？ ! ;
:

24. “《 ‘（ （ ‘ 《 “
” 。 ’ ， ） 、 》;
: （ latin 汉字 3

25. @import "mixins/typography"
.content p
text-indent: 2em
word-wrap: break-word
text-align: justify
Compatibility ...
text-justify: inter-ideograph
hyphens: auto
IE 10+
Firefox 6+
Safari 5.1+, iOS 4.2+
http://caniuse.com/css-hyphens

26. Font Rendering
Rasterization
Black and white
Grayscale
Subpixel
Windows
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

27. MAC OS Windows
Quartz rendering engine font format has a
for all browsers significant impact
hinting math
subpixel rendering
look a bit “sticky”
TrueType PostScript
new engine rasterizer
ignore IE 6/7/8
ref x
full pixel grayscale(XP)
GDI ClearType(Win7)
DirectWrite mode (IE9)

28. gdipp http://code.google.com/p/gdipp/
The gdipp (codename) project is a replacement of the
Windows text render, which brings to you the effect
of text like Mac OS and Linux distributions.
DEMO

29. mathematical formula
LaTex to MathML
MathML SVG LaTex
iOS / Android
HTML & CSS
Web SVG
http://www.mathjax.org/demos/mathml-samples/
https://developer.mozilla.org/en/Mozilla_MathML_Project/

30. Intelligence Paging

31. type page
page break
width
height
line-height
font-size

32. Non-integer
row height
Cross
multi-pages
New
Split

33. Zoom or Crop
Blank or Float

34. Key Points
Web Worker inline
On-demand rendering for ALL!
Split paragraph / fill height hide
Offline

35. Thx:)
mockee@gmail.com
blog: mockee.com twitter: @mockee
douban.com/people/mockee/