阅读类 Web 应用的前端技术探索

豆瓣阅读是豆瓣近期推出的数字阅读服务，其主要涵盖的投稿系统、作品商店、阅读器构成了完整的数字出版和阅读平台。Web 阅读器作为其重要的组成部分，在前端开发中面临着诸多新的挑战，本次主题就将与大家分享有关阅读类应用的相关开发经验。

Transcript

1. Web Reading mockee@douban 阅读类 Web 应用前端技术探索 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. Web Apps and more Further Reading 转化的灵感 http://bit.ly/IAhFE5 http://bit.ly/LkIZvz
4. read.douban.com
5. Vagrant
6. http://pypi.python.org/pypi/pyjade https://github.com/learnboost/stylus Keep things DRY Stylus
7. .jade .styl article#novella( data-aid='17893' data-layout='vertical') .page .hd title .bd content .ft pagination <article id="novella" data-aid="17893" data-layout="vertical"> <div class="page"> <div class="hd">title</div> <div class="bd">content</div> <div class="ft"> pagination </div> </div> </article> vendors = webkit moz official border-radius(val) for vendor in vendors if vendor == official border-radius val else -{vendor}-border-radius val @import 'mixins/border' .btn-flat border-radius 5px .btn-flat { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
8. Submit Store Reader Web App iPad App Web App Kindle Android Web iPhone Web App Hybrid Desktop Laptop iPad
9. Visits Apple iPad SonyEricsson LT15i Xperia Arc 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. Web Storage & Data Sync Key Points Real-time Web document substance Collaboration etherpad Range & Selection rangy
16. Web Reader Typographic Web Design Intelligence Paging * punctuation compression Widget System
17. Widget System Figure note title page text page Code Interacting components
18. Title Page - Note
20. Code Widget Figure
21. Purchase tips
22. Fixed-Layout Reflowable Typography Adobe PDF Kindle Cloud Reader Google Books iBook Author (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 text-justify: inter-ideograph hyphens: auto http://caniuse.com/css-hyphens IE 10+ Firefox 6+ Safari 5.1+, iOS 4.2+ Compatibility ...
26. Font Rendering http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ Rasterization Black and white Grayscale Subpixel Windows
27. MAC OS Windows font format has a significant impact new engine TrueType PostScript grayscale(XP) GDI ClearType(Win7) DirectWrite mode (IE9) Quartz rendering engine for all browsers subpixel rendering IE 6/7/8 hinting ignore math rasterizer ref x full pixel look a bit “sticky”
28. 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. http://code.google.com/p/gdipp/ DEMO
29. https://developer.mozilla.org/en/Mozilla_MathML_Project/ http://www.mathjax.org/demos/mathml-samples/ mathematical formula SVG LaTex LaTex to MathML iOS / Android Web MathML HTML & CSS SVG
30. Intelligence Paging
31. type page height width font-size line-height page break
32. Split Cross multi-pages Non-integer row height New
33. Blank or Float Zoom or Crop
34. Key Points On-demand rendering Web Worker Split paragraph / fill height inline for ALL! hide Offline
35. Thx:) douban.com/people/mockee/ blog: mockee.com twitter: @mockee mockee@gmail.com