主流浏览器的亚像素精度现状如何？

Posted 2023-02-16

【中文标题】主流浏览器的亚像素精度现状如何？

【英文标题】：What is the current state of sub-pixel accuracy in the major browsers?

【发布时间】：2012-09-07 13:42:39

【问题描述】：

我正在开发一个需要高精度的绘图应用程序，我想知道哪个主要浏览器平台（包括 html Canvas 元素和 Flash）提供最佳的亚像素布局精度，无论是绘制元素（Canvas 或 Flash 中的矩形，浏览器中绝对定位的 DIV）和文本。

在这个网站和其他网站上都有很多与此相关的帖子（见底部列表），但很多都是相当老的，没有一个能概括当前的情况。

我的理解是Flash原生支持亚像素定位，使用twips将对象定位到二十分之一像素，而当使用TextLayoutFramework时，这种精度也延伸到了文字。但是，至少有一份报告称这在 Chrome 中无法正常工作。谁能证实这一点？

我对浏览器情况的理解是，Firefox 14+ 在页面布局和画布内都支持文本和绘制元素的亚像素定位，但我无法确定这有多准确。

我了解 Chrome（从 v21 开始）根本不支持亚像素定位。

我了解 IE9 不支持亚像素定位，但从下面链接的 MS 博客文章中可以看出 IE10 支持。

我不知道这是否有任何 Mac/PC 差异，我也不知道 Flash 的准确性是否因平台和/或浏览器而异。

我理解这样一个概括性的问题可能会引起一些争论，但我相信这已经足够具体，可以让人们提供有用的答案，并希望这个帖子可以作为目前定位精度状态的参考。

一些参考资料：

http://blogs.msdn.com/b/ie/archive/2012/02/17/sub-pixel-rendering-and-the-css-object-model.aspx

Sub-pixel rendering in Chrome Canvas

http://johnblackburne.blogspot.co.uk/2011/11/twips.html

http://ejohn.org/blog/sub-pixel-problems-in-css/

Sub Pixel CSS positioning

https://productforums.google.com/forum/?fromgroups=#!topic/chrome/pRt3tiVIkSI

【问题讨论】：

是的，为了使事情更复杂，我应该补充一点：与什么相比准确？我正在寻找与 Adob​​e PDF 或 InDesign 中提供的渲染匹配（没有连字符和段落组合，涉及文本），Flash 布局和 TLF 匹配得很好，但哪些浏览器似乎不太能到（至少这是我迄今为止的研究表明的）。

好吧，我不愿意为此提供赏金，因为尽管引起了很多关注，但我还没有了解到有关不同平台准确性的一个具体事实。虽然下面的两个答案都有帮助，但都没有真正抓住主题。我有一些自己的研究要添加到该主题中，但目前没有时间写出来，所以我会让自动奖励顺其自然，也许会在元数据上添加一些关于制作赏金系统的内容更灵活。

【参考方案1】：

简答： 不，这是不可能的/记录在案的。 即使通过实验确定，也不能保证将来保持不变。

长答案： 在亚像素精度下，浏览器/操作系统/硬件之间在如何捕获/渲染输入方面存在很大差异。在大多数现代浏览器上启用硬件加速后，在不同操作系统上运行不同浏览器的不同 PC 之间的渲染存在大量差异。如此之多，甚至可以通过略有不同的variations in the rendered output of a common sample 来识别每个唯一用户。

与其担心底层框架的差异，不如将绘图应用程序的 UI 设计为独立于这些问题。我现在能想到的几种方法是：

允许在缩放/放大级别编辑图像。

为元素设计一种对齐网格的方法。

更新： “缩放”操作将是您的自定义实现，而不是底层框架的功能。因此，如果您需要 1/10 像素的亚像素精度，则需要将 10x_zoom() 实现为您的网络应用程序的一部分，该应用程序将从

第一个像素 --> (0,0) 处 10x10 像素， 第二个像素 --> 从 (11,11) 开始的 10x10 像素。

这样一来，人们可以对数据有一个非常放大的视图，但是框架很高兴地没有意识到这一切，并且可以精确地渲染到屏幕像素（在我们的例子中，现在是图像像素的 1/10）。

另外需要注意的是，如果一次对整个图像执行此操作会消耗大量内存。因此，仅对“缩放窗口”中图像的可见部分执行此操作会更快且内存占用更少。

一旦在您的绘图网络应用程序中实现，框架中的亚像素不准确性可能不会成为用户的问题，因为他始终可以切换到这些模式并提供准确的输入。

【讨论】：

任何有设计绘图应用经验的人，请随意添加您最喜欢的方法来捕捉准确的输入...

缩放的问题在于，这正是出现亚像素不准确的时候。如果我有一张在 Photoshop 或 Illustrator 中创建的图像，该图像被放置在 0,0 的文档中并设置为 14.42 像素宽（或者，更常见的是，以点或厘米为单位的值计算为这样的像素宽度），然后当我在浏览器中打开该文档并放大时，14.42 和四舍五入的 14 像素之间的差异非常明显。相对于放置在 15 像素处的相邻项目，它似乎已向左移动。至少在 Flash 中，它实际上是 14.4 像素宽（精确到最近的缇）。

好的。我在我的解决方案中假设的是，“缩放”操作将是应用程序中的自定义实现，而不是源自底层框架。更新了答案以提及相同的内容。

是的，我知道有解决方案。问题的重点是找出准确性水平，以确定是否需要/保证这样的解决方案。我仍在寻找有关各种平台准确度的具体数据。

@wvxvw 同意。但是当前的绘图应用程序可能特别不想做任何抗锯齿。具有自定义“缩放”的全部目的是显示像素化图像，从而清楚地突出一个像素的结束位置和另一个像素的开始位置。在缩放模式下，实际像素被渲染在多个屏幕像素上。在 10x 示例中，单击屏幕上 100 个像素中的任何一个都会映射到实际图像中的 1 个实际像素。最终的图像无论如何都会是正常尺寸的缩小图像。

【参考方案2】：

目前，您可以期待最好的舍入和亚像素支持来自 Mozilla，而 IE 则获得亚军。 IE 最终可能会得到更好的调整，但它们的发布周期很长，以至于 Mozilla 很可能会领先于它们。

就做亚像素布局而言，您可能只是在追逐一缕，因为亚像素优势改善了抗锯齿问题，而不是屏幕定位精度。无论亚像素支持如何，您的图像都不会比真实位置更精确 1 个像素。

一些浏览器不能正确缩放的原因与亚像素支持无关，这是因为它们没有记住确切的位置和正确的舍入。换句话说，它们过早地舍入了位置，从而导致图像未对齐。

【讨论】：

感谢您抽出宝贵时间回复。 “目前，你可以期待最好的舍入和亚像素支持来自 Mozilla，IE 是亚军”——你有任何数据支持吗？