Single-word text reader

gistfile1.js

function syl(word) {
  word = word.toLowerCase();
  if(word.length <= 3) return 1;
  if(word.search(/\d/) != -1) return Math.floor(word.length/3);
  word = word.replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
  word = word.replace(/^y/, '');
  return word.match(/[aeiouy]{1,2}/g).length;
};
$('body').append('<div id="readdiv" style="padding:20px; font-size:30px; font-family:arial; width:600px; line-height:80px; position:fixed; top:20px; left:50%; margin-left:-300px; background-color:white;"></div>');
$readdiv = $('#readdiv');

var arr, prev='';

$("div").on('mouseover', function(e){
	e.stopPropagation();
	this.style.border='red solid 1px'
});
$("div").on('mouseout', function(){
	this.style.border='none'
});

$('div').on('click', function(e){
	e.stopPropagation();
	arr = $(this).text().split("\n").join(" ").split(" ");
	read();
})

String.prototype.width = function(font) {
  var f = font || '30px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

function read() {
	if(arr.length) {
		var word = arr.shift();
		var syls = syl(word);

		if(word.search(/[.,!;:?]("|'|\))?$/)!=-1) {
			syls += 2;
		}

		//get the middle syllable
		var middle = Math.floor(word.length/2);
		var pre = word.slice(0,middle-1);
		var mid = word.slice(middle-1,middle);
		var post = word.slice(middle);

		//we want the middle at say 100px;
		var preWidth = pre.width();

		var html = '<div style="margin-left:'+(280 - preWidth)+'px">'+pre+'<font color="red">'+mid+'</font>'+post+'</div>';
		console.log(html);
		$readdiv.html(html);
		setTimeout(read, Math.sqrt(syls) * 100);
	}
}