diff --git a/README.md b/README.md
index 517bd6b..3cf3343 100644
--- a/README.md
+++ b/README.md
@@ -107,6 +107,7 @@ Then running `node example.js` or `pnpm astro dev` yields:
 
 ```html
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -124,6 +125,7 @@ Then running `node example.js` or `pnpm astro dev` yields:
 </div>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
diff --git a/src/index.ts b/src/index.ts
index 46314d3..2cdc060 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -141,6 +141,7 @@ const rehypeCallouts: Plugin<[UserOptions?], Root> = (options) => {
       // modify the blockquote element
       // @ts-expect-error (Type '"div" | "details"' is not assignable to type '"blockquote"')
       node.tagName = collapsable ? 'details' : 'div'
+      node.properties.dir = 'auto'
       node.properties.className = [
         'callout',
         collapsable && 'callout-collapsible',
diff --git a/test/fixtures/basic/output.html b/test/fixtures/basic/output.html
index ea0d576..4e7fe4a 100644
--- a/test/fixtures/basic/output.html
+++ b/test/fixtures/basic/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -11,6 +12,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -23,6 +25,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -35,6 +38,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
diff --git a/test/fixtures/collapsibleCallouts/output.html b/test/fixtures/collapsibleCallouts/output.html
index 155a274..292908f 100644
--- a/test/fixtures/collapsibleCallouts/output.html
+++ b/test/fixtures/collapsibleCallouts/output.html
@@ -1,4 +1,5 @@
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -26,6 +27,7 @@
 </details>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -53,6 +55,7 @@
 </details>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -80,6 +83,7 @@
 </details>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
diff --git a/test/fixtures/customAliases/output.html b/test/fixtures/customAliases/output.html
index ee25bb5..d6aea1b 100644
--- a/test/fixtures/customAliases/output.html
+++ b/test/fixtures/customAliases/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -11,6 +12,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -23,6 +25,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -35,6 +38,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
diff --git a/test/fixtures/customCallouts/output.html b/test/fixtures/customCallouts/output.html
index 1971846..56e3390 100644
--- a/test/fixtures/customCallouts/output.html
+++ b/test/fixtures/customCallouts/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
@@ -28,6 +29,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
@@ -57,6 +59,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #e36ba7; --callout-color-dark: #f86bb7;"
 >
@@ -69,6 +72,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #e36ba7; --callout-color-dark: #f86bb7;"
 >
@@ -83,6 +87,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
@@ -112,6 +117,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
@@ -143,6 +149,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #888; --callout-color-dark: #888;"
 >
@@ -155,6 +162,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #888; --callout-color-dark: #888;"
 >
diff --git a/test/fixtures/customTheme/output.html b/test/fixtures/customTheme/output.html
index 3be70a3..e2f795d 100644
--- a/test/fixtures/customTheme/output.html
+++ b/test/fixtures/customTheme/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(142, 150, 170); --callout-color-dark: rgb(101, 117, 133);"
 >
@@ -25,6 +26,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(100, 108, 255); --callout-color-dark: rgb(100, 108, 255);"
 >
@@ -54,6 +56,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(159, 122, 234); --callout-color-dark: rgb(159, 122, 234);"
 >
@@ -83,6 +86,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(234, 179, 8); --callout-color-dark: rgb(234, 179, 8);"
 >
@@ -116,6 +120,7 @@
 </blockquote>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #888; --callout-color-dark: #888;"
 >
diff --git a/test/fixtures/fromHtml/output.html b/test/fixtures/fromHtml/output.html
index 4db5e51..9849624 100644
--- a/test/fixtures/fromHtml/output.html
+++ b/test/fixtures/fromHtml/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -11,6 +12,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -23,6 +25,7 @@
 </div>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
diff --git a/test/fixtures/markdownInTitle/output.html b/test/fixtures/markdownInTitle/output.html
index 688513d..7f27770 100644
--- a/test/fixtures/markdownInTitle/output.html
+++ b/test/fixtures/markdownInTitle/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
diff --git a/test/fixtures/modifyCallouts/output.html b/test/fixtures/modifyCallouts/output.html
index f32154e..50a5ed1 100644
--- a/test/fixtures/modifyCallouts/output.html
+++ b/test/fixtures/modifyCallouts/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -27,6 +28,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -56,6 +58,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #e36ba7; --callout-color-dark: #f86bb7;"
 >
diff --git a/test/fixtures/nestedCallouts/output.html b/test/fixtures/nestedCallouts/output.html
index c1314c5..0df6631 100644
--- a/test/fixtures/nestedCallouts/output.html
+++ b/test/fixtures/nestedCallouts/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -8,6 +9,7 @@
   <div class="callout-content">
     <p>This is the content!</p>
     <div
+      dir="auto"
       class="callout"
       style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
     >
@@ -20,6 +22,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -29,6 +32,7 @@
   <div class="callout-content">
     <p>This is the content!</p>
     <div
+      dir="auto"
       class="callout"
       style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
     >
@@ -42,6 +46,7 @@
 </div>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -66,6 +71,7 @@
   <div class="callout-content">
     <p>This is the content!</p>
     <details
+      dir="auto"
       class="callout callout-collapsible"
       style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
     >
diff --git a/test/fixtures/openOrClose/output.html b/test/fixtures/openOrClose/output.html
index 1445888..d067a2b 100644
--- a/test/fixtures/openOrClose/output.html
+++ b/test/fixtures/openOrClose/output.html
@@ -1,4 +1,5 @@
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
@@ -45,6 +46,7 @@
 </details>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
   open
diff --git a/test/fixtures/readmeExample/output.html b/test/fixtures/readmeExample/output.html
index eae02ea..fdf4fd3 100644
--- a/test/fixtures/readmeExample/output.html
+++ b/test/fixtures/readmeExample/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -27,6 +28,7 @@
 </div>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
diff --git a/test/fixtures/showIndicator/output.html b/test/fixtures/showIndicator/output.html
index 70f93e8..7a57cf6 100644
--- a/test/fixtures/showIndicator/output.html
+++ b/test/fixtures/showIndicator/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -27,6 +28,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -56,6 +58,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -85,6 +88,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
@@ -118,6 +122,7 @@
 <blockquote><p>[!cantio] This is a non-existent callout type!</p></blockquote>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -158,6 +163,7 @@
   <div class="callout-content">
     <p>This is the content!</p>
     <details
+      dir="auto"
       class="callout callout-collapsible"
       style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
     >