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
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
XSLTで作るBrainfuck処理系
makki_d
0
210
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
ニーリーにおけるプロダクトエンジニア
nealle
0
490
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
190
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fireside Chat
paigeccino
37
3.5k
Adopting Sorbet at Scale
ufuk
77
9.4k
Rails Girls Zürich Keynote
gr2m
94
14k
Documentation Writing (for coders)
carmenintech
72
4.9k
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]