Mozilla2:Antialiasing - Revision history

NetRolller 3D at 23:07, 21 January 2008

2008-01-21T23:07:45Z

← Older revision		Revision as of 23:07, 21 January 2008
Line 1:		Line 1:
			'''Note:''' This page is now mostly obsolete. Antialiasing has undergone heavy changes in Mozilla 1.9.
			----
	See this [http://lists.freedesktop.org/archives/cairo/2005-March/003342.html Cairo mailing list thread] for details. Basically, when coverage-based antialiasing is in effect, two shapes that share an edge but do not overlap will cause rendering artifacts when the edge is not aligned on pixel boundaries. This is pretty common for Web content --- e.g., two CSS block boxes are often sized and positioned to be adjacent, or an image is placed adjacent to another CSS box, etc.		See this [http://lists.freedesktop.org/archives/cairo/2005-March/003342.html Cairo mailing list thread] for details. Basically, when coverage-based antialiasing is in effect, two shapes that share an edge but do not overlap will cause rendering artifacts when the edge is not aligned on pixel boundaries. This is pretty common for Web content --- e.g., two CSS block boxes are often sized and positioned to be adjacent, or an image is placed adjacent to another CSS box, etc.

Roc at 21:17, 14 April 2005

2005-04-14T21:17:54Z

← Older revision		Revision as of 21:17, 14 April 2005
Line 1:		Line 1:
	See this [http://lists.freedesktop.org/archives/cairo/2005-March/003342.html Cairo mailing list thread] for details. Basically, when coverage-based antialiasing is in effect, two shapes that share an edge but do not overlap will cause rendering artifacts when the edge is not aligned on pixel boundaries. This is pretty common for Web content --- e.g., two CSS block boxes are often sized and positioned to be adjacent, or an image is placed adjacent to another CSS box, etc.		See this [http://lists.freedesktop.org/archives/cairo/2005-March/003342.html Cairo mailing list thread] for details. Basically, when coverage-based antialiasing is in effect, two shapes that share an edge but do not overlap will cause rendering artifacts when the edge is not aligned on pixel boundaries. This is pretty common for Web content --- e.g., two CSS block boxes are often sized and positioned to be adjacent, or an image is placed adjacent to another CSS box, etc.

	The only ways to avoid this are to ensure that our layout coordinates are always pixel-aligned or to only enable coverage-based antialiasing when we draw edges that are not expected to be adjacent to other shapes. ~~The former~~ is ~~not satisfactory as it requires major~~ layout ~~changes, forces~~ layout to ~~depend on~~ device ~~resolution,~~ is probably not 'correct' according to CSS, and will not work if the presentation is scaled or rotated.		The only ways to avoid this are to ensure that our layout coordinates are always pixel-aligned or to only enable coverage-based antialiasing when we draw edges that are not expected to be adjacent to other shapes.

			Some (hello Owen!) advocate pixel-aligned layout but I don't think this is suitable for us for the following reasons:
			* It means that layout of a page inherently depends on device resolution; we'd like layout to be as device-independent as possible.
			* It is probably not correct according to the CSS spec, which definitely allows for fractional pixel measurements, and does not explicitly allow for rounding.
			* It will not work if the presentation is scaled or rotated.
			* It's a huge amount of work to implement in our code base.

	Therefore I propose that we disable coverage-based antialiasing except when rendering the following:		Therefore I propose that we disable coverage-based antialiasing except when rendering the following:

Roc at 05:02, 11 April 2005

2005-04-11T05:02:19Z

← Older revision		Revision as of 05:02, 11 April 2005
Line 1:		Line 1:
	See this [http://lists.freedesktop.org/archives/cairo/2005-March/003342.html Cairo mailing list thread] for details. Basically, when coverage-based antialiasing is in effect, two shapes that share an edge but do not overlap will cause rendering artifacts when the edge is not aligned on pixel boundaries. This is pretty common for Web content --- e.g., two CSS block boxes are often sized and positioned to be adjacent, or an image is placed adjacent to another CSS box, etc.		See this [http://lists.freedesktop.org/archives/cairo/2005-March/003342.html Cairo mailing list thread] for details. Basically, when coverage-based antialiasing is in effect, two shapes that share an edge but do not overlap will cause rendering artifacts when the edge is not aligned on pixel boundaries. This is pretty common for Web content --- e.g., two CSS block boxes are often sized and positioned to be adjacent, or an image is placed adjacent to another CSS box, etc.

	The only ways to avoid this are to ensure that our layout coordinates are always pixel-aligned or to only enable coverage-based antialiasing when we draw edges that are not expected to be adjacent to other shapes. The former is not satisfactory as it requires major layout changes, forces layout to depend on device resolution, ~~and~~ is probably not 'correct' according to CSS.		The only ways to avoid this are to ensure that our layout coordinates are always pixel-aligned or to only enable coverage-based antialiasing when we draw edges that are not expected to be adjacent to other shapes. The former is not satisfactory as it requires major layout changes, forces layout to depend on device resolution, is probably not 'correct' according to CSS, and will not work if the presentation is scaled or rotated.

	Therefore I propose that we disable coverage-based antialiasing except when rendering the following:		Therefore I propose that we disable coverage-based antialiasing except when rendering the following:
Line 10:		Line 10:
	Note that other forms of sampling and filtering, such as image scaling or gradient drawing algorithms, can do whatever they want; we do not expect authors to depend on the interiors of such objects being rendered in a certain way. But the edges of images and gradient fills must not be antialiased with the canvas.		Note that other forms of sampling and filtering, such as image scaling or gradient drawing algorithms, can do whatever they want; we do not expect authors to depend on the interiors of such objects being rendered in a certain way. But the edges of images and gradient fills must not be antialiased with the canvas.

	We may choose to use supersampling to perform antialiasing --- i.e., render at 2x2 or 4x4 the normal resolution, then scale down by averaging pixel values. This will avoid adjacency artifacts, although it still may produce undesirable results when page elements are not aligned at pixel boundaries. ~~Perhaps the best results will be when we position edges at CSS pixel boundaries when we~~ have ~~the flexibility~~ to ~~do so, and use supersampling to antialias~~.		We may choose to use supersampling to perform antialiasing --- i.e., render at 2x2 or 4x4 the normal resolution, then scale down by averaging pixel values. This will avoid adjacency artifacts, although it still may produce undesirable results when page elements are not aligned at pixel boundaries. We'll have to experiment.

Roc at 05:00, 11 April 2005

2005-04-11T05:00:49Z

New page

See this [http://lists.freedesktop.org/archives/cairo/2005-March/003342.html Cairo mailing list thread] for details. Basically, when coverage-based antialiasing is in effect, two shapes that share an edge but do not overlap will cause rendering artifacts when the edge is not aligned on pixel boundaries. This is pretty common for Web content --- e.g., two CSS block boxes are often sized and positioned to be adjacent, or an image is placed adjacent to another CSS box, etc.

The only ways to avoid this are to ensure that our layout coordinates are always pixel-aligned or to only enable coverage-based antialiasing when we draw edges that are not expected to be adjacent to other shapes. The former is not satisfactory as it requires major layout changes, forces layout to depend on device resolution, and is probably not 'correct' according to CSS.

Therefore I propose that we disable coverage-based antialiasing except when rendering the following:
* Text glyphs
* Rounded borders
When coverage-based antialiasing is disabled, a drawing operation should affect a pixel only if the pixel's center is in the drawn area.

Note that other forms of sampling and filtering, such as image scaling or gradient drawing algorithms, can do whatever they want; we do not expect authors to depend on the interiors of such objects being rendered in a certain way. But the edges of images and gradient fills must not be antialiased with the canvas.

We may choose to use supersampling to perform antialiasing --- i.e., render at 2x2 or 4x4 the normal resolution, then scale down by averaging pixel values. This will avoid adjacency artifacts, although it still may produce undesirable results when page elements are not aligned at pixel boundaries. Perhaps the best results will be when we position edges at CSS pixel boundaries when we have the flexibility to do so, and use supersampling to antialias.