Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
阅读类 Web 应用前端技术探索
Search
Yan Shi
July 07, 2012
Programming
8
460
阅读类 Web 应用前端技术探索
第七届 D2 前端技术论坛
http://www.d2forum.org/d2/7/
Yan Shi
July 07, 2012
Tweet
Share
More Decks by Yan Shi
See All by Yan Shi
NingJS Lighting Talk
mockee
0
180
Type is Beautiful (for Hof)
mockee
3
270
Type is Beautiful
mockee
14
1.5k
转化的灵感
mockee
1
400
Web Apps and more
mockee
2
460
Other Decks in Programming
See All in Programming
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
0
180
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
270
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
410
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
10k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
100
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
8.3k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
520
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
WindowInsetsだってテストしたい
ryunen344
1
240
Discover Metal 4
rei315
2
120
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Designing Experiences People Love
moore
142
24k
Statistics for Hackers
jakevdp
799
220k
Six Lessons from altMBA
skipperchong
28
3.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Automating Front-end Workflow
addyosmani
1370
200k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
Web Reading mockee@douban 阅读类 Web 应用前端技术探索 http://bit.ly/N8lLqK
Things We Don't Talk About Native or Web App Modular
Scripts Structured App Responsive Web Design HTML5 concepts
Web Apps and more Further Reading 转化的灵感 http://bit.ly/IAhFE5 http://bit.ly/LkIZvz
read.douban.com
Vagrant
http://pypi.python.org/pypi/pyjade https://github.com/learnboost/stylus Keep things DRY Stylus
.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; }
Submit Store Reader Web App iPad App Web App Kindle
Android Web iPhone Web App Hybrid Desktop Laptop iPad
Visits Apple iPad SonyEricsson LT15i Xperia Arc Apple iPhone Apple
iPod Touch HTC S710E Incredible S
Google Analytics 2012.5 - 6
Submission System Author Editor WYS WYG
None
None
DEMO Submission System
Web Storage & Data Sync Key Points Real-time Web document
substance Collaboration etherpad Range & Selection rangy
Web Reader Typographic Web Design Intelligence Paging * punctuation compression
Widget System
Widget System Figure note title page text page Code Interacting
components
Title Page - Note
None
Code Widget Figure
Purchase tips
Fixed-Layout Reflowable Typography Adobe PDF Kindle Cloud Reader Google Books
iBook Author (landscape) Hybird Douban Web Reader
Punctuation Compression ” ’ ) 》 : , ? 、
! ; 。 “ ‘ 《 (
( “ ‘ 《 “ ‘ ( 《 ” ’
) 》 。 , 、 ; : ( latin 汉字 3
@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 ...
Font Rendering http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ Rasterization Black and white Grayscale Subpixel Windows
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”
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
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
Intelligence Paging
type page height width font-size line-height page break
Split Cross multi-pages Non-integer row height New
Blank or Float Zoom or Crop
Key Points On-demand rendering Web Worker Split paragraph / fill
height inline for ALL! hide Offline
Thx:) douban.com/people/mockee/ blog: mockee.com twitter: @mockee
[email protected]