如何在浏览器中实现像素完美的文本元素定位和间距？ [英] How can I achieve pixel-perfect positioning and spacing of textual elements across browsers?

问题描述

目前，我们正试图在Mac和Windows上的Safari / Chrome / Firefox / IE中实现 textarea 元素的一致格式化。我相信这可能是一个兔子洞，因为它的任何组合都可能以稍微不同的方式产生格式 - 也许一个组合在这里为div添加一些填充不同于其他组合，另一个组合在那里打破多行文本不同于其他，等等。

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.

而不是使用 textarea （或 div ）元素，我们可以使用HTML5的 canvas 实现像素完美定位吗？或者使用Raphael JavaScript库？或者也许是其他一些JS库？

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 any of the above-mentioned browsers.

（我宁愿暂时避免使用基于Flash的解决方案，除非那是只有解决方案......）

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

推荐答案

将文本发送到服务器，让服务器渲染图像，显示图片。 Voilà。

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

这篇关于如何在浏览器中实现像素完美的文本元素定位和间距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！