Implement logical properties throughout Web APIs

[andy-blum]

Introduction

Web APIs that deal with positioning have not kept up with CSS. While logical positioning in stylesheets has largely simplified language-agnostic designs, the same cannot be said for many web APIs. I believe extending apis dealing with positioning to include logical properties will make certain tasks easier and more performant for sites

Use Cases/Examples

1: Element.scrollLeft()

The Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled from its left edge.

If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position (at the start of the scrolled content), and then increasingly negative as you scroll towards the end of the content.

Codepen Demo

A better implementation might be Element.scrollInline() where the value is always between 0 and positive inifinity. 0 indicates the scroll container is at the leftmost position in LTR languages and rightmost in RTL languages.

2. DOMRect

A DOMRect describes the size and position of a rectangle.

The DOMRect API has 8 instance properties:

• x
• y
• width
• height
• top
• bottom
• left
• right

All of these are helpful, but on sites that need to support both LTR and RTL languages, they leave developers to first decipher which property will actually be helpful. I propose adding four more properties to the DOMRect API:

• blockStart
• blockEnd
• inlineStart
• inlineEnd

Goal

Any API that implements a property or method based on a physical direction (top, bottom, left, right), or an X or Y coordinate also offers a logical-property alternative

Privacy & Security Considerations

No considerable privacy or security concerns are expected, but we welcome community feedback.

[marcoscaceres]

I guess that makes sense so long as DOMRect is mostly being used in to access layout positioning info (and not as a general "rect").

Do we know of other places where DOMRect is used? Just want to be sure adding these things wouldn't cause issues in other APIs that might be relying on DOMRect.

[tidoust]

Quickly looking at Webref IDL extracts, I end up with the following list of specs that reference DOMRect, DOMRectReadOnly, or DOMRectInit:

• Accelerated Shape Detection in Images
• Accelerated Text Detection in Images
• CSSOM View Module
• EditContext API
• Element Timing API
• Geometry Interfaces Module Level 1 (spec that defines the interfaces)
• Intersection Observer
• Layout Instability API
• Resize Observer
• Scalable Vector Graphics (SVG) 2
• VirtualKeyboard API
• WebCodecs
• Window Controls Overlay

[dontcallmedom]

for future reference, the same information is also readily available from WebIDLPedia via the "Referring IDL interfaces/dictionaries" and "Referring specifications" sections on the relevant pages: DOMRect, DOMRectReadOnly and DOMRectInit.