"HTMLElement.dir": Misleading info about how the value is determined

[jwdallas]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir

What information was incorrect, unhelpful, or incomplete?

When an element has its dir set to "auto", the direction of the element is determined based on its first strong directionality character, or default to the directionality of its parent element.

1. This a little confusing since I think it's referring to the dir attribute not the API but it doesn't actually specify.
2. Setting the dir attribute does not update the value of this API in the way mentioned. The API simply returns "auto".

What did you expect to see?

Maybe a note explaining that this API can't be used to determine the current direction of an element. You’ll need to use getComputedStyle for that.

MDN Content page report details

• Folder: en-us/web/api/htmlelement/dir
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/htmlelement/dir/index.md
• Last commit: 89c8199
• Document last modified: 2022-02-18T09:24:31.000Z

[tlylt]

Hi @jwdallas, regarding the confusion above:

When an element has its dir set to "auto", the direction of the element is determined based on its first strong directionality character, or default to the directionality of its parent element.

1. This a little confusing since I think it's referring to the dir attribute not the API but it doesn't actually specify.

I suppose it refers to both the dir attribute and how you can get or set it. Is the getting and setting what you refer to as "the API" ? In the very first paragraph of the page, it is stated that:

The HTMLElement.dir property gets or sets the text writing directionality of the content of the current element.

Does that clarify?

---

Setting the dir attribute does not update the value of this API in the way mentioned. The API simply returns "auto".

Is there a reproduction code snippet that you can provide?

• if it is set as values such as rtl, it will return rtl
• if it is set as auto, it should reasonably return auto? (I tested and it does return auto)

Are you saying if it is set as auto, the element.dir should get back the value that it infers instead (so, perhaps rtl if its parent has rtl)? I'm not sure that should be the right behavior because the attribute itself is auto and should remain so.

I have constructed an example (also hosted here) below, you can try it out or modify the example to illustrate your point, so that I can help clarify further?

    <p id="target">This is my target</p>
    <p id="before"></p>
    <p id="after"></p>
    <script>
      const target = document.getElementById('target');
      const before = document.getElementById('before');
      const after = document.getElementById('after');
      before.textContent = `The original dir is: ${target.dir}`; // initially empty
      target.dir = 'rtl'; // change the text direction on a paragraph identified as "target"
      console.log(target.dir); // "rtl"
      after.textContent = `The updated dir is: ${target.dir}`; // "The updated dir is: rtl"
    </script>

Cheers!