Untitled

<style type="text/css">
/*EagleBold.otf*/
textarea {width:45%;height:10em;}
.chr {
  display:inline-block;width:100px;height:100px;overflow:hidden;
  font-family: "EagleBold", serif;font-size:600%;text-align:center;
}
.odd {color:#fff;background-color:#000;}
</style>
<script type="text/javascript">
function foo() {
  var out = document.getElementById('out');
  var chr = document.getElementById('inn').value;

  if(document.getElementById('lines').checked) chr = chr.replace(/[\r\n]/g,' ')
  if(document.getElementById('spaces').checked) chr = chr.replace(/ /g,'')
  if(document.getElementById('other').checked) chr = chr.replace(/[^a-z0-9 \r\n]/ig,'')
  chr = chr.replace(/ /g,'\u00A0');

  var txt = '';
  var lines = 0;
  var letters = 0;
  for(var i=0;i<chr.length;i++) {
    var odd = (letters % 2 == lines % 2) ? ' odd' : '';
    if(chr[i] == '\n') {
      txt += '<div></div>';
      lines ++;
      letters = 0;
    } else if(chr[i] != '\r') {
      txt += '<div class="chr' + odd + '">' + chr[i] + '</div>';
      letters ++;
    }
  }
  out.innerHTML = txt;
}

</script>
</head>
<body>

<input type="button" onclick="foo();" value="foo"/> remove:
<input type="checkbox" id="lines" onclick="foo()"/><label for="lines">newlines</label>
<input type="checkbox" id="spaces" onclick="foo()"/><label for="spaces">spaces</label>
<input type="checkbox" id="other" onclick="foo()"/><label for="other">non-alphanumerics</label>
<div><textarea id="inn" onkeyup="foo()"></textarea></div><br/>

<div id="out"></div>