Support for Right-To-Left text #220

New Issue

Closed

opened 2026-01-29 14:30:43 +00:00 by claunia · 4 comments

claunia commented 2026-01-29 14:30:43 +00:00

Owner

Copy Link

Originally created by @mhmd-azeez on GitHub (Aug 11, 2018).

Adding support for markdown in achieved by adding dir attribute to the rendered html elements. There are two ways of doing that:

Either you explicitly mark elements as rtl based on their contents, which is not too hard but might slow things down a bit. Or, you mark all of the structural elements with dir="auto" and let the browsers do the heavy lifting.

If you are interested, I am willing to send a PR, but I might need some help in some decisions and specific areas (like getting the first character of a block in a fast way, for example). For more information please take a look at dear-github/dear-github#147. Whichever way we choose, it's better than not supporting it at all.

I played with the second idea a bit, it's very easy to implement it. But not every browser supports it according to my tests and no browser seems to support tables. Here is a simple implementation of the second method:

public class RtlExtension : IMarkdownExtension
{
    public void Setup(MarkdownPipelineBuilder pipeline)
    {
        // Make sure we don't have a delegate twice
        pipeline.DocumentProcessed -= Pipeline_DocumentProcessed;
        pipeline.DocumentProcessed += Pipeline_DocumentProcessed;
    }

    private void Pipeline_DocumentProcessed(MarkdownDocument document)
    {
        foreach (var node in document.Descendants())
        {
            if (node is ParagraphBlock || node is ListBlock ||
                node is HeadingBlock || node is QuoteBlock)
            {
                 node.GetAttributes().AddPropertyIfNotExist("dir", "auto");
            }
        }
    }

    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
    {

    }
}

For the following markdown:

# Fruits
In botany, a [fruit](https://en.wikipedia.org/wiki/Fruit) is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.

> Fruits are good for health
-- Anonymous

## Types of fruits
- Berries
  - Strawberry
  - kiwifruit
- Citrus
  - Orange
  - Lemon

## Examples of fruits :yum:
1. Apple
2. Banana
3. Orange

## Grocery List
- [X] Watermelon
- [X] Apricot
- [ ] Fig

Nuitrion |Apple | Oranges
--|-- | --
Calories|52|47
Sugar|10g|9g

# میوە
[میوە](https://ckb.wikipedia.org/wiki/%D9%85%DB%8C%D9%88%DB%95) یان مێوە بەروبوومی ڕوەکیە کە ڕوەکەکان ھەڵیان ئەگرن وەک بەرگێک بۆ تۆوەکانیان، بە زۆری جیادەکرێتەوە بە شیرینی یان ترشی لە تامدا و بە بوونی بڕێکی زۆر ئاو

> میوە بۆ تەندروستی باشە
-- نەزانراو

## نموونەی میوە :yum:
1. سێو
2. مۆز
3. پرتەقاڵ

## جۆرەکانی میوە
- توو
  - فڕاولە
  - کیوی
- مزرەمەنی
  - پڕتەقاڵ
  - لیمۆ

## لیستی کڕین
- [X] شووتی
- [X] قەیسی
- [ ] هەنجیر

 پێکهاتە |سێو | پڕتەقاڵ
--|-- | --
کالۆری|٥٢|٤٧
شەکر| ١٠گ|٩گ

The following html is produced (note, to view the html correctly, you might need to have <meta charset="UTF-8"> in the head of the html document):

<h1 id="fruits" dir="auto">Fruits</h1>
<p dir="auto">In botany, a <a href="https://en.wikipedia.org/wiki/Fruit">fruit</a> is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.</p>
<blockquote class="blockquote" dir="auto">
<p dir="auto">Fruits are good for health
-- Anonymous</p>
</blockquote>
<h2 id="types-of-fruits" dir="auto">Types of fruits</h2>
<ul dir="auto">
<li>Berries
<ul dir="auto">
<li>Strawberry</li>
<li>kiwifruit</li>
</ul>
</li>
<li>Citrus
<ul dir="auto">
<li>Orange</li>
<li>Lemon</li>
</ul>
</li>
</ul>
<h2 id="examples-of-fruits" dir="auto">Examples of fruits 😋</h2>
<ol dir="auto">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
<h2 id="grocery-list" dir="auto">Grocery List</h2>
<ul class="contains-task-list" dir="auto">
<li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> Watermelon</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> Apricot</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Fig</li>
</ul>
<table class="table" dir="auto">
<thead>
<tr>
<th dir="auto">Nuitrion</th>
<th dir="auto">Apple</th>
<th dir="auto">Oranges</th>
</tr>
</thead>
<tbody>
<tr>
<td dir="auto">Calories</td>
<td dir="auto">52</td>
<td dir="auto">47</td>
</tr>
<tr>
<td dir="auto">Sugar</td>
<td dir="auto">10g</td>
<td dir="auto">9g</td>
</tr>
</tbody>
</table>
<h1 id="section" dir="auto">میوە</h1>
<p dir="auto"><a href="https://ckb.wikipedia.org/wiki/%D9%85%DB%8C%D9%88%DB%95">میوە</a> یان مێوە بەروبوومی ڕوەکیە کە ڕوەکەکان ھەڵیان ئەگرن وەک بەرگێک بۆ تۆوەکانیان، بە زۆری جیادەکرێتەوە بە شیرینی یان ترشی لە تامدا و بە بوونی بڕێکی زۆر ئاو</p>
<blockquote class="blockquote" dir="auto">
<p dir="auto">میوە بۆ تەندروستی باشە
-- نەزانراو</p>
</blockquote>
<h2 id="section-1" dir="auto">نموونەی میوە 😋</h2>
<ol dir="auto">
<li>سێو</li>
<li>مۆز</li>
<li>پرتەقاڵ</li>
</ol>
<h2 id="section-2" dir="auto">جۆرەکانی میوە</h2>
<ul dir="auto">
<li>توو
<ul dir="auto">
<li>فڕاولە</li>
<li>کیوی</li>
</ul>
</li>
<li>مزرەمەنی
<ul dir="auto">
<li>پڕتەقاڵ</li>
<li>لیمۆ</li>
</ul>
</li>
</ul>
<h2 id="section-3" dir="auto">لیستی کڕین</h2>
<ul class="contains-task-list" dir="auto">
<li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> شووتی</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> قەیسی</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> هەنجیر</li>
</ul>
<table class="table" dir="auto">
<thead>
<tr>
<th dir="auto">پێکهاتە</th>
<th dir="auto">سێو</th>
<th dir="auto">پڕتەقاڵ</th>
</tr>
</thead>
<tbody>
<tr>
<td dir="auto">کالۆری</td>
<td dir="auto">٥٢</td>
<td dir="auto">٤٧</td>
</tr>
<tr>
<td dir="auto">شەکر</td>
<td dir="auto">١٠گ</td>
<td dir="auto">٩گ</td>
</tr>
</tbody>
</table>

Screenshot (Chrome):

In Chrome, Opera and Firefox, all of the elements (except for table) are rendered correctly. Unfortunately, Edge and IE don't respect the direction attribute at all (If its set to "auto").

Originally created by @mhmd-azeez on GitHub (Aug 11, 2018). Adding support for markdown in achieved by adding `dir` attribute to the rendered html elements. There are two ways of doing that: Either you explicitly mark elements as rtl based on their contents, which is not too hard but might slow things down a bit. Or, you mark all of the structural elements with `dir="auto"` and let the browsers do the heavy lifting. If you are interested, I am willing to send a PR, but I might need some help in some decisions and specific areas (like getting the first character of a block in a fast way, for example). For more information please take a look at dear-github/dear-github#147. Whichever way we choose, it's better than not supporting it at all. I played with the second idea a bit, it's very easy to implement it. But not every browser supports it according to my tests and no browser seems to support tables. Here is a simple implementation of the second method: ```csharp public class RtlExtension : IMarkdownExtension { public void Setup(MarkdownPipelineBuilder pipeline) { // Make sure we don't have a delegate twice pipeline.DocumentProcessed -= Pipeline_DocumentProcessed; pipeline.DocumentProcessed += Pipeline_DocumentProcessed; } private void Pipeline_DocumentProcessed(MarkdownDocument document) { foreach (var node in document.Descendants()) { if (node is ParagraphBlock || node is ListBlock || node is HeadingBlock || node is QuoteBlock) { node.GetAttributes().AddPropertyIfNotExist("dir", "auto"); } } } public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer) { } } ``` For the following markdown: ``` # Fruits In botany, a [fruit](https://en.wikipedia.org/wiki/Fruit) is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering. > Fruits are good for health -- Anonymous ## Types of fruits - Berries - Strawberry - kiwifruit - Citrus - Orange - Lemon ## Examples of fruits :yum: 1. Apple 2. Banana 3. Orange ## Grocery List - [X] Watermelon - [X] Apricot - [ ] Fig Nuitrion |Apple | Oranges --|-- | -- Calories|52|47 Sugar|10g|9g # میوە [میوە](https://ckb.wikipedia.org/wiki/%D9%85%DB%8C%D9%88%DB%95) یان مێوە بەروبوومی ڕوەکیە کە ڕوەکەکان ھەڵیان ئەگرن وەک بەرگێک بۆ تۆوەکانیان، بە زۆری جیادەکرێتەوە بە شیرینی یان ترشی لە تامدا و بە بوونی بڕێکی زۆر ئاو > میوە بۆ تەندروستی باشە -- نەزانراو ## نموونەی میوە :yum: 1. سێو 2. مۆز 3. پرتەقاڵ ## جۆرەکانی میوە - توو - فڕاولە - کیوی - مزرەمەنی - پڕتەقاڵ - لیمۆ ## لیستی کڕین - [X] شووتی - [X] قەیسی - [ ] هەنجیر پێکهاتە |سێو | پڕتەقاڵ --|-- | -- کالۆری|٥٢|٤٧ شەکر| ١٠گ|٩گ ``` The following html is produced (note, to view the html correctly, you might need to have `<meta charset="UTF-8">` in the head of the html document): ``` <h1 id="fruits" dir="auto">Fruits</h1> <p dir="auto">In botany, a <a href="https://en.wikipedia.org/wiki/Fruit">fruit</a> is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.</p> <blockquote class="blockquote" dir="auto"> <p dir="auto">Fruits are good for health -- Anonymous</p> </blockquote> <h2 id="types-of-fruits" dir="auto">Types of fruits</h2> <ul dir="auto"> <li>Berries <ul dir="auto"> <li>Strawberry</li> <li>kiwifruit</li> </ul> </li> <li>Citrus <ul dir="auto"> <li>Orange</li> <li>Lemon</li> </ul> </li> </ul> <h2 id="examples-of-fruits" dir="auto">Examples of fruits 😋</h2> <ol dir="auto"> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ol> <h2 id="grocery-list" dir="auto">Grocery List</h2> <ul class="contains-task-list" dir="auto"> <li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> Watermelon</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> Apricot</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Fig</li> </ul> <table class="table" dir="auto"> <thead> <tr> <th dir="auto">Nuitrion</th> <th dir="auto">Apple</th> <th dir="auto">Oranges</th> </tr> </thead> <tbody> <tr> <td dir="auto">Calories</td> <td dir="auto">52</td> <td dir="auto">47</td> </tr> <tr> <td dir="auto">Sugar</td> <td dir="auto">10g</td> <td dir="auto">9g</td> </tr> </tbody> </table> <h1 id="section" dir="auto">میوە</h1> <p dir="auto"><a href="https://ckb.wikipedia.org/wiki/%D9%85%DB%8C%D9%88%DB%95">میوە</a> یان مێوە بەروبوومی ڕوەکیە کە ڕوەکەکان ھەڵیان ئەگرن وەک بەرگێک بۆ تۆوەکانیان، بە زۆری جیادەکرێتەوە بە شیرینی یان ترشی لە تامدا و بە بوونی بڕێکی زۆر ئاو</p> <blockquote class="blockquote" dir="auto"> <p dir="auto">میوە بۆ تەندروستی باشە -- نەزانراو</p> </blockquote> <h2 id="section-1" dir="auto">نموونەی میوە 😋</h2> <ol dir="auto"> <li>سێو</li> <li>مۆز</li> <li>پرتەقاڵ</li> </ol> <h2 id="section-2" dir="auto">جۆرەکانی میوە</h2> <ul dir="auto"> <li>توو <ul dir="auto"> <li>فڕاولە</li> <li>کیوی</li> </ul> </li> <li>مزرەمەنی <ul dir="auto"> <li>پڕتەقاڵ</li> <li>لیمۆ</li> </ul> </li> </ul> <h2 id="section-3" dir="auto">لیستی کڕین</h2> <ul class="contains-task-list" dir="auto"> <li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> شووتی</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> قەیسی</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> هەنجیر</li> </ul> <table class="table" dir="auto"> <thead> <tr> <th dir="auto">پێکهاتە</th> <th dir="auto">سێو</th> <th dir="auto">پڕتەقاڵ</th> </tr> </thead> <tbody> <tr> <td dir="auto">کالۆری</td> <td dir="auto">٥٢</td> <td dir="auto">٤٧</td> </tr> <tr> <td dir="auto">شەکر</td> <td dir="auto">١٠گ</td> <td dir="auto">٩گ</td> </tr> </tbody> </table> ``` Screenshot (Chrome):  In Chrome, Opera and Firefox, all of the elements (except for table) are rendered correctly. Unfortunately, Edge and IE don't respect the direction attribute at all (If its set to "auto").

claunia added the enhancement label 2026-01-29 14:30:43 +00:00

claunia closed this issue 2026-01-29 14:30:44 +00:00

claunia commented 2026-01-29 14:30:44 +00:00

Author

Owner

Copy Link

@xoofx commented on GitHub (Aug 23, 2018):

Why not for a PR, but just wondering if a CSS could not make this just easier? (Apply automatically dir:auto to any li, p tag?

@xoofx commented on GitHub (Aug 23, 2018): Why not for a PR, but just wondering if a CSS could not make this just easier? (Apply automatically dir:auto to any `li`, `p` tag?

claunia commented 2026-01-29 14:30:45 +00:00

Author

Owner

Copy Link

@mhmd-azeez commented on GitHub (Aug 23, 2018):

@xoofx direction attribute of CSS doesn't seem to support auto

@mhmd-azeez commented on GitHub (Aug 23, 2018): @xoofx `direction` attribute of CSS [doesn't seem to support `auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)

claunia commented 2026-01-29 14:30:45 +00:00

Author

Owner

Copy Link

@mhmd-azeez commented on GitHub (Aug 23, 2018):

And to be honest, I am more inclined toward the first method: explicitly setting dir="rtl" instead of relying on dir="auto" because every borwser doesnt support it.

@mhmd-azeez commented on GitHub (Aug 23, 2018): And to be honest, I am more inclined toward the first method: explicitly setting `dir="rtl"` instead of relying on `dir="auto"` because every borwser doesnt support it.

claunia commented 2026-01-29 14:30:45 +00:00

Author

Owner

Copy Link

@xoofx commented on GitHub (Aug 23, 2018):

So, PR welcome then.

@xoofx commented on GitHub (Aug 23, 2018): So, PR welcome then.

claunia referenced this issue 2026-01-29 14:46:41 +00:00

[PR #220] [CLOSED] Adding a failing unit test to TestPlainText test class. #875

claunia referenced this issue 2026-01-29 14:46:44 +00:00

[PR #220] Adding a failing unit test to TestPlainText test class. #880

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

master

example-lunet-api-doc

jira-markup

perf-core-vs-mono

0.45.0

0.44.0

0.43.0

0.42.0

0.41.3

0.41.2

0.41.1

0.41.0

0.40.0

0.39.1

0.39.0

0.38.0

0.37.0

0.36.2

0.36.1

0.36.0

0.35.0

0.34.0

0.33.0

0.32.0

0.31.0

0.30.4

0.30.3

0.30.2

0.30.1

0.30.0

0.29.0

0.28.1

0.28.0

0.27.0

0.26.0

0.25.0

0.24.0

0.23.0

0.22.1

0.22.0

0.21.1

0.21.0

0.20.0

0.18.3

0.18.2

0.18.1

0.18.0

0.17.1

0.17.0

v0.16.0

v0.15.7

v0.15.6

v0.15.5

v0.15.4

v0.15.3

v0.15.2

v0.15.1

v0.15.0

v0.14.9

v0.14.8

v0.14.7

v0.14.6

v0.14.5

v0.14.4

v0.14.3

v0.14.2

v0.14.1

v0.14.0

v0.13.4

v0.13.3

v0.13.2

v0.13.1

v0.13.0

v0.12.4

v0.12.3

v0.12.2

v0.12.1

v0.12.0

v0.11.0

v0.10.7

v0.10.6

v0.10.5

v0.10.4

v0.10.3

v0.10.2

v0.10.1

v0.10.0

v0.9.1

v0.9.0

v0.8.5

v0.8.4

v0.8.3

v0.8.2

v0.8.1

v0.8.0

v0.7.5

v0.7.4

v0.7.3

v0.7.2

v0.7.1

v0.7.0

v0.6.2

v0.6.1

v0.6.0

v0.5.12

v0.5.11

v0.5.10

v0.5.9

v0.5.8

v0.5.7

v0.5.6

v0.5.5

v0.5.4

v0.5.3

v0.5.2

v0.5.1

v0.5.0

v0.4.0

v0.3.4

v0.3.3

v0.3.2

v0.3.1

v0.3.0

v0.2.1

v0.2.0

v0.1.1

v0.1.0

Labels

Clear labels

bug

documentation

enhancement

extension

Hacktoberfest

invalid

PR Welcome!

pull-request

Mirrored from GitHub Pull Request

question

wontfix

No Label enhancement

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

claunia

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#220