RTL not supported in pre and code tags
Created by: AhmedElTabarani
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
I posted an issue here #35218 (closed) that I thought was a typo in the docs But when I tested it, I found that Bootstrap doesn't support pre tag and code tag
Code
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css"
integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N"
crossorigin="anonymous"
/>
</head>
<body>
<pre>مرحبا بالعالم!</pre>
<code>مرحبا بالعالم!</code>
</body>
</html>Output
The output above is wrong is shown ملاعلاب ابحرم! and the right sentence is !مرحبا بالعالم
It's like saying "dlroW olleH" instead of "Hello World"
if i run same code without the bootstrap link, everything will be fine
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<pre>مرحبا بالعالم!</pre>
<code>مرحبا بالعالم!</code>
</body>
</html>
like this
and this is the right sentence
Reduced test cases
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.0.2