From: Mark Otto <markd.otto@gmail.com>
Date: Thu, 26 Mar 2026 05:29:11 +0000 (-0700)
Subject: Remove RTLCSS mentions and more (#42246)
X-Git-Url: http://git.ipfire.org/gitweb/?a=commitdiff_plain;h=49895652e686c3f5719bfb2bd8d206fe919b21b8;p=thirdparty%2Fbootstrap.git

Remove RTLCSS mentions and more (#42246)

* Remove RTLCSS mentions and more

* Remove

* simplify
---

diff --git a/.cspell.json b/.cspell.json
index 92233df585..42ca4e794d 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -90,7 +90,6 @@
     "relref",
     "rgba",
     "roboto",
-    "RTLCSS",
     "ruleset",
     "sassrc",
     "screenreaders",
@@ -129,7 +128,6 @@
     ".cspell.json",
     "dist/",
     "*.min.*",
-    "**/*rtl*",
     "**/tests/**"
   ],
   "useGitignore": true
diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss
index e1b37aeb82..fe062d56c9 100644
--- a/scss/tests/mixins/_utilities.test.scss
+++ b/scss/tests/mixins/_utilities.test.scss
@@ -293,27 +293,6 @@ $true-terminal-output: false;
     //   }
     // }
 
-    // @include describe("rtl") {
-    //   @include it("sets up RTLCSS for removal when false") {
-    //     @include test-generate-utility(
-    //       (
-    //         property: padding,
-    //         values: 1rem,
-    //         rtl: false
-    //       )
-    //     ) {
-    //       /* rtl:begin:remove */
-
-    //       .padding-1rem {
-    //         padding: 1rem;
-    //       }
-
-    //       /* rtl:end:remove */
-
-    //     }
-    //   }
-    // }
-
     // @include describe("rfs") {
     //   @include it("sets the fluid value when not inside media query") {
     //     @include test-generate-utility(
diff --git a/site/src/assets/examples/carousel/carousel.css b/site/src/assets/examples/carousel/carousel.css
index 24d6a29c7c..0607e93595 100644
--- a/site/src/assets/examples/carousel/carousel.css
+++ b/site/src/assets/examples/carousel/carousel.css
@@ -36,12 +36,9 @@ body {
   margin-bottom: 1.5rem;
   text-align: center;
 }
-/* rtl:begin:ignore */
 .marketing .lg\:col-4 p {
-  margin-right: .75rem;
-  margin-left: .75rem;
+  margin-inline: .75rem;
 }
-/* rtl:end:ignore */
 
 
 /* Featurettes
@@ -52,13 +49,10 @@ body {
 }
 
 /* Thin out the marketing headings */
-/* rtl:begin:remove */
 .featurette-heading {
   letter-spacing: -.05rem;
 }
 
-/* rtl:end:remove */
-
 /* RESPONSIVE CSS
 -------------------------------------------------- */
 
diff --git a/site/src/assets/examples/cheatsheet/cheatsheet.css b/site/src/assets/examples/cheatsheet/cheatsheet.css
index e87bd5adbf..809727a111 100644
--- a/site/src/assets/examples/cheatsheet/cheatsheet.css
+++ b/site/src/assets/examples/cheatsheet/cheatsheet.css
@@ -61,15 +61,11 @@ body {
   line-height: 0;
   content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
   transition: transform .35s ease;
-
-  /* rtl:raw:
-  transform: rotate(180deg) translateX(-2px);
-  */
   transform-origin: .5em 50%;
 }
 
 .bd-aside .btn[aria-expanded="true"]::before {
-  transform: rotate(90deg)/* rtl:ignore */;
+  transform: rotate(90deg);
 }
 
 
@@ -99,10 +95,8 @@ body {
   .bd-header {
     position: fixed;
     top: 0;
-    /* rtl:begin:ignore */
     right: 0;
     left: 0;
-    /* rtl:end:ignore */
     z-index: 1030;
     grid-column: 1 / span 3;
   }
@@ -138,12 +132,10 @@ body {
 
   .bd-cheatsheet section > h2::before {
     position: absolute;
-    /* rtl:begin:ignore */
     top: 0;
     right: 0;
     bottom: -2rem;
     left: 0;
-    /* rtl:end:ignore */
     z-index: -1;
     content: "";
   }
diff --git a/site/src/content/docs/customize/rtl.mdx b/site/src/content/docs/customize/rtl.mdx
index de67b235d5..c43f517444 100644
--- a/site/src/content/docs/customize/rtl.mdx
+++ b/site/src/content/docs/customize/rtl.mdx
@@ -67,47 +67,6 @@ Toggle between LTR and RTL on this page to see Bootstrap's logical properties in
 `}
 </script>
 
-### Starter template
-
-Here's a modified RTL starter template:
-
-```html
-<!doctype html>
-<html lang="ar" dir="rtl">
-  <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="[[config:cdn.css]]" integrity="[[config:cdn.css_hash]]" crossorigin="anonymous">
-
-    <title>مرحبًا بالعالم!</title>
-  </head>
-  <body>
-    <h1>مرحبًا بالعالم!</h1>
-
-    <!-- Optional JavaScript; choose one of the two! -->
-
-    <!-- Option 1: Bootstrap Bundle with Floating UI and Vanilla Calendar Pro -->
-    <script type="module" src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
-
-    <!-- Option 2: Separate Floating UI, Vanilla Calendar Pro, and Bootstrap JS via import map -->
-    <!--
-    <script type="importmap">
-    {
-      "imports": {
-        "@floating-ui/dom": "[[config:cdn.floating_ui_esm]]",
-        "vanilla-calendar-pro": "[[config:cdn.vanilla_calendar_pro_esm]]"
-      }
-    }
-    </script>
-    <script type="module" src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
-    -->
-  </body>
-</html>
-```
-
 ## Switching directions
 
 **Need both LTR and RTL on the same page?** Wrap your content in containers with different `dir` attributes:
@@ -124,14 +83,12 @@ Here's a modified RTL starter template:
   <body>
     <!-- LTR content -->
     <div dir="ltr" lang="en">
-      <h1>This is left-to-right text</h1>
-      <p>Content flows from left to right.</p>
+      <!-- … -->
     </div>
 
     <!-- RTL content -->
     <div dir="rtl" lang="ar">
-      <h1>هذا نص من اليمين إلى اليسار</h1>
-      <p>المحتوى يتدفق من اليمين إلى اليسار.</p>
+      <!-- … -->
     </div>
   </body>
 </html>
diff --git a/site/src/content/docs/utilities/api.mdx b/site/src/content/docs/utilities/api.mdx
index 2d6d4f1a4b..fc2bcfd4ea 100644
--- a/site/src/content/docs/utilities/api.mdx
+++ b/site/src/content/docs/utilities/api.mdx
@@ -23,7 +23,6 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 | [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
 | [`important`](#importance) | Optional | `false` | Boolean indicating if `!important` should be added to the utility's CSS rules. |
 | [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. |
-| `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. |
 </BsTable>
 
 ## API explained
diff --git a/site/src/content/docs/utilities/text-wrapping.mdx b/site/src/content/docs/utilities/text-wrapping.mdx
index 21c9ea3b4e..e64ad49058 100644
--- a/site/src/content/docs/utilities/text-wrapping.mdx
+++ b/site/src/content/docs/utilities/text-wrapping.mdx
@@ -34,10 +34,6 @@ Prevent long strings of text from breaking your components' layout by using `.te
 
 <Example code={`<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>`} />
 
-<Callout type="warning">
-Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts/rtl-styling#3.-line-break), which is the most used RTL language. Therefore `.text-break` is removed from our RTL compiled CSS.
-</Callout>
-
 ## CSS
 
 ### Sass utilities API
@@ -57,6 +53,5 @@ Text wrapping utilities are declared in our utilities API in `scss/_utilities.sc
   property: word-wrap word-break,
   class: text,
   values: (break: break-word),
-  rtl: false
 ),
 ```
diff --git a/site/src/content/docs/utilities/word-break.mdx b/site/src/content/docs/utilities/word-break.mdx
index f583be9d07..a7e77863c4 100644
--- a/site/src/content/docs/utilities/word-break.mdx
+++ b/site/src/content/docs/utilities/word-break.mdx
@@ -10,10 +10,6 @@ Prevent long strings of text from breaking your components' layout by using `.te
 
 <Example code={`<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>`} />
 
-<Callout type="warning">
-Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts/rtl-styling#3.-line-break), which is the most used RTL language. Therefore `.text-break` is removed from our RTL compiled CSS.
-</Callout>
-
 ## CSS
 
 ### Sass utilities API