This was originally a fiddle.
It's a dumb little thing I made after seeing a poster with 'fitted' text. It take a long corpus of text, and fits all that text within a certain width on screen, creating a poster/wall of text where each line perfectly fills the width of the column.
The fiddle [http://jsfiddle.net/Jx39q/1/].
| <button id="newText">Corpus</button> | |
| <button id="refresh">Again!</button> | |
| Width: <input type="number" id="width" size="5"> | |
| Dark? <input id="theme" type="checkbox"> | |
| <span id="renderTime"></span> | |
| <div id="words"></div> | |
| <span id="sizer"></span> |
| var corpus = 'International travellers will be hardest hit passengers by cuts to the Qantas network announced today. While the airline kept to its word that the Kangaroo Route between Australia and London would survive the cull, Singapore once again gets the blunt end of the stick. Flights from Sydney and Brisbane to the Asian hub will be downgraded from Boeing 747 jumbo jets to Airbus A330 aircraft by September this year. Ageing and fuel guzzling they may be, but these jumbos were recently refitted with the same premium economy seats, lie flat beds in business class and widescreen inflight video displays as Qantas flagship Airbus A380. In their place will be smaller Airbus A330s, which are ironically newer than the wrinkled jumbos yet offer a lower grade of service.Theres no premium economy seating, robbing travellers of a budget friendly option for extra legroom and comfort on the eight hour trip. Things dont get better at the pointy end of the plane, where business travellers will find older seats which can only recline to an angle rather than stretch out to a fully flat bed. Qantas has pledged to replace the A330s sloping sleepers with its impressive new lie flat Business Suite. But with the first of these not due until the end of this year, and the fleet wide upgrade not complete until mid 2016, Singapore bound travellers will face a seat lottery through 2015 and beyond rather than being assured of a good nights sleep. Qantas will also shutter its final international route from Perth this year, axing the daily service between Perth and Singapore and directing its would-be passengers to partner Emirates or its low cost offshoots Jetstar and Jetstar Asia. Competitors Singapore Airlines and Cathay Pacific will take up the slack with their direct full service flights to Singapore and Hong Kong, while Virgin Australia stakeholder Etihad Airways will begin daily flights between Perth and its Abu Dhabi hub from July 15. Frequent flyers will probably breathe a sigh of relief that the Qantas Frequent Flyer scheme is staying in Qantas hands, with the airline holding off on putting as much as 49 per cent of the lucrative scheme onto the market. But with that stake valued at between $1.3 billion and $1.6 billion it cant be counted out as a future fundraiser for Qantas should the airline run into more headwinds down the track. International travellers will be hardest hit passengers by cuts to the Qantas network announced today. While the airline kept to its word that the Kangaroo Route between Australia and London would survive the cull, Singapore once again gets the blunt end of the stick. Flights from Sydney and Brisbane to the Asian hub will be downgraded from Boeing 747 jumbo jets to Airbus A330 aircraft by September this year. Ageing and fuel guzzling they may be, but these jumbos were recently refitted with the same premium economy seats, lie flat beds in business class and widescreen inflight video displays as Qantas flagship Airbus A380. In their place will be smaller Airbus A330s, which are ironically newer than the wrinkled jumbos yet offer a lower grade of service.Theres no premium economy seating, robbing travellers of a budget friendly option for extra legroom and comfort on the eight hour trip. Things dont get better at the pointy end of the plane, where business travellers will find older seats which can only recline to an angle rather than stretch out to a fully flat bed. Qantas has pledged to replace the A330s sloping sleepers with its impressive new lie flat Business Suite. But with the first of these not due until the end of this year, and the fleet-wide upgrade not complete until mid 2016, Singapore bound travellers will face a seat lottery through 2015 and beyond rather than being assured of a good nights sleep. Qantas will also shutter its final international route from Perth this year, axing the daily service between Perth and Singapore and directing its would-be passengers to partner Emirates or its low cost offshoots Jetstar and Jetstar Asia. Competitors Singapore Airlines and Cathay Pacific will take up the slack with their direct full service flights to Singapore and Hong Kong, while Virgin Australia stakeholder Etihad Airways will begin daily flights between Perth and its Abu Dhabi hub from July 15. Frequent flyers will probably breathe a sigh of relief that the Qantas Frequent Flyer scheme is staying in Qantas hands, with the airline holding off on putting as much as 49 per cent of the lucrative scheme onto the market. But with that stake valued at between $1.3 billion and $1.6 billion it cant be counted out as a future fundraiser for Qantas should the airline run into more headwinds down the track. International travellers will be hardest hit passengers by cuts to the Qantas network announced today. While the airline kept to its word that the Kangaroo Route between Australia and London would survive the cull, Singapore once again gets the blunt end of the stick. Flights from Sydney and Brisbane to the Asian hub will be downgraded from Boeing 747 jumbo jets to Airbus A330 aircraft by September this year. Ageing and fuel guzzling they may be, but these jumbos were recently refitted with the same premium economy seats, lie flat beds in business class and widescreen inflight video displays as Qantas flagship Airbus A380. In their place will be smaller Airbus A330s, which are ironically newer than the wrinkled jumbos yet offer a lower grade of service.Theres no premium economy seating, robbing travellers of a budget friendly option for extra legroom and comfort on the eight hour trip. Things dont get better at the pointy end of the plane, where business travellers will find older seats which can only recline to an angle rather than stretch out to a fully flat bed. Qantas has pledged to replace the A330s sloping sleepers with its impressive new lie-flat Business Suite. But with the first of these not due until the end of this year, and the fleet-wide upgrade not complete until mid 2016, Singapore bound travellers will face a seat lottery through 2015 and beyond rather than being assured of a good nights sleep. Qantas will also shutter its final international route from Perth this year, axing the daily service between Perth and Singapore and directing its would-be passengers to partner Emirates or its low cost offshoots Jetstar and Jetstar Asia. Competitors Singapore Airlines and Cathay Pacific will take up the slack with their direct full service flights to Singapore and Hong Kong, while Virgin Australia stakeholder Etihad Airways will begin daily flights between Perth and its Abu Dhabi hub from July 15. Frequent flyers will probably breathe a sigh of relief that the Qantas Frequent Flyer scheme is staying in Qantas hands, with the airline holding off on putting as much as 49 per cent of the lucrative scheme onto the market. But with that stake valued at between $1.3 billion and $1.6 billion it cant be counted out as a future fundraiser for Qantas should the airline run into more headwinds down the track. International travellers will be hardest hit passengers by cuts to the Qantas network announced today. While the airline kept to its word that the Kangaroo Route between Australia and London would survive the cull, Singapore once again gets the blunt end of the stick. Flights from Sydney and Brisbane to the Asian hub will be downgraded from Boeing 747 jumbo jets to Airbus A330 aircraft by September this year. Ageing and fuel guzzling they may be, but these jumbos were recently refitted with the same premium economy seats, lie flat beds in business class and widescreen inflight video displays as Qantas flagship Airbus A380. In their place will be smaller Airbus A330s, which are ironically newer than the wrinkled jumbos yet offer a lower grade of service.Theres no premium economy seating, robbing travellers of a budget friendly option for extra legroom and comfort on the eight-hour trip. Things dont get better at the pointy end of the plane, where business travellers will find older seats which can only recline to an angle rather than stretch out to a fully flat bed. Qantas has pledged to replace the A330s sloping sleepers with its impressive new lie flat Business Suite. But with the first of these not due until the end of this year, and the fleet-wide upgrade not complete until mid 2016, Singapore bound travellers will face a seat lottery through 2015 and beyond rather than being assured of a good nights sleep. Qantas will also shutter its final international route from Perth this year, axing the daily service between Perth and Singapore and directing its would-be passengers to partner Emirates or its low cost offshoots Jetstar and Jetstar Asia. Competitors Singapore Airlines and Cathay Pacific will take up the slack with their direct full service flights to Singapore and Hong Kong, while Virgin Australia stakeholder Etihad Airways will begin daily flights between Perth and its Abu Dhabi hub from July 15. Frequent flyers will probably breathe a sigh of relief that the Qantas Frequent Flyer scheme is staying in Qantas hands, with the airline holding off on putting as much as 49 per cent of the lucrative scheme onto the market. But with that stake valued at between $1.3 billion and $1.6 billion it cant be counted out as a future fundraiser for Qantas should the airline run into more headwinds down the track.'.split(' '); | |
| $('body').addClass('light'); | |
| var white = true, | |
| shades = 6, | |
| $szr = $('#sizer'), | |
| $wrds = $('#words'), | |
| spaces = {}, | |
| words = {}, | |
| lines = [], | |
| min = 10, | |
| max = 35, | |
| width = window.innerWidth - 10; | |
| $szr.html(' '); | |
| for (var i = min*2-2; i <= max*2+2; i++) { | |
| $szr.css('font-size', i/2); | |
| spaces[i/2] = $szr.width(); | |
| } | |
| for (i = 0; i < corpus.length; i++) { | |
| words[corpus[i]] = {}; | |
| } | |
| function textSize(wordIdx,s) { | |
| if (!words[corpus[wordIdx]][s]) { | |
| $szr.text(corpus[wordIdx]) | |
| .css('font-size', s); | |
| words[corpus[wordIdx]][s] = $szr.width(); | |
| } | |
| return words[corpus[wordIdx]][s]; | |
| } | |
| function fitText(seed, wordIdx) { | |
| var keepIdx = wordIdx, | |
| bestFit = []; | |
| range = 5; | |
| if (seed > max-range) seed = max-range; | |
| if (seed < min+range) seed = min+range; | |
| var rangeMin = seed-range, | |
| rangeMax = seed+range; | |
| for (var i = rangeMin*2; i < rangeMax*2; i++) { | |
| var total = 0, | |
| space = spaces[i/2], | |
| curr = [], | |
| widths = []; | |
| wordIdx = keepIdx; | |
| while (total-space < width && corpus[wordIdx]) { | |
| total += textSize(wordIdx, i/2) + space; | |
| curr.push(corpus[wordIdx]); | |
| wordIdx += 1; | |
| } | |
| bestFit.push({i:wordIdx, s:i/2, w:total-space, l:curr.join(' ')}); | |
| } | |
| bestFit.sort(function(a,b) { | |
| return a.w - b.w; | |
| }); | |
| return bestFit[0]; | |
| } | |
| $('#width').change(function() { | |
| var w = parseInt(this.value); | |
| if (!isNaN(w)) | |
| width = w; | |
| this.value = width; | |
| }).val(width); | |
| $('#newText').click(function() { | |
| var text = prompt('Enter new text. Something lengthy, but not too long', corpus.join(' ')); | |
| if (text) { | |
| corpus = text.split(' '); | |
| words = {}; | |
| for (i = 0; i < corpus.length; i++) { | |
| words[corpus[i]] = {}; | |
| console.log('chk', i); | |
| } | |
| $('#refresh').click(); | |
| } | |
| }); | |
| $('#theme').change(function() { | |
| $('body').toggleClass('dark light'); | |
| }); | |
| $('#refresh').click(function() { | |
| $wrds.html(''); | |
| lines = []; | |
| var start = +new Date(); | |
| for (var i = 0; i < corpus.length; i++) { | |
| var size = Math.floor(Math.random()*(max-min)*2+min*2)/2; | |
| var shade = Math.floor(Math.random()*shades); | |
| var r = fitText(size, i); | |
| i = r.i; | |
| i--; | |
| var scale = width/r.w; | |
| if (scale > 1.03 || scale < 0.97) scale = 1; | |
| //-moz-transform:scale('+scale+');-webkit-transform:scale('+scale+'); | |
| lines.push('<div id="ln_'+lines.length+'" class="shade_'+shade+'" style="line-height:'+r.s*0.83+'px;font-size:'+r.s+'px">'+r.l+'</div>'); | |
| } | |
| $wrds.append(lines.join('')); | |
| $wrds.find('div').each(function(i) { | |
| var el = this; | |
| var realWidth = el.getBoundingClientRect().width; | |
| var scale = width/realWidth; | |
| if (scale > 1.03 || scale < 0.97) scale = 1; | |
| el.style.webkitTransform = 'scale('+scale+')'; | |
| el.style.MozTransform = 'scale('+scale+')'; | |
| setTimeout(function() { | |
| el.className += ' show'; | |
| },i*40); | |
| }); | |
| $('#renderTime').text('Render time: ' + (+new Date() - start) + 'ms'); | |
| }).click(); |
| *:not(#sizer) { | |
| -webkit-transition: all 100ms ease-out; | |
| -moz-transition: all 100ms ease-out; | |
| -o-transition: all 100ms ease-out; | |
| transition: all 100ms ease-out; | |
| -webkit-transform-origin:0; | |
| -moz-transform-origin:0; | |
| } | |
| body { font-family:HelveticaNeue,Helvetica; font-size:12px; margin:5px; } | |
| #sizer, #words div { display:inline-block; white-space:nowrap; font-family:HelveticaNeue-UltraLight,Helvetica; text-transform:uppercase; } | |
| #sizer { visibility:hidden; position:absolute; left:-100em; } | |
| button { margin-bottom:10px; } | |
| #width { width:5em; } | |
| #words * { | |
| opacity:0; | |
| } | |
| #words .show { opacity:0.5; } | |
| body.dark { background:#333; color:white; } | |
| .light .shade_0 { color:#333; } | |
| .light .shade_1 { color:#444; } | |
| .light .shade_2 { color:#555; } | |
| .light .shade_3 { color:#666; } | |
| .light .shade_4 { color:#777; } | |
| .light .shade_5 { color:#888; } | |
| .dark .shade_0 { color:#ccc; } | |
| .dark .shade_1 { color:#bbb; } | |
| .dark .shade_2 { color:#aaa; } | |
| .dark .shade_3 { color:#999; } | |
| .dark .shade_4 { color:#888; } | |
| .dark .shade_5 { color:#777; } |