dir

Baseline 2023
Newly available

Since January 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The dir global attribute is an enumerated attribute that indicates the directionality of the MathML element.

Example

html
<!-- Moroccan style -->
<math display="block" dir="ltr">
  <msqrt>
    <mi>س</mi>
  </msqrt>
  <mo>=</mo>
  <msup>
    <mn>3</mn>
    <mi>ب</mi>
  </msup>
</math>

<!-- Maghreb/Machrek style -->
<math display="block" dir="rtl">
  <msqrt>
    <mi>س</mi>
  </msqrt>
  <mo>=</mo>
  <msup>
    <mn>٣</mn>
    <mi>ب</mi>
  </msup>
</math>

Syntax

html
<math dir="ltr">
<math dir="rtl">

Values

  • ltr, which means left to right and is used to render mathematical expressions from the left to the right (e.g. English or Moroccan style);
  • rtl, which means right to left and is used to render mathematical expressions from the right to the left (e.g. Maghreb or Machrek style);

Note:

  • This attribute can be overridden by the CSS property direction, if a CSS page is active and the element supports these properties.
  • As the directionality of mathematics is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the formulas will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.
  • The dir attribute is used to set the directionality of math formulas, which is often from right to left in Arabic-speaking world. However, languages written from right to left often embed mathematical content written from left to right. Consequently, the auto keyword from the HTML dir attribute is not recognized and by default the user agent stylesheet resets the direction property on the math element.

Specifications

Specification
MathML Core
# dfn-dir

Browser compatibility

BCD tables only load in the browser

See also