How can I achieve pixel-perfect positioning and spacing of textual elements across browsers?

Right now, we are trying to achieve consistent formatting of textarea 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.

Instead of using textarea (or div) elements, can we achieve pixel-perfect positioning using HTML5's canvas? Or using the Raphael JavaScript library? Or maybe some other JS library?

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 an开发者_开发问答y of the above-mentioned browsers.

(I'd prefer to avoid Flash-based solutions for the moment, unless that is the only solution...)

Send the text to the server, have the server render an image, display the image. Voilà.

I would say this is nearly impossible.

I would also say that there is no reason to have pixel perfect across all browsers because the overwhelming majority of visitors only view your site with one browser. And those who do visit your site in more than one browser (say at work and at home) are unlikely to notice elements that are off a few pixels or have slightly different border colors.

What we should be concerned about is that the content looks good in each browser.

That said, here's a great list of textarea tricks: http://css-tricks.com/6841-textarea-tricks/

One main reason that PDF exists is that browsers are not about pixel-identical layout but PDF is. Among other things, not even typefaces are guaranteed to be the same from one OS/browser to the next.

Even, if you don't let the browser position anything and you do all your own pixel level positioning, you still won't necessarily have the same fonts to work with. If you let the browser position anything, then you can have variations.

Would one solution be to begin your css with a clean slate? Give everything a known default?

For example, I start my css files like this so I always know what to expect:

*{
margin:0;
padding:0;
}

Is that what you're looking for? Similarly, you could change '*' to 'textarea'.

I'm not sure if it is possible, however one thing you may want to look into is using the web developer toolbar for firefox or the web developer add-on for chrome. There is an option to disable browser default styles. Check this and then style everything. The borders, border type, all margins, paddings, background colors, etc. Then reenable browser default styles and make sure it looks the same. If not, wash, rinse and repeat.

Also, if fonts play a part, you will have to embed them into the page since some operating systems may not have a particular font installed.