[csswg-drafts] Proposal: Introducing Physical Pixel Unit (ppx) in CSS (#12056)

zhiyongsun has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: Introducing Physical Pixel Unit (ppx) in CSS ==
Problem Description
In the current CSS implementation, units such as px, em, rem, etc., provide a way to define styles logically based on device metrics and resolutions. However, these logical units sometimes fall short when a developer needs precise control over the styling relative to the device's physical pixels, especially in specific scenarios like:

High-DPR Devices: On devices with a high Device Pixel Ratio (DPR), such as retina and 4k displays, logical pixels (like px) and physical pixels diverge significantly. This divergence complicates simple design requirements, such as one-pixel borders, which may appear thicker or differently on high-DPR displays due to the scaling factor.

Precise Graphic Design: Applications with a necessity for hardware pixel-perfect alignment or responsiveness often need precise physical pixel control, which current units cannot provide.

Use Cases
Use Case 1: Borders on High-DPR Devices: Developers often wish to define borders that are exactly one physical pixel thick across all devices, regardless of DPR, to achieve consistently thin lines without manually accounting for different scaling factors.

Use Case 2: Exact UI Element Alignment: UI components or graphic applications may require elements to be positioned or sized with exact physical pixel measurements to ensure crispness and precision in rendering, especially where performance tuning with hardware pixel precision is critical.

Use Case 3: Hardware Optimization: Web applications leveraging WebGL or hardware-accelerated graphics require exactness that only physical pixels can deliver, ensuring both visual accuracy and performance optimization.

Proposed Solution
Introduce a new unit ppx, representing "physical pixels", which directly maps to the device's physical pixel count regardless of its DPR.

New Syntax Example
``` css
/* Using the new unit ppx to define width, height, and borders */
.element {
  width: 10ppx;
  height: 15ppx;
  border: 1ppx solid black;
}

/* Detailed property implementation */
.container {
  padding: 5ppx;       /* Exact physical pixel padding */
  margin: 10ppx;       /* Exact physical pixel margin */
  box-shadow: 1ppx 1ppx 2ppx rgba(0, 0, 0, 0.5);  /* Exact physical pixel shadow */
}
```
Implementation Details
CSS Parser Update: Browser engines need to update their parsers to recognize and implement the new ppx unit.

Scope Extension: Implementing the unit across all CSS properties that accept length measurements, such as width, height, border, margin, padding, etc.

Rendering Consistency: Ensure physical pixel units work seamlessly with existing logical pixel layouts, allowing consistent transformation from logical styling to physical representation on the device.

Introducing the ppx unit will empower developers to precisely control UI designs and styling across all device types, ensuring uniform and accurate display regardless of varying DPRs.

Conclusion
We urge the W3C CSS Working Group to consider this proposal to include ppx units in future CSS specifications, further enhancing web design capabilities in coping with diverse modern device displays.

Thank you!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12056 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 8 April 2025 07:31:13 UTC