RTL direction for Right to left scripts #874

New Issue

GiteaMirror · 2025-11-02T03:39:57-06:00

GiteaMirror commented

2025-11-02 03:39:57 -06:00

Originally created by @nixmd on GitHub (Jul 8, 2017).

Gitea version (or commit ref): all
Git version: -
Operating system: -
Database (use [x]): -
- PostgreSQL
- MySQL
- MSSQL
- SQLite
Can you reproduce the bug at https://try.gitea.io: yeah, go ahead and try
- Yes (provide example URL)
- No
- Not relevant
Log gist:

Description

Web interface does not change direction of right to left scripts for languages such as arabic and hebrew. There must be a js to detect these kind of scripts and add rtl direction into css. Writing a mixed string of latin and arabic/hebrew scripts will be shown incorrectly.
...

Screenshots

If this issue involves the Web Interface, please include a screenshot

Originally created by @nixmd on GitHub (Jul 8, 2017). - Gitea version (or commit ref): all - Git version: - - Operating system: - - Database (use `[x]`): - - [ ] PostgreSQL - [ ] MySQL - [ ] MSSQL - [ ] SQLite - Can you reproduce the bug at https://try.gitea.io: yeah, go ahead and try - [ ] Yes (provide example URL) - [ ] No - [ ] Not relevant - Log gist: ## Description Web interface does not change direction of right to left scripts for languages such as arabic and hebrew. There must be a js to detect these kind of scripts and add rtl direction into css. Writing a mixed string of latin and arabic/hebrew scripts will be shown incorrectly. ... ## Screenshots **If this issue involves the Web Interface, please include a screenshot**

GiteaMirror added the type/feature issue/confirmed topic/ui topic/ui-interaction issue/workaround labels 2025-11-02 03:39:57 -06:00

GiteaMirror commented

2025-11-02 03:39:58 -06:00

@lafriks commented on GitHub (Jul 8, 2017):

Can you provide screenshot where does it show incorrect and describe how it should be

@lafriks commented on GitHub (Jul 8, 2017): Can you provide screenshot where does it show incorrect and describe how it should be

GiteaMirror commented

2025-11-02 03:39:58 -06:00

@nixmd commented on GitHub (Jul 8, 2017):

How it currently is:

How it is supposed to be:

This issue is every where. every html element. direction:rtl must be added to ever element which contains rtl scripts.

@nixmd commented on GitHub (Jul 8, 2017): How it currently is: ![How it currently is](https://user-images.githubusercontent.com/4315116/27984934-80893c50-63d1-11e7-9cc6-9d6dbe50b930.png) How it is supposed to be: ![How it has to be](https://user-images.githubusercontent.com/4315116/27984935-83ea37c8-63d1-11e7-9a2b-b67337bb1a38.png) This issue is every where. every html element. direction:rtl must be added to ever element which contains rtl scripts.

GiteaMirror commented

2025-11-02 03:39:58 -06:00

@stale[bot] commented on GitHub (Feb 14, 2019):

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

@stale[bot] commented on GitHub (Feb 14, 2019): This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

GiteaMirror commented

2025-11-02 03:39:58 -06:00

@stale[bot] commented on GitHub (Feb 28, 2019):

This issue has been automatically closed because of inactivity. You can re-open it if needed.

@stale[bot] commented on GitHub (Feb 28, 2019): This issue has been automatically closed because of inactivity. You can re-open it if needed.

GiteaMirror commented

2025-11-02 03:39:58 -06:00

@zaher commented on GitHub (Jun 10, 2020):

It need
<p dir="auto">
for paragraph of text body that contain message or even topic.
It automatically switch text to right align and use rtl if contain right to left language, if not it keep ltr.

@zaher commented on GitHub (Jun 10, 2020): It need ` <p dir="auto"> ` for paragraph of text body that contain message or even topic. It automatically switch text to right align and use rtl if contain right to left language, if not it keep ltr.

GiteaMirror commented

2025-11-02 03:39:58 -06:00

@ahangarha commented on GitHub (Sep 12, 2020):

Hi again

I have made a Firefox add-on called Add Bidi Spport to demonstrate how my approach would work for adding bidi support to websites. Please install and use it in some websites and see the impact.

It is not made to solve the issue on all websites but to show how with a very simple approach, the issue can be efficiently resolved. Share your comments.

You may activate the addon and use it on showdownjs with the following text:


![Showdown][sd-logo]

یک two سه four


# نصب / یک two سه four

## LTR: One دو three چهار

You can download the latest release tarball directly from [releases][releases]

## Bower

    bower install showdown

## npm (server-side)

    نمونه کد فارسی npm install showdown و ادامه متن

## CDN

You can also use one of several CDNs available: 

* rawgit CDN

        https://cdn.rawgit.com/showdownjs/showdown/<version tag>/dist/showdown.min.js

* فارسی cdnjs

        https://cdnjs.cloudflare.com/ajax/libs/showdown/<version tag>/showdown.min.js

---------

# Syntax


## Table of contents

- [مقدمه](#introduction)
- [Paragraphs](#paragraphs)
- [سرآیند](#headings)
    * [Atx Style](#atx-style)
    * [سبک Setext](#setext-style)
    * [Header IDs](#header-ids)
- [Blockquotes](#blockquotes)
- [Bold and Italic](#bold-and-italic)

There are some fixes needed for lists but as you can see, it works perfect.

Share your concerns with me so that I can improve my solution. This issue must be resolved once for ever.

@ahangarha commented on GitHub (Sep 12, 2020): Hi again I have made a Firefox add-on called [Add Bidi Spport](https://addons.mozilla.org/en-US/firefox/addon/add-bidi-support/) to demonstrate how my approach would work for adding bidi support to websites. Please install and use it in some websites and see the impact. It is not made to solve the issue on all websites but to show how with a very simple approach, the issue can be efficiently resolved. Share your comments. You may activate the addon and use it on showdownjs with the following text: ``` ![Showdown][sd-logo] یک two سه four # نصب / یک two سه four ## LTR: One دو three چهار You can download the latest release tarball directly from [releases][releases] ## Bower bower install showdown ## npm (server-side) نمونه کد فارسی npm install showdown و ادامه متن ## CDN You can also use one of several CDNs available: * rawgit CDN https://cdn.rawgit.com/showdownjs/showdown/<version tag>/dist/showdown.min.js * فارسی cdnjs https://cdnjs.cloudflare.com/ajax/libs/showdown/<version tag>/showdown.min.js --------- # Syntax ## Table of contents - [مقدمه](#introduction) - [Paragraphs](#paragraphs) - [سرآیند](#headings) * [Atx Style](#atx-style) * [سبک Setext](#setext-style) * [Header IDs](#header-ids) - [Blockquotes](#blockquotes) - [Bold and Italic](#bold-and-italic) ``` There are some fixes needed for lists but as you can see, it works perfect. Share your concerns with me so that I can improve my solution. This issue must be resolved once for ever.

GiteaMirror commented

2025-11-02 03:39:59 -06:00

@ahangarha commented on GitHub (Sep 12, 2020):

If one share some technical information regarding the Markdown to HTML parser in the project, I might be able to make needed modifications and send a PR.

@ahangarha commented on GitHub (Sep 12, 2020): If one share some technical information regarding the Markdown to HTML parser in the project, I might be able to make needed modifications and send a PR.

GiteaMirror commented

2025-11-02 03:39:59 -06:00

@silverwind commented on GitHub (Apr 11, 2024):

This was partially fixed for markup content and input/textarea:

What's left to do is identify all areas in the UI where user content renders and add dir=auto it. I imagine it would be an enormous amount of work unless we can find some solution to automate it during backend rendering.

@silverwind commented on GitHub (Apr 11, 2024): This was partially fixed for markup content and input/textarea: - https://github.com/go-gitea/gitea/pull/24816 - https://github.com/go-gitea/gitea/pull/26735 What's left to do is identify all areas in the UI where user content renders and add `dir=auto` it. I imagine it would be an enormous amount of work unless we can find some solution to automate it during backend rendering.

GiteaMirror commented

2025-11-02 03:39:59 -06:00

@meyt commented on GitHub (Jul 6, 2025):

Placing this in $GITEA_CUSTOM/templates/custom/footer.tmpl works for me.

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const s = [
      // Project columns
      '.issue-card-title',
      // Issues list
      '#issue-list .issue-title',
      // Issue page
      '.issue-title-header .issue-title h1',
    ].join(',');
    document.querySelectorAll(s).forEach(el => el.setAttribute('dir', 'auto'));
  });
</script>

@meyt commented on GitHub (Jul 6, 2025): Placing this in `$GITEA_CUSTOM/templates/custom/footer.tmpl` works for me. ```html <script> document.addEventListener('DOMContentLoaded', function () { const s = [ // Project columns '.issue-card-title', // Issues list '#issue-list .issue-title', // Issue page '.issue-title-header .issue-title h1', ].join(','); document.querySelectorAll(s).forEach(el => el.setAttribute('dir', 'auto')); }); </script> ```

GiteaMirror commented

2025-11-02 03:39:59 -06:00

@ahangarha commented on GitHub (Jul 8, 2025):

I have some implementation in bidify-rb (ruby language). We should be able to adapt to for this too. It take HTML object and returns the bidified version of it.

@ahangarha commented on GitHub (Jul 8, 2025): I have some implementation in [bidify-rb](https://github.com/dobidi/bidify-rb) (ruby language). We should be able to adapt to for this too. It take HTML object and returns the bidified version of it.

GiteaMirror referenced this issue

2025-11-02 11:50:59 -06:00

[PR #874] [MERGED] Makefile: install on build #15626

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#874