Hi
I noticed that if I am using an RTL language in discourse, like Arabic or Hebrew, the LTR language markdown styles won’t show properly, sample:
1 Like
Yes, I can reproduce that issue with lists. The markdown is being parsed correctly, but the padding on the <ul> element is being added based on the user’s locale, not on the language of the text. This can be fixed. A temporary workaround is to add this CSS to the site’s theme.
ul[dir="ltr"] {
padding-right: 0;
padding-left: 40px;
}
ul[dir="rtl"] {
padding-left: 0;
padding-right: 40px;
}
Have you noticed any other issues with markdown?
3 Likes
Oops that was a fast response… thanks for that !
Ah four stuff:
-
As you can see in the picture above, each line should be delt with the first character (if an RTL lang like Arabic, it should go to the right, if English, then to the left)… currently it’s being dealt with the first character in the first line instead of each line separately.
-
Indentation seems broken too when using RTL and LTR (espically when writing codes)… gonna copy some examples in the next post (maybe that’s related to the same issue of this topic).
-
Discourse markdown seems different than other websites markdown… when moving some tutorials to github and gitlab, they don’t have the same format, kinda crippled.
(I don’t know whether discourse or github or any other website not using “standard” markdown if there is any standard
)Sample: https://github.com/coretabs-academy/backend-tutorials
You can fork it and change.txtinto.mdand see how crippled many lines would be like. -
You can see in my reply, the indentation behaves kinda weird as well, I used three spaces instead of two to grab the part of “I don’t know whether dicourse…” with the point no. 3.
1 Like
The issue with the markdown I looked at here https://github.com/coretabs-academy/backend-tutorials is where there are list items with different text directions in a list. The direction of the <ul> element is set from the text in the first list item. Code blocks as a list items will work correctly, but for any other mixed text, if you want the content to be aligned correctly, you have to create two lists. There doesn’t seem to be markdown syntax for ending a list. Adding a closing </ul> element or a line of text that is outside of a list works.
Is there a standard for how a list with mixed English and Arabic text should be displayed?
I’ll get the CSS padding for lists fixed tomorrow.
1 Like
I know there are html fixes for this issue, I once saw someone who uses a <div> with rtl, but it’s just an ugly solution… why markdown then ? I would simply use html instead 
Sample here (have a look at the raw file): https://github.com/shadimac/django-Workshops-Arabic/blob/master/Workshop(05)-Working%20with%20Visual%20Studio%20Code.md
I don’t think there is a standard for that, but I think it’s very convenient if the check of the RTL or LTR is based on the first character in each line (same implementation in whatsapp too).
Let’s say I wanna write a new line like this:
أهلا جميعاً !
Isn’t it much better to show it rtl based on the first char instead of showing the whole block in one direction ? I know this might cause some performance hit for the markdown parser, but there must be an elegant solution out there.
Thanks for your fast response !
If you inspect the parsed HTML with your browser, you will see that this is what it’s doing. Each HTML element has it’s dir attribute set based on the first strong rtl or ltr character in the text. Unfortunately, lists are a special case, because the outer ul or ol element sets the alignment for each of the inner li elements. If you look at the parsed li elements, you will see that the dir attribute is set based off the first strong character. For example, the html that is generated for this list:
* this is a left-to-right list with a right-to-left element
* هذه جملة تنتهي بعلامة ترقيم!
is
<ul dir="ltr">
<li dir="ltr">this is a left-to-right list with a right-to-left element</li>
<li dir="rtl">هذه جملة تنتهي بعلامة ترقيم!</li>
</ul>
The outer ul element sets the alignment for the entire list. The inner li elements have their direction set correctly, This is useful for keeping the punctuation mark in the right place. There is an issue with the list bullets when mixed text directions are used in a list. I’ll see if that can be fixed. In general, I think it would be best to avoid using lists with mixed text directions.
Any feedback you have on mixed text directions is greatly appreciated.
4 Likes
hmm… but, the paragraph tags are not rtl’ed based on the first char (please look at my previous reply)
I think it’s better if the above text is shown as
Difference is simple:
<p>Let’s say I wanna write a new line like this:</p>
<p>أهلا جميعاً !</p>
V.S:
<p>Let’s say I wanna write a new line like this:</p>
<p dir="rtl">أهلا جميعاً !</p>
One thing to note, is that this will only work on sites that have enabled the ‘support mixed text direction’ setting. That setting is not enabled on Meta, but I can see from the screenshot in your initial post that you have been trying this on a site that does have the setting enabled.
When I set my local to Arabic, and enter the following markup into the composer
<p>Let’s say I wanna write a new line like this:</p>
<p>أهلا جميعاً !</p>
This is the HTML that is generated
<p dir="ltr">Let’s say I wanna write a new line like this:</p>
<p dir="rtl">أهلا جميعاً !</p>
The result looks like this:
Entering the text as Markdown also works, and is the more standard way of doing it:
Let’s say I wanna write a new line like this:
أهلا جميعاً !
When using Markdown, you must include an empty line between the two lines of text to create a new paragraph.
If your text is inside of a list, it will not work as expected.
If the above Markdown is not working for you on a site that has enabled mixed text direction support, can you let us know which browser you are using?
2 Likes
Ah… my bad !
Actually what I tried is above (in Opera) assuming it would behave as in my forums, right here forums.coretabs.net… but as you said, it works well with that option enabled.
Thanks a lot for your fast responses and cooperation.
3 Likes