forked from wentin/underlineJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (128 loc) · 8.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UnderlineJS - a pixel perfect javascript library for drawing underline</title>
<link rel="stylesheet" href="http://brick.a.ssl.fastly.net/EB+Garamond:400,400i/Fira+Sans:300,400,500,700">
<link type="text/css" rel="stylesheet" href="css/underline.css" />
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
<script type="text/javascript" src="js/baseline-ratio.js"></script>
<script type="text/javascript" src="js/underline.js"></script>
<script type="text/javascript" src="js/guitar-string.js"></script>
<script type="text/javascript" src="js/class.js"></script>
</head>
<body>
<header>
<div class="logoWrapper">
<img src="i/logo.svg" alt="">
</div>
<div class="links">
<a href="https://github.com/wentin/underlineJS" target="_blank" class="icon-github">Star underline.js</a>
<a href="https://github.com/wentin/underlineJS" target="_blank" href="#" class="icon-download">Download library</a><!--
<a href="#" class="icon-coffee">Buy me a coffee</a> -->
</div>
<div class="fullLogo">
<span>
underline.js
</span>
</div>
<h1>A quest to pixel-perfect underline <br>
with canvas, and music</h1>
</header>
<article>
<h2>Manifesto</h2>
<p>A javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underline</p>
<p>The goal of this project is not to succeed, but fail.</p>
<p>If one day there is absolutely no one and no reason to use underline.jes, then it reaches its ultimate goal: to fail completely. Because that means the browser has supported this feature natively. That is what this project is about, to push the W3C further in a pixel-perfect, designer-friendly route.</p>
<h2>Example</h2>
<p>
<a href="#" class="underline">http://wentin.github.io/underlineJS/</a>
<br/> Please click to see large picture. red is underline.js, green is browser default underline </p>
<img src="i/underlineJS.png" alt="">
<p>
The project is currently under dev. Contact me on twitter if you want to be part of this project!
</p>
<h2>Idea</h2>
<p>Marcin Wichary's ideal underline:</p>
<ul>
<li>change the width of the line (with additional <a href="#" class="underline">half-pixel/retina support</a>),</li>
<li>change the distance from the text,</li>
<li>change the color (even if just to simulate thinner width by using lighter grays instead of black),</li>
<li>clear the descenders,</li>
<li>(perhaps) have a separate style for visited links.</li>
</ul>
<p>In addition to these above, it should also
</p>
<ul>
<li>have no ghost pixels</li>
</ul>
<img src="i/example.png" alt="">
<p><i>GOAL Image by Marcin Wichary</i>
</p>
<h2>Logs</h2>
<p>Dec 2, 2014 <br>
start proof of concept it now works on chrome/safari! <br>
Dec 4, 2014 <br>
add approach 2, one single canvas for each element. <br>
Dec 10, 2014 <br>
finish finding descenderline with svg/js finish String class to draw underline with guitar string animation, not merged yet. start guitar string animation! Can you imagine this happen to your text underline! <br>
<a href="http://wentin.github.io/underlineJS/stringAnimation/" class="underline">http://wentin.github.io/underlineJS/stringAnimation/</a> <br>
Dec 18, 2014 <br>
demo page design
</p>
<h2>To do list</h2>
<p></p>
<ul>
<li>
firefox bug:
<br> ctx.textBaseline="top”; render just like hanging
</li>
<li>detect and deal with line break word done</li>
<li>make canvas width precise, 5px offset has to go done</li>
<li>css like setting options.</li>
<li>dynamic getting font styles done</li>
<li>round posY to .5 px done</li>
<li>underline stroke according to font stroke width done</li>
<li>retina support for ghost free underline</li>
<li>guitar sound</li>
</ul>
<h2>Contact</h2>
<p>
Follow <a href="https://twitter.com/DesignJokes" target="_blank" class="underline">@DesignJokes</a> on Twitter
<br> Email <a href="mailto:[email protected]" class="underline">[email protected]</a>
<br> Visit <a href="http://wentin.co" target="_blank" class="underline">wentin.co</a>
</p>
<h2>
Dummy text version below
</h2>
<p>
The perfect underline should be visible, but unobstrusive — allowing people to realize what’s clickable, but without drawing too much attention to itself. It should be positioned at just the right distance from the text, <a href="#" class="underline">sitting comfortably</a> behind it for when descenders want to occupy the same space:
</p>
<p>So, the ideal technological solution would allow us to:</p>
<ul>
<li>change the width of the line (with additional <a href="#" class="underline">half-pixel/retina support</a>),</li>
<li>change the distance from the text,</li>
<li>change the color (even if just to simulate thinner width by using lighter grays instead of black),</li>
<li>clear the descenders,</li>
<li>(perhaps) have a separate style for visited links.</li>
</ul>
<p>There were several roads near by, but it did not take her long to find the one paved with yellow bricks. Within a short time she was <a href="#" class="underline">walking briskly</a> toward the Emerald City, her silver shoes tinkling merrily on the hard, yellow road-bed. The sun shone bright and the birds sang sweetly, and Dorothy did not feel nearly so bad as you might think a little girl would who had been suddenly whisked away from her own country and set down in the midst of a strange land.</p>
<p>She was surprised, as she walked along, to see how pretty the country was about her. There were neat fences at the sides of the road, painted a dainty blue color, and beyond them were fields of grain and vegetables in abundance. Evidently the Munchkins were good farmers and able to raise large crops. <a href="#" class="underline">Once in a while she would pass a house, and the people came out to look at her and bow low as she went by; for everyone knew she had been the means of destroying the Wicked Witch and setting them free from bondage. The houses of the Munchkins were odd-looking dwellings, for each was round, with a big dome for a roof. All were painted blue, for in this country of the East blue was the favorite color.</a>
</p>
<blockquote>
Five years ago, building a layout <a href="#" class="underline">rendering engine</a> and building an animation engine in JavaScript was ludicrous because JavaScript is nowhere near as fast as Compiled C,” said Newcomb. “Javascript went from maybe being 1000x slower than Compiled C to 80% as fast as <a href="#" class="underline">Compiled C</a> and that was sort of the ah-ha moment for us as deep platform engineers.
</blockquote>
<p>Since the writing of that post, Apple released Safari 8.0 and Safari for iOS 8, which modifies the rendering of the venerable text-decoration: underline property to fulfill Wichary’s fourth goal by clearing the descenders. I grabbed a screenshot of Wichary’s ideal vision with the way the same word as a link is rendered in Safari 8.0:</p>
<p>You can see another example of the “native” Safari underline in the screenshot at the top of the page, from <a href="#" class="underline">The New Yorker</a> (with modified text content to illustrate descenders). Overall, the underline is much thicker than Wichary’s ideal and sits too close to the text for my comfort. But most damningly to my mind, the underline does not change weight to adapt to the weight of the font, leading to unfortunate mismatches like with the :hover style on <a href="#" class="underline">Angel List:</a></p>
</article>
<footer>
<a href="https://twitter.com/share" target="_blank" class="tweet icon-tweet">
<span>Tweet about underline.js</span>
</a><!--
<a href="#" class="next">Read Next</a> -->
<a href="#" class="next">Coming Soon</a>
<h1>Behind scenes: underline reimagined, <br>
with Math and Animation </h1>
</footer>
</body>
</html>