# Markdown css styles not shown when RTL is enable

**URL:** https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356
**Category:** Bug
**Created:** [July 14, 2018, 4:32pm UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356 "2018-07-14T16:32:00Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![YaserAlnajjar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/yaseralnajjar/32/100729_2.png) [@YaserAlnajjar](https://meta.discourse.org/u/YaserAlnajjar)
#### Post date: [July 14, 2018, 4:32pm UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/1 "2018-07-14T16:32:01Z")

</div>

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:

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/0/a0ff3e2176e06dc8b71be2265aeb6d7522fe39b6.png)

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [July 14, 2018, 5:33pm UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/2 "2018-07-14T17:33:32Z")

</div>

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.

```plaintext
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?

---

<div class="post-metadata">

### Author: ![YaserAlnajjar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/yaseralnajjar/32/100729_2.png) [@YaserAlnajjar](https://meta.discourse.org/u/YaserAlnajjar)
#### Post date: [July 15, 2018, 1:29pm UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/4 "2018-07-15T13:29:03Z")

</div>

Oops that was a fast response… thanks for that !

> [@simon](#):
>
> Have you noticed any other issues with markdown?

Ah four stuff:

1. 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.

2. 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).

3. 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.

4. 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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [July 15, 2018, 9:46pm UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/5 "2018-07-15T21:46:41Z")

</div>

> [@YaserAlnajjar](#):
>
> any other website not using “standard” markdown if there is any standard

see [http://commonmark.org](http://commonmark.org)

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [July 15, 2018, 10:35pm UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/6 "2018-07-15T22:35:35Z")

</div>

The issue with the markdown I looked at here [GitHub - coretabs-academy/backend-tutorials · GitHub](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.

---

<div class="post-metadata">

### Author: ![YaserAlnajjar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/yaseralnajjar/32/100729_2.png) [@YaserAlnajjar](https://meta.discourse.org/u/YaserAlnajjar)
#### Post date: [July 15, 2018, 10:55pm UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/7 "2018-07-15T22:55:19Z")

</div>

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): [django-Workshops-Arabic/Workshop(05)-Working with Visual Studio Code.md at master · skahwaji/django-Workshops-Arabic · GitHub](https://github.com/shadimac/django-Workshops-Arabic/blob/master/Workshop(05)-Working%20with%20Visual%20Studio%20Code.md)

> [@simon](#):
>
> Is there a standard for how a list with mixed English and Arabic text should be displayed?

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 !

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [July 16, 2018, 12:12am UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/8 "2018-07-16T00:12:16Z")

</div>

> [@YaserAlnajjar](#):
>
> Isn’t it much better to show it rtl based on the first char instead of showing the whole block in one direction

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:

```plaintext
* this is a left-to-right list with a right-to-left element
* هذه جملة تنتهي بعلامة ترقيم!

```

is

```plaintext
<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.

---

<div class="post-metadata">

### Author: ![YaserAlnajjar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/yaseralnajjar/32/100729_2.png) [@YaserAlnajjar](https://meta.discourse.org/u/YaserAlnajjar)
#### Post date: [July 16, 2018, 10:15am UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/9 "2018-07-16T10:15:36Z")

</div>

> [@simon](#):
>
> Each HTML element has it’s `dir` attribute set based on the first strong rtl or ltr character in the text

hmm… but, the paragraph tags are not rtl’ed based on the first char (please look at my previous reply)

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/a/3a9e48b580259e6b9a136fec7a35b0cbb8e34ff6.png)

I think it’s better if the above text is shown as

![image](https://global.discourse-cdn.com/meta/original/3X/4/d/4d739f22ee6a2384bca0681858a1889356bf7036.png)

Difference is simple:

```plaintext
<p>Let’s say I wanna write a new line like this:</p>
<p>أهلا جميعاً !</p>

```

V.S:

```plaintext
<p>Let’s say I wanna write a new line like this:</p>
<p dir="rtl">أهلا جميعاً !</p>

```

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [July 16, 2018, 8:22pm UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/10 "2018-07-16T20:22:23Z")

</div>

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

```plaintext
<p>Let’s say I wanna write a new line like this:</p>
<p>أهلا جميعاً !</p>

```

This is the HTML that is generated

```plaintext
<p dir="ltr">Let’s say I wanna write a new line like this:</p>
<p dir="rtl">أهلا جميعاً !</p>

```

The result looks like this:

 ![25%20PM](https://global.discourse-cdn.com/meta/original/3X/e/c/ec3c73f2a29bd79744c544d554ea20f3ac29f56c.png)

Entering the text as Markdown also works, and is the more standard way of doing it:

```plaintext
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?

---

<div class="post-metadata">

### Author: ![YaserAlnajjar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/yaseralnajjar/32/100729_2.png) [@YaserAlnajjar](https://meta.discourse.org/u/YaserAlnajjar)
#### Post date: [July 16, 2018, 9:26pm UTC](https://meta.discourse.org/t/markdown-css-styles-not-shown-when-rtl-is-enable/92356/11 "2018-07-16T21:26:58Z")

</div>

Ah… my bad !

Actually what I tried is above (in Opera) assuming it would behave as in my forums, right here [forums.coretabs.net](http://forums.coretabs.net)… but as you said, it works well with that option enabled.

Thanks a lot for your fast responses and cooperation.
