How to write RTL text in Jekyll posts?

user_4414921 0
Viewed 929

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?

jekyll blogs markdown css
3 Answers
user_11655090

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.

user_71069570

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.

user_56159800
Related