Code block direction in RTL interface #4433

New Issue

OVERLORD · 2026-02-05T08:52:36+03:00

OVERLORD commented

2026-02-05 08:52:36 +03:00

Originally created by @merrime-n on GitHub (Jan 28, 2024).

Describe the Bug

When we create a code block in a RTL page and modify its direction to LTR, it looks flawless in the editing mode. But when we save the document, it goes RTL and is not properly readable.

Steps to Reproduce

Go to an RTL interface.
Create a code block in a page.
In edit mode, make it left to right.
Save the page.
See? It is right to left.

Expected Behaviour

The code is expected to be rendered left to right regardless of the interface language.

Screenshots or Additional Context

Browser Details

Google Chrome Version 104.0.5112.102 (Official Build) (64-bit) On Windows 10

Exact BookStack Version

BookStack v23.12

Originally created by @merrime-n on GitHub (Jan 28, 2024). ### Describe the Bug When we create a code block in a RTL page and modify its direction to LTR, it looks flawless in the editing mode. But when we save the document, it goes RTL and is not properly readable. ### Steps to Reproduce 1. Go to an RTL interface. 2. Create a code block in a page. 3. In edit mode, make it left to right. 4. Save the page. 5. See? It is right to left. ### Expected Behaviour The code is expected to be rendered left to right regardless of the interface language. ### Screenshots or Additional Context ![Capture](https://github.com/BookStackApp/BookStack/assets/100111649/47b81456-a2c7-4113-86a5-c3eb2ceb7352) ### Browser Details Google Chrome Version 104.0.5112.102 (Official Build) (64-bit) On Windows 10 ### Exact BookStack Version BookStack v23.12

OVERLORD added the 🐛 Bug 💻 Front-End labels 2026-02-05 08:52:36 +03:00

OVERLORD closed this issue

2026-02-05 08:52:39 +03:00

OVERLORD commented

2026-02-05 08:52:45 +03:00

@ssddanbrown commented on GitHub (Feb 13, 2024):

Thanks for reporting @okaeiz, I've assigned this to be fixed in the next feature release.
If a temporary workaround was desired, you can add this below code to the "Custom HTML Head Content" customization setting to force all code blocks to ltr:

<style>
  .cm-editor, .page-content pre {direction: ltr;}
</style>

@ssddanbrown commented on GitHub (Feb 13, 2024): Thanks for reporting @okaeiz, I've assigned this to be fixed in the next feature release. If a temporary workaround was desired, you can add this below code to the "Custom HTML Head Content" customization setting to force all code blocks to ltr: ```html <style> .cm-editor, .page-content pre {direction: ltr;} </style> ```

OVERLORD commented

2026-02-05 08:52:47 +03:00

@ssddanbrown commented on GitHub (Feb 18, 2024):

This has now been addressed within commit 999d41a7f5.
This will be part of the next feature release.

@ssddanbrown commented on GitHub (Feb 18, 2024): This has now been addressed within commit 999d41a7f5455f4c7f9f175b5718d82ee529df2b. This will be part of the next feature release.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#4433