title: How can I achieve pixel-perfect positioning and spacing of textual elements across browsers?
body: <p>Right now, we are trying to achieve consistent formatting of <code>textarea</code> elements, across Safari/Chrome/Firefox/IE on Mac and Windows. I believe this may be a rabbit hole, since any combination thereof could produce formatting in a slightly different way -- maybe one combination adds a bit of padding to a div here differently than the others, another one breaks multi-line text there differently than the others, and so on.</p>
  
  <p>Instead of using <code>textarea</code> (or <code>div</code>) elements, can we achieve pixel-perfect positioning using HTML5's <code>canvas</code>? Or using the Raphael JavaScript library? Or maybe some other JS library?</p>
  
  <p>Mainly, by pixel-perfect, what I mean is any arbitrary text should get rendered in the exact same way (especially with respect to line breaks and padding) in any of the above-mentioned browsers.</p>
  
  <p>(I'd prefer to avoid Flash-based solutions for the moment, unless that is the <em>only</em> solution...)</p>