Floating-point values in CSSOM

Internet Explorer 10 and Windows apps using JavaScript report positioning and sizing metrics for the Document Object Model (DOM) by using sub-pixel precision. The CSS Object Model (CSSOM) in Internet Explorer 10 and Windows apps using JavaScript supports floating-point pixel units and floating-point accuracy in positioning and sizing values for element-level CSSOM properties.

This topic contains the following sections:

• Whole-pixel alignment
• Device-independent pixel units (DIPs)
• Finer precision in positioning and sizing calculations
• Related topics

Whole-pixel alignment

Legacy web standards and implementations have traditionally assumed that the rendering of web content on a given screen should be aligned to whole pixel boundaries. This has been evident in CSSOM, which is an object model used to obtain positioning and sizing metrics for the DOM. Although Windows Internet Explorer has long supported a rich set of CSSOM APIs (for more information, see Measuring Element Dimension and Location with CSSOM in Internet Explorer 9), it has previously defined these positioning and sizing metrics as pixel-aligned.

Device-independent pixel units (DIPs)

Windows Internet Explorer 8 introduced support for device-independent pixels (DIPs). These "virtual pixels" are 1/96th of an inch in size, and are a much more precise way to measure text placement than physical pixels. When content is rendered to the screen, the layout metrics are translated by a scale factor (which maps to the user's current zoom level) and then rounded, or "snapped," to a pixel for display.

The rendering engine in Windows Internet Explorer 9 offloads much of the rendering work to the PC's graphics hardware by using Direct2D APIs. Direct2D can perform rendering at sub-pixel accuracy both for the Cascading Style Sheets (CSS) box model and for text. (For more information about text rendering in Internet Explorer 9, see About Text Rendering in Internet Explorer 9.) Instead of simply snapping the layout unit to the nearest pixel during rendering, Direct2D APIs enable the layout calculations to be consumed directly by the rendering engine and displayed appropriately.

Finer precision in positioning and sizing calculations

Though problems in obtaining pixel-perfect positioning and sizing information via CSSOM are rare at a zoom level of 100%, they can become more evident to users—and therefore problematic to developers—when zooming in and out of content. Support for floating-point accuracy in positioning and sizing values for element-level CSSOM properties in Internet Explorer 10 can help alleviate these problems. (Element-level properties are properties such as elementOb.clientLeft; in contrast, properties such as rangeOb.getBoundingClientRect().left always return sub-pixel values.)

Sub-pixel precision for element-level CSSOM properties is turned off by default. To enable it, use the following new property:

Related topics

Document Object Model (DOM)

Internet Explorer 10 Guide for Developers