Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RTL (Right to Left) support for comments and issues #147

Open
aziz opened this issue Mar 15, 2016 · 98 comments
Open

RTL (Right to Left) support for comments and issues #147

aziz opened this issue Mar 15, 2016 · 98 comments

Comments

@aziz
Copy link

aziz commented Mar 15, 2016

Not all disscussions on github are in English and some like Persian, Hebrew or Arabic are written from right to left.
It would be easy to add a checkmark to the editor to switch the direction from LTR to RTL and then represent that piece of text in UI from right to left.

This would dramatically improve the usability and enhance UX. For instance, take a look at this issue on an open source Persian font project. The text is barely readable if it's mixed with an English word (which happens quite a lot in a technical disscussion) and all it needs is a div wrapper with dir='rtl' align='right' or if you want to do it with CSS direction: rtl; text-align: right.

I can still write all my comments in HTML and add dir='rtl' align='right' but then I lose the ability to use markdown which is painful. Try writing a simple uordered list in html instead of makrdown and you'll feel the pain, let alone the html table.

@zoghal
Copy link

zoghal commented Apr 17, 2016

@aziz لطفا اضافه کن فونت تاهوما رو هم به صورت fallback تو استایل ست کنند. فارسی نوشتم که متوجه بشند دقیقا چی میکشیم.

@sijad
Copy link

sijad commented Apr 17, 2016

lots of people use RTL languages, please add this feature

@Mottie
Copy link

Mottie commented Jun 10, 2016

You can add a <p> with those attributes:

test

<p dir='rtl' align='right'>test</p>

@Mottie
Copy link

Mottie commented Jun 13, 2016

I created this userscript which will add a RTL block (as a div instead of a p because of margins) so you don't have to type all that HTML.

github-rtl-comments

!YAY

@aziz
Copy link
Author

aziz commented Jun 13, 2016

@Mottie This is great but not enough. As I mentioned inside that div that you automatically inject, we're gonna lose the ability to use markdown! Try to write RTL ordered lists or tables in HTML and you'll feel the pain.

@Mottie
Copy link

Mottie commented Jun 13, 2016

Hmm, ok I could set up the userscript to replace in-line tags, so something like this

--rtl

| h1 | h2 |
|----|----|
| c1 | c2 |

--/rtl

becomes this:

<div style="direction: rtl; text-align: right">
  <table>
    <thead>
      <tr>
        <th>h1</th>
        <th>h2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>c1</td>
        <td>c2</td>
      </tr>
    </tbody>
  </table>
</div>

Users without the userscript would see the --rtl and --/rtl tags. I would prefer to use HTML comments, but GFM strips them out.

@Mottie
Copy link

Mottie commented Jun 15, 2016

Ok, I've been looking into this a bit more. I think instead of using --rtl and --/rtl, using a &rlm; and &lrm; is a better idea. But, since I am still learning, I'm not sure which directional unicode symbol combination is best (ref):

Symbol Example =========== Result ===========
Mark &rlm; באמת! &lrm; ‏ באמת! ‎
Embedding &#x202b; באמת! &#x202a; ‫ באמת! ‪
Override &#x202e; באמת! &#x202d; ‮ באמת! ‭
Isolates &#x2067; באמת! &#x2066; ⁧ באמת! ⁦

I can get the userscript to replace any of those symbol combinations with a <div> set with direction:rtl; text-align:right;, although direction:rtl; may not be needed in some cases, so the content will be aligned to the right side.

Which symbol combination would you guys suggest?

@cben
Copy link

cben commented Jun 15, 2016

These unicode chars can control order but none of them can achieve align: right.

Or do you mean a user would use such chars in the markdown source, then run your script which would transform them into html with appropriate dir?
In that case, I recommend following the "first-strong" heuristic, widely used to infer base paragraph (or line) direction & alignment in plain text. That would work out-of-the-box in many cases, and can always be overridden by putting &rlm; / &lrm; at start of paragraph (no "closing" char needed).

A quick-and-dirty way to implement it is first converting markdown->HTML, then slapping dir="auto" on all block elements; but that doesn't work in IE/Edge. So find the first strong char in each block element and slap dir=ltr / dir=rtl accordingly.

  • Literal code should probably always be LTR. Ideally, Inline code should also be isolated: http://codepen.io/cben/pen/ezzWVO?editors=1100
  • Browsers tend to render weirdly mixed-direction items in one list.
  • Any solution producing html will make it very annoying to later edit a comment transformed by it. Too bad Github doesn't support <div markdown=1> :-(
    Perhaps you can preserve markdown source within an HTML comment.

This all sounds like it could be useful outside github.
CommonMark discussion: https://talk.commonmark.org/t/explicit-rtl-indication-in-pure-markdown/286
Perhaps implement first in Markdown Here extension? Perhaps formulate part of it as dir=auto polyfill?

Mottie added a commit to Mottie/GitHub-userscripts that referenced this issue Jun 15, 2016
* Replace `&rlm;` and `&lrm;` within markdown with a div.
* Include `unicode-bidi:isolate;`
* Force LTR inside code blocks.
* Start using some ES6 code.
* See dear-github/dear-github#147 for details.
@Mottie
Copy link

Mottie commented Jun 15, 2016

Hey @cben!

Thanks for the detailed post. It looks like what I had working locally was working as expected. I just updated the script to now use &rlm; and &lrm; as markers for the userscript.

github-rtl-comments

My main concern right now is that inline RTL blocks are all currently wrapped in a <div>. That's why the have the "Inline text is split up" in the example below... I originally had the code check for HTML inside the RTL block and if none was found, the content was wrapped in a <span>; but the problem was the span wouldn't behave as expected, so I commented that part out. Anyway, I would appreciate any feedback and/or help with the code.

  • Edit: Oh and I'm not going to worry about trying to support IE/Edge since I don't know of a way to run userscripts on it.

  • Edit2: The userscript adds a div with a class name. The class is defined as follows:

    .ghu-rtl-css { direction:rtl; text-align:right; unicode-bidi:isolate; }

    Is this an appropriate use of unicode-bidi?


Here is the code I was using to test the userscript. Below it is the rendered code (install the userscript to test).

### Inline text is split up

Mixed LTR &rlm; RTL! &lrm; and back to LTR

### RTL Block:

&rlm;

* item 1

    | h1 | h2 |
    |----|----|
    | c1 | c2 |

* item 2

    ```js
    // code blocks switch back to LTR
    console.log('&rlm; foo bar &lrm;');
    ```

* item 3

&lrm;

From http://codepen.io/cben/pen/ezzWVO?editors=1100

"Recall that `n!` denotes `factorial[n)` and equals 1\*2\*...\*ח."

&rlm;נזכיר ש-`n!` מסמן `factorial[n)` ושווה 1\*2\*...\*ח.&lrm;

Inline text is split up

Mixed LTR ‏ RTL! ‎ and back to LTR

RTL Block:

  • item 1

    h1 h2
    c1 c2
  • item 2

    // code blocks switch back to LTR
    console.log('&rlm; foo bar &lrm;');
  • item 3

From http://codepen.io/cben/pen/ezzWVO?editors=1100

"Recall that n! denotes factorial[n) and equals 12...*ח."

‏נזכיר ש-n! מסמן factorial[n) ושווה 12...*ח.‎

@aziz
Copy link
Author

aziz commented Jun 16, 2016

@Mottie great job.
There are some issues though:

  1. it does not wrok in Preview for me.
  2. it does not work after I submit the comment. I need to refresh the page to see it aligned to right.

This shows however how easy it is for github to implement this.
So I pledge github guys again to implement this little feature that'll make a lot of users much happier.

@Mottie
Copy link

Mottie commented Jun 16, 2016

Hmm, that is odd, the preview is working for me. I did encounter the issue with the userscript not being applied immediately after submitting a comment - I'll look into fixing that.

@Mottie
Copy link

Mottie commented Jun 16, 2016

Ok, I've updated the userscript to update the preview, after editing and adding new comments.

It's not GitHub's fault (yet) that RTL languages aren't supported (ref). The change needs to happen in the Markdown spec first, then organizations using Markdown will have to comply.

@mohpor
Copy link

mohpor commented Aug 2, 2016

Oh boy! You might think everybody's aware of RTL languages by now (2016!), but NOOOO, we have to wait for every renderer, parser or whatever to support RTL! For god's sake! Would you please support the RTL languages already?! (or at least support markdown="1" and let us handle it the way we are ok with, or add alignment, or ...)

amirkarimi added a commit to amirkarimi/reactivemanifesto that referenced this issue Mar 13, 2017
Test RTL without HTML. Got from (here)[dear-github/dear-github#147] 

It doesn't work in preview mode so I have to commit the change.
@n-eq
Copy link

n-eq commented Apr 7, 2017

Hi everyone,

I'm also concerned about this feature for Arabic. Any news?

@sijad
Copy link

sijad commented Apr 7, 2017

gitlab add dir="auto" to all users produced contents. it's not that much trouble I guess.

@sijad
Copy link

sijad commented Apr 7, 2017

@ghost
Copy link

ghost commented Nov 8, 2017

یه تگ div ایجاد کنید و اتربیوت dir='rtl' رو بهش بدین درست میشه. اگه رو این کامنت هم Inspect Element کنین اون تگ div رو خواهید دید.

@ghost
Copy link

ghost commented Nov 8, 2017

You can open a div tag with dir='rtl' and write inside it. (As I Did in the above comment)

@smkplus
Copy link

smkplus commented Nov 14, 2018

راست به چپ در فارسی

بر محمد و آل محمد صلوات

بر محمد و آل محمد صلوات

بر محمد و آل محمد صلوات

بر محمد و آل محمد صلوات

https://www.w3schools.com/html/html_formatting.asp

@AhmedElTabarani
Copy link

AhmedElTabarani commented Dec 4, 2021

Hello, since supporting automatic text conversion by language without using dir=rtl
An annoying problem appeared

Now I had some texts like this

بسم الله الرحمن الرحيم

<div dir=rtl>

- hello world

</div>

السلام عليكم

review:

image


Can't make the sentence "hello world" go right even though I use dir=rtl to force it

even when using align=right

بسم الله الرحمن الرحيم

<div dir=rtl align=right>

- hello world

</div>

السلام عليكم

review:

image


The bullet for the list is still on the left

@chesterbr
Copy link

Hello @AhmedElTabarani! I think you can make the "hello world" list item right-align if you remove the empty lines between <div dir=rtl> and </div>. For example, doing:

بسم الله الرحمن الرحيم

<div dir=rtl>
- hello world
</div>

السلام عليكم

we get

بسم الله الرحمن الرحيم

- hello world

السلام عليكم


You may then add extra spaces (or <br/>s if needed) outside to get the desired spacing.

@AhmedElTabarani
Copy link

hi @chesterbr
ok that works, but this replaces the bullet with -

and I notice that with nested list it became wrong

بسم الله الرحمن الرحيم

<div dir=rtl>
- hello world
  - hello
</div>

السلام عليكم

preview

image


بسم الله الرحمن الرحيم

<div dir=rtl>

- hello world
  - hello
  
</div>

السلام عليكم

preview

image

@AhmedElTabarani
Copy link

I hope to fix the problem in general
Because deleting extra line spaces is not a good solution
there are a lot of repos that maybe a lot of markdown files used to explain some content

I have a repo, I was explaining something on it with many lessons on this repo
After the new RTL language update, the content of each lesson became chaotic, some lines on the right and some on the left

@emmaviolet
Copy link

Thanks so much for all the feedback folks - it's really helpful.

@ahangarha, re: #147 (comment), I'd love to hear some other opinions here.

To be honest, changing the editor behaviour in this way feels bad to me. It seems like we're telling people "this is what the final result will look like" by supporting right-to-left languages in the editor at all, and then it's even more frustrating when the final result looks different from what we showed in the editor. But, I don't write in right-to-left languages, so I might be making the wrong trade-offs. I'm also going to get some opinions from some of our GitHub colleagues who do speak those languages.

@AhmedElTabarani, re: #147 (comment)

I hear the frustration. For the most part, we've been trying to follow patterns that we've seen elsewhere for RTL support, like on Facebook and Twitter, though I admit that's not possible in all cases because of Markdown-specific differences.

One thing I don't understand in your case is whether this is a long-term problem with the implementation, or rather a temporary adjustment problem that we need to work through. It sounds like (if I'm reading properly), the implementation is okay, but it's frustrating making changes to existing files that were written before this support was introduced. Is that right? If so, that's a challenge I'd like to help with - I just want to make sure I understand the problem before we try to solve it.

@AhmedElTabarani
Copy link

AhmedElTabarani commented Dec 10, 2021

Hi @emmaviolet

the implementation is okay, but it's frustrating making changes to existing files that were written before this support was introduced

yeah, it is right, but there is one issue with lists

Can't enforce list to go right if the first element was a LRT language context

try to make this list to go right

- English
- عربي
  - LTR language
  - عربي
  - عربي
  • using dir=rtl doesn't work (you can try it by yourself)
  • deleting extra line doesn't work too (is replacing the bullets with -)
  • using align=right make it go right Without the bullet (context only)

@AhmedElTabarani
Copy link

@emmaviolet Hi again, Sorry that I may have bothered you with so much talking about problems

But I discover the root of the problem
Any content that has a prefix special character, has a problem

like here #147 (comment), Can't enforce any content that has a prefix special character to go right

such as

<div dir=rtl>

- hello
> hello
- [ ] hello
## hello

</div>

preview:

image

@AhmedElTabarani
Copy link

@eladkarako

Using HTML only will solve all problem, but that not a good solution in general

@ahangarha
Copy link

Regarding the issue with forcing RTL on LTR list items, frankly I think this is too much to expect from Markdown. Markdown is not meant to serve like a rich text format. It is meant to be minimal and be consistent between plaintext view and parsed version to other formats. Adding bidi support has served this purpose for RTL/LTR content.

Here the aim is to hack Markdown to behave differently. And for sure it needs to be done in some specific way. Please remove how earlier it could be hacked by adding html element which actually has harmed significant amount of contents.

Since here you don't want to follow Markdown, then why not to write it in HTML?

<ul dir="rtl">
  <li>Hello World</li>

  <ul dir="rtl">
    <li>Hello World</li>
  </ul>
  <li>Hello World</li>
</ul>

And the result:

  • Hello World
    • Hello World
  • Hello World

@emmaviolet
Copy link

👋 I'm hopeful we've now improved/solved editor support (at least, as much as we can within textarea constraints). Would love your feedback. It's currently behind a feature flag, but I've taken the liberty of enabling for @ahangarha @AhmedElTabarani @AlirezaInGitHub @AradAral @cben @HarelM @layik @mahdifirouzi @Mottie @SaadBazaz @SMSadegh19 @withdata (happy to enable for others too, just shout).

Do let me know what you think - if it works for you we'd be delighted to ship publicly.

@ahangarha
Copy link

Hi @emmaviolet and thank for the work.

I checked the textarea and it works as expected. Just I wanted to know if you have dir="auto" on textarea, why you have used .bidirectional-writing-textarea to set unicode-bidi: plaintext. As far a I know, when you can add dir="auto" there is no need to set unicode-bidi.

@SMSadegh19
Copy link

ss

سلام

salam
یک دو سه تست می‌کنیم.
hi.
خط چهارم.

چهار پنج شش تست می‌کنیم.
how are you?
خداحافظ
good bye.

@SMSadegh19
Copy link

In the above case, Write box and Preview Area doesn't match...

Write Box:

image

Preview Area:

image

@ahangarha
Copy link

In the above case, Write box and Preview Area doesn't match...

Let's talk about the scenarios in which one would write something similar to what you did. I cannot imagine in what situation would a person write such markdown. If one needs to add text in different languages in different paragraphs, two new lines is required. One new line doesn't count as paragraph separator. Isn't it? If I am wrong, please share some example. I cannot imagine one.

@SMSadegh19
Copy link

You're right. It's not the problem in outcome.
But I just expect the matching between Write box and Preview Area.

@ahangarha
Copy link

But I just expect the matching between Write box and Preview Area.

Since we are dealing with rich text, we should have different expectation. I think before anything else we should know that markdown was not made as some simpler HTML syntax. Markdown is Markdown and is supposed to be readable and editable in plaintext. If we parse Markdown to other formats, it shouldn't change the way we look at markdown.

In markdown we want to be able to write and read text with minimum marks which can help us to understand formatting even in plaintext. If one needs to do something beyond what Markdown is capable of, I think should move for some rich text format.

In Markdown we should be able to make paragraphs, headings, lists, quotes, codes, table (in very basic format), link, image and some basic formattings such as bold and italic.

Yet there are few cases that making decision becomes hard especially in lists. But I think we are at very good situation. I cannot imagine any better way to handle such issues. If one follow md standards, rarely would face with any issue.

@emmaviolet
Copy link

Thanks both for the feedback!

But I just expect the matching between Write box and Preview Area.

I hear this - that's why we held off doing this for a while, because we can't get textarea to exactly match what's shown in preview (or at least, not that I know of).

However, the Write box and Preview Area mostly are different for the reasons @ahangarha describes. ### doesn't immediately show a header, even though we might want it to.

Going forward, we're investigating whether we can/should do away with textareas and replace them with something that plays a bit nicer, like a content-editable div. But that's a larger piece of work that we'll prioritise separately.

@ahangarha
Copy link

ahangarha commented Jan 24, 2022

I can list other issues which are more common to encounter and frankly there is no way to specify one fit all solution for them. For example take this list:

- left راست
- راست left

and this is the result:

  • left راست
  • راست left

while in any editor, the text would appear like this:

image

This is the same when it comes to code block. One real issue is that github MD to HTML renders all code blocks as LTR while there are situation in which one might want to add RTL comment! Yet this one is a bug on github parser which I hope it be resolved but the other (list) needs some convention. The current status is good: whole list follow the direction of the first item. Doing anything else, brings significant complexities.

I can provide live example of such issues but to be frank, we need to come to agreement that we are dealing with plaintext not rich text. Either we should go for WYSIWYG editor which is horrible for development or use Markdown as Markdown.

@ahangarha
Copy link

ahangarha commented Jan 31, 2022

@emmaviolet There is an issue with blockquote: Border is fixed on left side.

It can be resolved easily by styling p inside blockquote. This is the how it should happen:

before:

.markdown-body blockquote {
  padding: 0 1em;
  color: var(--color-fg-muted);
  border-left: .25em solid var(--color-border-default);
}

after:

.markdown-body blockquote > p {
  padding: 0 1em;
  color: var(--color-fg-muted);
  border-inline-start: .25em solid var(--color-border-default);
}

Update:

I withdraw this suggestion

@chesterbr
Copy link

chesterbr commented Feb 7, 2022

@ahangarha Hello! Could you please provide an example of a blockquote that shows the issue that the styling above would fix? Thank you!

@ahangarha
Copy link

@chesterbr Thanks for your reply

Since the day I sent the comment I have made several experiment with different scenarios and realized this (nested elements in general) is a complex issue. I would like to withdraw my suggestion as it doesn't work with lists but still give you example to deal with.

take this code:

> # راست 1 left چپ 2
> راست 1 left چپ 2
>
> # left 1 راست right 2
> left 1 راست right 2

راست 1 left چپ 2

راست 1 left چپ 2

left 1 راست right 2

left 1 راست right 2

The issue is that Even if the text inside the quote is RTL, the blockquote shows the line on the left side. Simply it is hardcoded to be that side.

Now apply what I said. The result should be something like this:
image

My suggestion can kind of fix the issue but not really. It only works in limited scenarios. I withdraw my suggestion but also I want to request github devs to look into this issue.

I am myself working on a plugin for markdown-it and because of that, I am getting more dive into this issue. Would be great if there be some connection between you guys and us to finally make kind of documentation and guideline for such issues.

By the way Gitlab only applies dir="auto" to first level elements; in this case, only to blockquote element. Not to say if it is better or worse, just a different approach.

@sayjeyhi
Copy link

Any news on this guys?
Automatic dir="auto" attributed added by default is creating issues on my repo. I want
to have right direction on ol but md-2-html renderer is adding dir="auto" on ol and make some issues there.

here is a book that we are translating and we have problems with right-to-left styles.
https://github.com/Mariotek/javascript-persian-interview-questions/blob/master/book.md

@ahangarha
Copy link

But also this is an example of why we should try to avoid adding dir="auto" to nested elements. Gitlab only apply dir="auto" to top level elements.

Also as a suggestion see if you can avoid adding headings in lists.

@layik
Copy link

layik commented Apr 18, 2022

Hi @emmaviolet just seen this thread after months! Great work, please find my tests.

UL follows first item, tick

  • کورد
    • لیستی ناوەوە
      • ناوتر
  • hello

OL button adds latin nums but works

  1. لیستی ژمێردراو
  2. هەروایە
  • OL doesn't recognise numbers

١. یەکەم
٢. دوەمین

  • Checklist doesnt work

  • یەکەم

  • دوەم

Heading works, tick

سەردێڕ

سەردێڕ ٢

سەردێڕ ٣

  • Code block varies between editor and preview
var a = 2
// تێبینی

Inline Code works, tick

کوردی

Tagging works, tick

@احمد

  • Quote works but line still on left

گوتەیەک

Links work, tick

بەستەر بەستەر تەواوە. Even with some ltr

Thank you!

@emmaviolet
Copy link

Thanks for raising @layik - looking into this and will get back.

@aghamir
Copy link

aghamir commented May 8, 2022

In task list, when using rtl convert to issue button overlap the check button.

Screenshot from 2022-05-08 11-45-48

amosshapira added a commit to amosshapira/Resources that referenced this issue Nov 9, 2022
First attempt was not for GitHub markdown.
This time try to follow a bug report and remove spaces between items in the list.
(dear-github/dear-github#147 (comment))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests