| CARVIEW |
Select Language
HTTP/2 301
content-length: 162
content-type: text/html
date: Wed, 15 Oct 2025 20:55:31 GMT
location: https://developer.mozilla.org/en-US/docs/Web/MathML/Reference/Global_attributes/dir
server: nginx
strict-transport-security: max-age=60; includeSubDomains
via: 1.1 google
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3JdQitfZzxIjV6if9seIpJc9spiNncn98iwF0pp3WwsOrYMjLEXjLzCU9VfTNIawTpKzRH9KnU
cache-control: public, max-age=3600
expires: Wed, 15 Oct 2025 21:55:32 GMT
last-modified: Wed, 15 Oct 2025 09:11:39 GMT
etag: W/"819b3f38ddf961b86f45e86da8bbe8b0"
x-goog-generation: 1760519498932125
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 142346
x-goog-meta-goog-reserved-file-mtime: 1760517977
x-goog-hash: crc32c=Uok01g==, md5=gZs/ON35YbhvRehtqLvosA==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: fc5648f688a88086de53e1eca7199108
date: Wed, 15 Oct 2025 20:55:32 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
dir - MathML | MDN
Toggle sidebar
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.
The dir global attribute is an enumerated 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 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
dirattribute 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, theautokeyword from the HTMLdirattribute is not recognized and by default the user agent stylesheet resets the direction property on themathelement.
Specifications
| Specification |
|---|
| MathML Core # dfn-dir |
Browser compatibility
Loading…
See also
- All global attributes.
direction- The HTML
dirglobal attribute