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
280
Type is Beautiful
mockee
14
1.5k
转化的灵感
mockee
1
410
Web Apps and more
mockee
2
460
Other Decks in Programming
See All in Programming
実践AIチャットボットUI実装入門
syumai
7
2.4k
dynamic!
moro
9
6.3k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
3
400
Catch Up: Go Style Guide Update
andpad
0
160
CSC305 Lecture 03
javiergs
PRO
0
230
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
760
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3k
CSC305 Lecture 01
javiergs
PRO
1
400
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
480
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
170
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
330
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A better future with KSS
kneath
239
17k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Facilitating Awesome Meetings
lara
56
6.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing for humans not robots
tammielis
254
25k
Typedesign – Prime Four
hannesfritz
42
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Why Our Code Smells
bkeepers
PRO
339
57k
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]