Pixelaligned

Pixelaligned is a term used in computer graphics to describe rendering where graphic elements are positioned on the exact device pixel grid. When content is pixelaligned, its edges lie on integer pixel boundaries, producing crisp lines and stable hit-testing. The concept is relevant to user interfaces, 2D games, sprite sheets, and text rendering. The term is often used interchangeably with pixel alignment or pixel snapping.

Common techniques include snapping layout coordinates to integer values during rendering, using grid-based layouts, and applying transforms that map design units to whole pixels. Some APIs historically require half-pixel adjustments to align lines to the pixel grid. On high-DPI displays, developers distinguish between CSS or logical pixels and device pixels, preserving alignment by accounting for devicePixelRatio in layout and drawing.

Benefits include sharper edges, predictable rendering across devices, and simpler hit-detection. Drawbacks include reduced smoothness when scaling or rotating, potential conflicts with anti-aliasing or subpixel rendering, and constraints on layout flexibility. Pixelalignment can be complemented by font hinting and crisp rendering modes to improve legibility of text and icons.

The term is widely used in documentation and discussions about rendering quality. It overlaps with concepts such as pixel snapping, font hinting, and crisp rendering. In practice, achieving true pixelalignment involves careful consideration of coordinate systems, transforms, and display characteristics, especially on modern high-DPI screens.