:dir() improved support

[brandonmcconnell]

Description

"The :dir() pseudo-class in CSS allows elements to be selected based on the direction of the language, as determined in the HTML markup. There are really only two directions language can flow in a document, which are left-to-right and right-to-left. Think of this as a way to style elements that are distinguished by different language directionality."
– @geoffgraham (via CSS Tricks)

I couldn't have explained it better, myself. Thanks, Geoff 🙏🏼

Rationale

:dir() support is important to the effort of internationalization. This pseudo-class has been a long time coming and has been a topic of discussion for a while now as well:

Formal (docs-style)

• https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
• https://www.geeksforgeeks.org/css-dir-selector/
• https://www.w3docs.com/learn-css/dir.html

Informal

• https://css-tricks.com/almanac/selectors/d/dir/
• https://tympanus.net/codrops/css_reference/dir/
• https://www.youtube.com/watch?v=lG-tFqMZYPs

Directionality can currently be set in two primary ways— setting the HTML dir attribute to either ltr or rtl, or setting the direction property in CSS to either of those same values.

Elements explicitly setting dir="rtl" (or similar) can already be targeted with CSS using an attribute selector. However, this is usually an edge case, as that property is usually set once on a document, and does not necessarily apply that same directionality to all elements on the page.

:dir() is the solution here:

• matches [dir="rtl"] (or similar)
• matches direction: rtl (or similar)
• matches directionality that is either inherited or purposefully not inherited from a parent element

Specification

https://w3c.github.io/csswg-drafts/selectors-4/#the-dir-pseudo

Tests

• https://wpt.fyi/results/css/css-pseudo?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=subtest&q=dir
• https://wpt.fyi/results/css/selectors?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=subtest&q=dir%20

More tests will likely be needed for this.

[gsnedders]

Relevant but not comprehensive: https://wpt.fyi/results/css/css-pseudo?label=master&label=experimental&aligned&view=subtest&q=dir

there's more tests in https://wpt.fyi/results/css/selectors?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=subtest&q=dir%20

[brandonmcconnell]

@gsnedders Thanks! Is there a readme or guide (or video for that matter) to help find relevant tests like this? I have such a hard time navigating wpt.fyi sometimes, as much as I love the site and the value it adds.

Thanks again! 🙏🏼

[foolip]

@brandonmcconnell I know wpt.fyi is very much a power user interface and there are plenty of things in hard-to-discover UI and documentation. If you have specific tasks you're trying to get done and can't, can you file an issue at https:/web-platform-tests/wpt.fyi/issues?

When it comes to finding tests, searching in a local checkout of https:/web-platform-tests/wpt is probably most effective, since you can then search for the test contents, not just their names.

[brandonmcconnell]

@foolip That's very helpful— thanks!

[gsnedders]

In the above case, I just started searching for "dir" and looked at where matched—that pseudo-classes (which are defined in Selectors) have tests in the Selectors directory isn't particularly surprising, given that knowledge about where they're specified.

[karlcow]

When it comes to finding tests, searching in a local checkout of https:/web-platform-tests/wpt is probably most effective, since you can then search for the test contents, not just their names.

This. What @foolip said

I have been experimenting a couple of times with this.
For example for :dir(), on the repo once you have done a local clone on your computer.

find . -name '*.html' ! -name '*-ref.html' -type f -exec grep -H ':dir(' {} \;

which will give all matches. If you want something more browsable.

find . -name '*.html' ! -name '*-ref.html' -type f -exec grep -H ':dir(' {} \; | sed -e 's,:.*,,' | sort | uniq | sed -e 's,^\.,https://wpt.fyi,'

https://wpt.fyi/css/css-scoping/shadow-directionality-001.tentative.html
https://wpt.fyi/css/css-scoping/shadow-directionality-002.tentative.html
https://wpt.fyi/css/selectors/dir-selector-auto-direction-change-001.html
https://wpt.fyi/css/selectors/dir-selector-auto.html
https://wpt.fyi/css/selectors/dir-selector-change-001.html
https://wpt.fyi/css/selectors/dir-selector-change-002.html
https://wpt.fyi/css/selectors/dir-selector-change-003.html
https://wpt.fyi/css/selectors/dir-selector-change-004.html
https://wpt.fyi/css/selectors/dir-selector-ltr-001.html
https://wpt.fyi/css/selectors/dir-selector-ltr-002.html
https://wpt.fyi/css/selectors/dir-selector-ltr-003.html
https://wpt.fyi/css/selectors/dir-selector-querySelector.html
https://wpt.fyi/css/selectors/dir-selector-rtl-001.html
https://wpt.fyi/css/selectors/dir-selector-white-space-001.html
https://wpt.fyi/css/selectors/dir-style-01a.html
https://wpt.fyi/css/selectors/dir-style-01b.html
https://wpt.fyi/css/selectors/dir-style-02a.html
https://wpt.fyi/css/selectors/dir-style-02b.html
https://wpt.fyi/css/selectors/dir-style-03a.html
https://wpt.fyi/css/selectors/dir-style-03b.html
https://wpt.fyi/css/selectors/dir-style-04.html
https://wpt.fyi/html/semantics/selectors/pseudo-classes/dir-html-input-dynamic-text.html
https://wpt.fyi/html/semantics/selectors/pseudo-classes/dir.html
https://wpt.fyi/html/semantics/selectors/pseudo-classes/dir01.html
https://wpt.fyi/shadow-dom/directionality-002.tentative.html

[karlcow]

Better suggestion from @heycam and a lot faster

grep -lR ':dir(' | grep -v '[-]ref.html$' | sed -e 's,^\.,https://wpt.fyi,'

[brandonmcconnell]

@karlcow @heycam Nice! I compiled that into a shell function I'll use when searching for tests from now on 👏🏼

function find-wpt-tests(){
  cd "/path/to/wpt" # <-- replace with the path to the `wpt` directory on your local machine
  grep -lR "$@" | grep -v "[-]ref.html$" | sed -e "s,^\.,https://wpt.fyi,"
}

# usage
find-wpt-tests ":dir("

[brandonmcconnell]

@karlcow @heycam @gsnedders

I put together a slightly more sophisticated version of this function ☝🏼 which handles formatting flags for the returned results and some verbiage niceties:

• verbiage for…
  • errored state
  • loading-state
  • completed state
• formatting flags:
  • -m for abbreviating links via markdown
  • -l for returning the results as a bulleted list

I initially added all of that to this comment, but it became a bit too robust, so I created a separate repo for that that you can find here: find-wpt-tests

[bkardell]

There is also an open issue/pr about resolving these in shadow dom which would add a slew of tests when it lands web-platform-tests/wpt#29820

[brandonmcconnell]

@bkardell Great find. Thanks, Brian!

[jensimmons]

We do want to limit potential Inteorp 2023 tests to only include ones that don't fail because an unrelated technology is not supported. For example, if the test is for :dir() + foobar, and only passes if both are supported — and foobar is not supported in all the browser engine already, then it should not be part of Interop 2023.

Why? Because foobar isn't part of Interop 2023. (Presuming it isn't). Engines should get scored according to their :dir() implementation, not on foobar.

[brandonmcconnell]

@jensimmons Fine point. I can see how those tests would likely be a better fit for a future shadow DOM rather than :dir()

[zcorpan]

More tests will likely be needed for this.

Also see web-platform-tests/wpt#25569

[foolip]

In the State of CSS 2022 question about browser incompatibilities, there were two mentions of :dir(), so not enough to make the top list in #248. The comments were ":did(RTL)" (typo, manually identified) and ":dir() selector".

[foolip]

In the MDN short survey on CSS & HTML, "CSS :dir() pseudo-class" was selected by ~5% of survey takers, putting it in the bottom third of the 20 options. (There is some uncertainty as with any survey data.)

[foolip]

Some of the tentative tests here depend on whatwg/html#3699 / whatwg/html#7424. @meyerweb do you think that can be resolved soonish?

[foolip]

Thank you for proposing :dir() for gradients for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as part of the CSS Pseudo-classes focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.