-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
362 lines (359 loc) · 21.8 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>jSlabify – a jQuery plugin for creating slabbed typography</title>
<link href="./css/jSlabify.css" rel="stylesheet" type="text/css" />
<!-- demo styles inline -->
<style>
@font-face {
font-family: 'LeagueGothicRegular';
src: url('font/League_Gothic-webfont.eot');
src: url('font/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('font/League_Gothic-webfont.woff') format('woff'),
url('font/League_Gothic-webfont.ttf') format('truetype'),
url('font/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
html,
body {
background:#fcfcfc;
color:#444;
}
body {
font: 16px/1.8 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
width:80%;
padding:20px 0;
max-width:960px;
margin:0 auto;
}
/* http://css-tricks.com/simple-styles-for-horizontal-rules/ */
hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
.col-1 {
width:47.5%;
margin:0 2.5% 0 0;
float:left;
}
.col-2 {
width:47.5%;
margin:0 0 0 2.5%;
float:left;
}
.col-1 p,
.col-2 p {
color:#888;
font-size:80%;
text-align:center;
}
a {
color:#111;
}
h1 a {
text-decoration:none;
}
h1 a:hover {
color:#a82222;
}
p {
margin:0 0 1.5em 0;
line-height:1.5em;
}
dt {
font-family:monospace;
}
pre {
line-height:1.2;
}
footer {
border-top:3px double #aaa;
padding-top:1em;
}
footer section {
border-bottom:3px double #aaa;
padding-bottom:1em;
margin-bottom:1em;
}
sup a {
text-decoration:none;
}
#h4 {
clear:both;
}
.amp {
font-family:Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif;
font-style:italic;
font-weight:lighter;
}
/* Set font-sizes for the headings to be given the jSlabify treatment */
h1 {
text-align:left;
font-family:'LeagueGothicRegular', "Impact", Charcoal, Arial Black, Gadget, Sans serif;
text-transform: uppercase;
line-height:1;
color:#222;
font-size:300%;
/* Remember to set the correct font weight if using fontface */
font-weight:normal;
}
/* Smaller font-size for the side-by-side demo */
.col-1 h1,
.col-2 h1 {
font-size: 32px;
}
h2 {
font-size: 25px;
}
/* Adjust the line-height for all headlines that have been given the
jSlabify treatment. Use a unitless line-height to stop sillyness */
.slabified h1 {
line-height:.9;
}
/* Target specific lines in the preset Studio One demo */
.slabified #studio-one span:nth-child(2) {
line-height:.8;
}
.slabified #studio-one span:nth-child(3) {
line-height:1.1;
}
/* Fun with media queries - resize your browser to view changes. */
@media screen and (max-width: 960px) {
body {
padding:10px 0;
min-width:20em;
}
.col-1,
.col-2 {
float:none;
margin:0;
width:100%;
}
h1 {
font-size:36px;
}
h2 {
font-size:22px;
}
}
@media screen and (max-width: 460px) {
h1 {
font-size:26px;
}
h2 {
font-size:18px;
}
}
</style>
<!--[if lte IE 7]>
<style>
body {
width:960px;
margin:0 auto;
}
</style>
<![endif]-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1 id="h1">jSlabify – a jQuery plugin for creating slabbed typography</h1>
<center>
<h2><a href="livedemo.html">Try the New Live Demo!</a></h2>
<h2><a href="partialslabdemo.html">Partial Pre-Slabbing Demo</a></h2>
</center>
<p>
I ran across Brian McAllister's <a href="http://www.frequency-decoder.com/demo/slabText/">slabtext</a> jQuery plugin,
and was immediately taken by the concept of algorithmically slabbing text. That, of course, led me to Erik Loyer's
<a href="http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/">slabtype algorithm</a>.
After taking a close look at the algorithm, It seemed a bit complicated to me. The algorithm first creates an optimal
slab, based on the width of the box and the font-size of the container, then resizes the result to match the height of
the container. The end result has the potential to create very sub-optimal slabs, when height is a factor.
</p>
<p>
I redesigned the slabbing algorithm, at the cost of a few CPU cycles, to produce a much more optimized slab, when the
container height is known. Rather than basing the slabbing algorithm on font-size and a magic ratio, jSlabify bases its
slabs on comparing proportions. It renders the text as a single line, and captures the dimensions and the area, in
characters, of the resulting box. Then, it calculates the height, in characters (read: row count), necessary
to contain the same area (read: number of characters) in a box proportional to the container. The relevant formula is:
<center><img src="graphics/eqn.gif" alt=""/></center>
</p>
<h2 id="h3">Calculated and preset word combinations</h2>
<p>While the script does an admirable job at automating the creation of the individual rows, there are certainly situations in which you would choose to control the word combinations used to split the headline.</p>
<p>This can be achieved by presetting the word combinations (using <code><span class="slabbedtext"></code> wrappers) within the markup<sup><a href="#fn1" id="r1">[1]</a></sup>. Should the script detect that the headline has been preset, it will not attempt to dynamically create the word combinations and simply fallback to resizing the preset rows to fit the available horizontal space.</p>
<p>Adding the <code>span</code> elements to the page markup in this way gives you absolute control over the word combinations used to split the headline text and also enables the targetting of specific rows within the CSS (in order to tweak the line height, change the font family etc).</p>
<p>Presetting the headline does have its drawbacks though – at smaller sizes and if the rows have wildly varying letter-counts, jagged right edges may be displayed. The script will adjust the <code>word-spacing</code> or <code>letter-spacing</code> in an attempt to rectify over-shoots or under-shoots in line length like this.</p>
<p>The following demo showcases two versions of the same headline, the first has rows (word combinations) dynamically calculated by the script while the second has rows preset within the markup (and therefore only resized-to-fit by the script).</p>
<div class="col-1">
<p>The following word combinations are calculated by the script</p>
<h1>For one night only Jackie Mittoo with special Studio One guests Dillinger & Lone Ranger</h1>
</div>
<div class="col-2">
<p>The following word combinations are preset within the markup</p>
<h1 id="studio-one"><span class="slabbedtext">For one night only</span> <span class="slabbedtext">Jackie Mittoo</span> <span class="slabbedtext">with special Studio One guests</span> <span class="slabbedtext">Dillinger & Lone Ranger</span></h1>
</div>
<h2 id="h4">Headers containing links</h2>
<p>If the original header contains a link (or should itself have an href set), the generated spans will be wrapped in a link that uses the same href.</p>
<h2 id="h5">Being responsibly responsive</h2>
<p>You may wish to remove the jSlabify treatment entirely should either the viewport or the header element resize to below a certain, predefined width; for example, if the viewport width drops to below 380 pixels. This can be achievied by using the <code>viewportBreakpoint</code> and <code>headerBreakpoint</code> plugin options, <a href="#h6">detailed below</a>.</p>
<p>This demo page has set <code>viewportBreakpoint</code> to be 380 pixels. Resizing the browser window to anything below this should remove the jSlabify treatment from the headlines altogether.</p>
<h2 id="h7">Plugin options</h2>
<p>The following options can currently be passed to the plugin. The first three listed (<code>fontRatio</code>, <code>forceNewCharCount</code> and <code>wrapAmpersand</code>) are only used whenever the plugin has to dynamically create the word combinations i.e. if <code><span class="slabbedtext"></code> elements are <em>not</em> already present within the markup.</p>
<dl>
<dt>targetFont</dt>
<dd>A Boolean value that instructs the script to set the base font-size of the slab based on the font-size of the container if (TRUE) or on the proportions of the container (FALSE). Defaults to FALSE.</dd>
<dt>fontZoom</dt>
<dd>A Floating Point value that, when targetFont is TRUE, enlarges the slab's base font-size by this multiplier. Defaults to 1.</dd>
<dt>constrainHeight</dt>
<dd>A Boolean value that instructs the script to resize the completed slab, if its height is greater than the container's height or the proportional height set by slabRatio. Defaults to FALSE.</dd>
<dt>fixedHeight</dt>
<dd>A Boolean value that instructs the script to set the ideal slab height as the height of the container. Defaults to FALSE.</dd>
<dt>slabRatio</dt>
<dd>A Floating Point value that , if fixedHeight is FALSE, defines the ideal slab height, based on the slab width. Defaults to 1</dd>
<dt>hCenter</dt>
<dd>A Boolean value that instructs the script to horizontally center the slab within the container. Defaults to FALSE.</dd>
<dt>vCenter<dt>
<dd>A Boolean value that instructs the script to vertically center the slab within the container. Defaults to FALSE.</dd>
<dt>forceNewCharCount</dt>
<dd>A Boolean value that instructs the script to recalculate the ideal number of “characters per line” and reinsert the spans every time the resize event fires (TRUE) or only whenever the parent containers <code>font-size</code> changes (FALSE). Setting this value to FALSE will inevitably save CPU cycles but is only really of use in modern browsers that respond to media queries (or older browsers have been patched to respond to media queries). Defaults to TRUE.</dd>
<dt>wrapAmpersand</dt>
<dd>A Boolean value that instructs the script to wrap ampersands (&) in a <code><span class="amp"></code> (TRUE) or not (FALSE). Defaults to TRUE.</dd>
<dt>maxFontSize</dt>
<dd>An Integer value that indicates the maximum pixel font-size that the script can set. Defaults to 999.</dd>
<dt>viewportBreakpoint</dt>
<dd>An Integer value that indicates the minimum pixel width the viewport may have before the jSlabify treatment is removed. There is no default value.</dd>
<dt>headerBreakpoint</dt>
<dd>An Integer value that indicates the minimum pixel width the header may have before the jSlabify treatment is removed. There is no default value.</dd>
<dt>noResizeEvent</dt>
<dd>A Boolean value that instructs the script to ignore the <code>window.resize</code> event (TRUE) or not (FALSE). Useful for those of you using a fixed width layout. Defaults to FALSE.</dd>
<dt>resizeThrottleTime</dt>
<dd>An Integer value that indicates the number of milliseconds the <code>window.resize</code> will be throttled to. Defaults to 300.</dd>
<dt>precision</dt>
<dd>An Integer value that indicates the decimal precision to use when setting the CSS values <code>line-height</code>, <code>word-spacing</code> and <code>font-size</code>. Defaults to 3.</dd>
<dt>postTweak</dt>
<dd>A Boolean value that instructs the script to tweak the lineheight or word spacing after the fontsize calculation has been run (TRUE) or not (FALSE). Defaults to TRUE.</dd>
<dt>minWordSpace</dt>
<dd>An Integer value that sets the minimum spacing between words, as a factor of the width of a standard space. Defaults to 0.4.</dd>
<dt>maxWordSpace</dt>
<dd>An Integer value that sets the maximum spacing between words, as a factor of the width of a standard space. Defaults to 3.</dd>
<dt>maxLetterSpace</dt>
<dd>An Integer value that sets the maximum spacing between letters, as a factor of the width of a standard space. Defaults to 1.5.</dd>
<dt>minCharsPerLine</dt>
<dd>An optional Integer value that indicates the minimum number of characters to set per line. Headlines that have a character count smaller than this value are not given the jSlabified treatment.</dd>
</dl>
<p>It’s also worth noting that any non-breaking space character used to prevent widowed words within the original, non-adjusted headline will also be included within the adjusted headline.</p>
<h2 id="h8">A note on the CSS</h2>
<p>The plugin requires the following CSS rules are made available:</p>
<pre><code>.slabified .slabbedtext
{
display:-moz-inline-box;
display:inline-block;
white-space:nowrap;
}
.slabbedtextinactive .slabbedtext
{
display:inline;
white-space:normal;
font-size:1em !important;
letter-spacing:inherit !important;
word-spacing:inherit !important;
*letter-spacing:0 !important;
*word-spacing:0 !important;
}
.slabbedtextdone .slabbedtext
{
display:block;
}
</code></pre>
<p>The <code>span</code> elements added to the headline are given the class <code>slabbedtext</code> and the document <code>body</code> given the class <code>slabified</code>.</p>
<p>Using a double-whammy className inheritance trick like this means that you can safely add the <code><span class="slabbedtext"></code> elements into the markup but they won’t actually get styled until the script gets called and the <code>slabified</code> classname added to the <code>body</code>.</p>
<p>The <code>span</code> elements are set as <code>display:inline-block</code> during the font-size calculation. This is to take advantage of the <code>inline-block</code> shrink-wrap effect that enables the script to determine the width of each row.</p>
<p>Unfortunately, one side-effect of using <code>inline-block</code> means that the injected <code>span</code> elements react to surrounding whitespace (which, amongst other things, augments the vertical spacing between rows) – this is remedied by giving the header a classname of <code>slabbedtextdone</code> whenever the <code>font-size</code> calculation is complete, which sets a <code>display:block</code> style and avoids the whitespace and styling issues associated with <code>inline-block</code>.</p>
<p>Sharp-eyed readers may have noticed that the value of zero is passed to Internet Explorer using the star-hack. This is because IE < 8 doesn’t understand the <code>inherit</code> property and so we reset to zero as a failsafe.</p>
<p>The CSS file is miniscule though and you may be better off pasting the contents of the minified version bundled with the download into your main CSS file to avoid an unnecessary HTTP request.</p>
<h2 id="h9">Buyer beware</h2>
<p>Here are a few things to remember when using the plug-in:</p>
<ol>
<li>Headlines with lots of horizontal space to fill are more gracefully displayed across browsers.</li>
<li>Headlines with little horizontal space tend to have jagged right edges, especially if the rows have been preset within the markup and each row has a wildly varying letter-count. Firefox appears to be the best at resizing-to-fit the word combinations and some fonts tend to be better than others at being resized-to-fit.</li>
<li>The element to be given the jSlabify treatment has its (inner)HTML replaced entirely (by using the jQuery <code>.html</code> method), which means that all images and links contained within will disappear without a trace.</li>
<li>Unlike the original <a href="http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/">slabtype algorithm</a>, vertical space is not taken into consideration at all.</li>
<li>I’ve no idea how the script behaves in a right-to-left environment.</li>
<li>If the header contains multiple links, only the first link located is taken into account.</li>
<li>Internet Explorer 6, due to its non-support of <code>inline-block</code>, cannot scale <em>down</em> the text when the browser viewport is reduced in width. This will not be an issue if you serve a fixed width design to IE6 and fluid width design to other, more capable browsers.</li>
<li>Internet Explorer < 8 does not support the CSS value of <code>inherit</code> which means that the <code>letter-spacing</code> and <code>word-spacing</code> have to get reset to zero whenever the jSlabify treatment is removed by the script.</li>
<li>Always call the script <em>after</em> all <code>fontface</code> fonts have downloaded. I’ve hacked this for the demo to enable you to see the headline transformation as the script kicks-in but you should always use google WebFont loaders <code>active()</code> and <code>inactive()</code> callbacks to launch the jSlabify treatment (or a similar "font loaded" callback feature from another font provider).</li>
</ol>
<h2 id="h10">Credit where credit is due</h2>
<p>Based on the nice, shiny <a href="http://fittextjs.com/">fittext</a> jQuery plugin by <a href="http://paravelinc.com/">Paravel</a> & the wonderful <a href="http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/">slabtype algorithm</a> by Erik Loyer. Zach Leatherman has also written a jQuery plugin named <a href="http://www.zachleat.com/web/bigtext-makes-text-big/">BigText</a> with similar but not exact functionality which is well worth a visit.</p>
<h2 id="h11">Grab the code</h2>
<p>The code can be <a href="https://github.com/gschoppe/jSlabify">downloaded from github</a>. Both minified and unminified versions are included within the bundle. The minified version currently clocks-in at 4k – this drops to around 3k when gzipped.</p>
<h2 id="h12">A few more examples</h2>
<p>As way of example, here’s a random assortment of book titles (Note: I’ve left widowed words in all of them).</p>
<!-- Yeah, yeah - multiple h1's etc. It's horrible but not the end of the world. Apologies to those offended. -->
<h1>The Sisters Brothers</h1>
<hr />
<h1>The curious incident of the dog in the night</h1>
<hr />
<h1>Something Happened</h1>
<hr />
<h1>The sad tale of the brothers Grossbart</h1>
<hr />
<h1>The Windup Girl</h1>
<hr />
<h1>When Gravity Fails</h1>
<hr />
<h1>Psychotic Reactions and Carburetor Dung</h1>
<hr />
<h1>Mortal Engines</h1>
<hr />
<h1>Mansfield Park</h1>
<hr />
<h1>The Importance of being Earnest</h1>
<hr />
<h1>The Scarlet Letter</h1>
<hr />
<h1><a href="http://en.wikipedia.org/wiki/Dracula" title="The Dracula wikipedia page">Dracula</a></h1>
<footer>
<section>
<p id="fn1"><a href="#r1">(1)</a> Of course, you can always use Javascript to inject the <code><span class="slabbedtext"></code> elements into the headline before calling the plugin – which would keep the markup squeaky clean and cruft free. Here’s a quick example of how it might be done:</p>
<pre><code>var stS = "<span class='slabbedtext'>",
stE = "</span>",
txt = [
"For one night only",
"Jackie Mittoo",
"with special Studio One guests",
"Dillinger & Lone Ranger"];
$("#myHeader").html(stS + txt.join(stE + stS) + stE).jSlabify();</code></pre>
</section>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="./js/jquery.jSlabify.js"></script>
<script>
// Function to jSlabify the H1 headings
function slabifyHeadlines() {
$("h1").jSlabify({
// Don't slabtext the headers if the viewport is under 380px
viewportBreakpoint:380,
targetFont : true,
fontZoom : 2.5
});
};
// Called one second after the onload event for the demo (as I'm hacking the
// fontface load event a bit here)
// Please do not do this in a production environment - you should really use
// google WebFont loader events (or something similar) for better control
$(window).load(function() {
// So, to recap... don't actually do this, it's nasty!
setTimeout(slabifyHeadlines, 1000);
});
</script>
</body>
</html>