How to write RTL text in Jekyll posts?

Question

I want to set the default text direction for my Jekyll blog posts to right to left(RTL),

I usually used '<div dir="rtl">' in the beginning of the text to do this in Github markdown

but it seems I cannot use '<div dir="rtl">' in Jekyll markdown to set text direction correctly,

because my post gets all jammed up and will not display correctly.

Any suggestions?

Did you put the div code in the layout? – Mr. Hugo Nov 19 '17 at 11:39 — Mr. Hugo, Nov 19 '17 at 11:39

score 3 · Answer 1 · answered Nov 19 '17 at 11:52

3

Override your theme layout (you can follow the instructions of https://jekyllrb.com/docs/themes/#overriding-theme-defaults) and then simply wrap the content tag with the desired div:

<div dir="rtl">
{{content}} 
</div>

answered Nov 19 '17 at 11:52

marcanuy

23,118
9
64
113

Actually I need a more subtle solution, I mean I have a 'post template'(in Kramer Markdown) and I write mixed Persian and English text in it so each type of text ought to have its proper direction; I think your suggestion will make all the contents of a post to be displayed in a RTL manner which will not work for English texts(that are to be shown LTR). Does Markdown 2.0 have any directive/command for partially setting text directions? – Hassan Abedi Nov 19 '17 at 14:24
1

@HassanAbedi you can write html tags in kramdown, what gets wrong with it? – marcanuy Nov 19 '17 at 15:10

score 1 · Answer 2 · answered Oct 31 '20 at 21:52

If the page is in Persian (or Arabic), you indeed have to specify it on the frontmatter by

lang: fa  # or "ar" if Arabic

Then, you can combine it with @marcanuy 's suggestion by making an if/else statement, probably in your base layout file (look in your _layouts folder for something like default.html or base.html) like the following:

{%- if page.lang == 'fa' -%}   
    <div class="root" data-is-touch="false" dir="rtl">
        {{content}} 
    </div>
{%- else -%}
    <div class="root" data-is-touch="false">
        {{content}} 
    </div>
{%- endif -%}

NOTE: My div properties, <div class="root" data-is-touch="false"> depend on my template and yours could be anything else. The point, however, is the extra property which will be added if the condition of the if-statement is fulfilled.

score 0 · Answer 3 · answered Dec 10 '18 at 11:32

You can use the following layout for your pages or posts:

---
layout: pageAuto
--- 
{% assign paragraphs = page.content | newline_to_br | strip_newlines | split: '<br />' %}
{% for p in paragraphs %}
<div dir="auto"> 
{{ p }}
</div>
{% endfor %}

It iterates over the paragraphs. For more complex situations, you can use conditional blocks, based on the content or based on the variables in the front matter. Also, note that Internet Explorer or Edge might not support automatic direction.

How to write RTL text in Jekyll posts?

3 Answers3