Home Why does an HTML child element not seem to inherit the dir attribute when set to auto?

Questions

Why does an HTML child element not seem to inherit the dir attribute when set to auto?

July 22, 2022

When I set the dir attribute to auto on a parent element, it does not appear that the child elements inherit auto, but it does appear that they inherit ltr or rtl.

According to this:

In HTML the base direction is either (a) set explicitly by the nearest parent element that uses the dir attribute (which could be the html element), or, (b) in the absence of such an attribute, left-to-right (LTR).

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

And according to the spec:

If the element has a parent element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value)
The directionality of the element is the same as the element’s parent element’s directionality.

If I understand that correctly, then every <p> should be inheriting its directionality from the parent <div> (in the last case below, auto), but it does not appear to be doing that when the directionality is set to auto. Why?

It appears this way in Chrome, Firefox, and Safari, so it’s not a browser issue.

div {
        border: 1px red solid;
        margin: 1rem 0;
      }
p {
  margin: 5px;
  border: 1px blue solid;
  }

<!-- LTR -->
<div dir="ltr" id="div-ltr">
        <p>
          This div is set `ltr` so all of its descendants are `ltr` as well, no
          matter the characters directionality
        </p>
        <p id="english-ltr">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique,
          placeat
        </p>
        <p id="phoenician-ltr">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
      </div>
<!-- RTL -->
      <div dir="rtl" id="div-rtl">
        <p>
          This div is set `rtl` so all of its descendants are `rtl` as well, no
          matter the characters directionality
        </p>
        <p id="english-rtl">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique,
          placeat
        </p>
        <p id="phoenician-rtl">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
      </div>
<!-- AUTO -->
      <div dir="auto" id="div-auto">
        <p>
          This div is set `auto`, but the children all seem to default to `ltr`
        </p>
        <p id="english-auto">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique,
          placeat
        </p>
        <p id="phoenician-auto">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
      </div>

>Solution :

It says the direction is inherited from the parent, not the value of the dir attribute.

Your div has no text nodes in it, so auto is treated as LTR.

Add some RTL text and it changes:

      <div dir="auto" id="div-auto">   𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀

        <p>
          This div is set `auto`, but the children all seem to default to `ltr`
        </p>
        <p id="english-auto">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique,
          placeat
        </p>
        <p id="phoenician-auto">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
      </div>