dir

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2023⁩.

Thedirglobal attribute is anenumerated attribute that indicates the directionality of the MathML element.

Example

html,body {  height: 100%;}body {  display: grid;  place-items: center;  font-size: 1.5rem;}

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 meansleft to right and is used to render mathematical expressions from the left to the right (e.g., English or Moroccan style);
rtl, which meansright 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 propertydirection, 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.
Thedir 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, theauto keyword from the HTMLdir attribute is not recognized and by default theuser agent stylesheet resets the direction property on themath element.