[csswg-drafts] [css-values-4] Add new relative length units that are relative to the size of the system cursor (#8315)

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

== [css-values-4] Add new relative length units that are relative to the size of the system cursor ==
[[Related bug in Firefox]](https://bugzilla.mozilla.org/show_bug.cgi?id=1712669)

There are currently two ways for web developers to get tooltip behavior for a website, as listed [in this example StackOverflow thread](https://stackoverflow.com/questions/15702867/html-tooltip-position-relative-to-mouse-pointer):

- use a `title` attribute, which yields a standardized text tooltip managed by the browser;

- create a CSS-customizable tooltip, listen to mouse move events with JavaScript to dynamically change the position of the tooltip, reveal it when some other element is hovered.

When computing the new position for a customizable tooltip with JavaScript, web developers will typically add an offset to account for the system cursor. However, because the system cursor size is not exposed, the offset they add is arbitrary and cannot account for varying cursor sizes. This causes problems for accessibility, as visually impaired users may set their cursors to a bigger size than the average and have their cursor cover the contents of the tooltip -- thus part of the shown information is not rendered for them.

This can be seen in the StackOverflow thread listed above, where two different web developers answering the same question answered with a different arbitrary offset:

```js
    // Offset of 20px
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
```

```js
    // Offset of 10px
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
```

This issue proposes to add two new [relative length units](https://www.w3.org/TR/css-values-4/#relative-length).

unit  | relative to
-----|----------------------------
'scw' | width of the system cursor
'sch' | height of the system cursor

Browsers may let the option to users to use up-rounded predefined system cursor sizes to limit fingerprinting.

The first example from above may then be changed to the following:

```js
    tooltipSpan.style.top = '@calc(1sch + ' + y + 'px)';
    tooltipSpan.style.left = '@calc(1scw + ' + x + 'px)';
```

The second example could be partially adapted ...

```js
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 /* still arbitrary */ < document.body.clientWidth)
          ? ("@calc(1scw + " + e.pageX + "px)")
          : ("@calc(0.5scw + " + (document.body.clientWidth - tooltip.clientWidth) + "px)");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 /* still arbitrary */ < document.body.clientHeight)
          ? ("@calc(1sch + " + e.pageY + "px)")
          : ("@calc(0.5sch + " (document.body.clientHeight - tooltip.clientHeight) + "px)");
```

... but, as you can see, the proposed change would not be enough on its own to completely adapt the second example. This code is trying to assess from JavaScript whether the tooltip would be partially positioned outside the limits of the rendered page and not get rendered completely -- and adjust its position accordingly. For this example to not use any arbitrary offset, I believe we would have to expose the system cursor size directly to JavaScript -- so I'd like to hear your opinions regarding this possibility as well.

Thanks!

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


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

Received on Monday, 16 January 2023 11:43:44 UTC