Font resize concept

dabblet.css

/* Font resize concept */

/* Made after seeing a tweet about Bit Text,
   without looking how it was made.
   Treat this as a prototype, the code could be enhanced of course.
*/

body {
	font-family: Helvetica;
	/* Need it there, 'cause could be bugs on toggling */
	overflow-y: scroll;
}

.test {
	/* If left/right, change transform-origin on .inner */
	text-align: center;
}

.inner {
	display: inline-block;
	white-space: nowrap;
	transform-origin: 50% 50%;
}

dabblet.html

<div class="test">
	<span class="inner" contenteditable="true">Something nice</span>
</div>

<div class="test">
	<strong class="inner" contenteditable="true">Whatever</strong>
</div>

<div class="test">
	<span class="inner" contenteditable="true">Some long words here, hello!</span>
</div>

<hr/>

<!-- We should get a possibility to use multiple inners in one test -->
<div class="test" style="width:50%;">
	<span class="inner" contenteditable="true">Something nice at 50%</span>
</div>

<div class="test" style="width:50%;">
	<strong class="inner" contenteditable="true">Whatever</strong>
</div>

<div class="test" style="width:50%;">
	<span class="inner" contenteditable="true">Some long words here, hello!</span>
</div>

dabblet.js

function get_fs(el) {
	return parseFloat(document.defaultView.getComputedStyle(el,null)
                               .getPropertyValue('font-size'));
}

function fix_contents(el) {
	var inner = el.getElementsByClassName('inner')[0];
	// Reset the styles
	inner.style.fontSize = "1em";
	inner.style.webkitTransform = 'scale(1)';

	var initial_fs = get_fs(el);
	var modifier = el.offsetWidth / inner.offsetWidth;
	var new_fs = initial_fs * modifier;
	inner.style.fontSize = new_fs + "px";

	// If browser don't support fractional font-size,
	// then round the font-size down and resize
	// using transform, if possible
	if (get_fs(inner) % 1 === 0 ) {
		inner.style.fontSize = Math.floor(new_fs) + "px";
		modifier = el.offsetWidth / inner.offsetWidth;
		inner.style.webkitTransform = 'scale(' + modifier + ')';
	}
	
}

var els = document.getElementsByClassName('test');

function check_size() {
	console.log(arguments);
	Array.prototype.forEach.call(els, fix_contents);
}

check_size();

window.onresize = function(event) {
	check_size();
}

// Events for contenteditable, not that needed anyway
Array.prototype.forEach.call(els, add_edit_listener);

function add_edit_listener(el) {
	// Should fix it to use the function that would check
	// only the changed element, not all of them.
	if (el.addEventListener) {
    	el.addEventListener("input", check_size, false);
	    el.addEventListener("DOMNodeInserted", check_size, false);
    	el.addEventListener("DOMNodeRemoved", check_size, false);
	    el.addEventListener("DOMCharacterDataModified", check_size, false);
	}
}

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}