CODEWITHSUNDEEP
cssmarkdownjekyllblogs
Hassan Abedi
Hassan Abedi

Reputation: 900

How to write RTL text in Jekyll posts?

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?

Upvotes: 3

Views: 1277

Answers (3)

arash
arash

Reputation: 285

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.

Upvotes: 1

rmojab63
rmojab63

Reputation: 3631

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.

Upvotes: 0

marcanuy
marcanuy

Reputation: 23982

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>

Upvotes: 4

Related Questions