[Bug] Arrow direction after "Read More" button is incorrect for RTL languages

[Mohammed Alotaibi]

Bug Report

The arrow after the "Read More" button is in incorrect direction for RTL languages. It should be pointing to the left instead of right.

Current behavior

Expected behavior

[Mohammed Alotaibi]

Also "show changes" and "all_posts" arrows, I'll update it also in the linked PR

[Óscar]

Hi!

How do you plan on fixing this? The macro would come in handy now 🙃

[Mohammed Alotaibi]

How do you plan on fixing this? The macro would come in handy now 🙃

What do you think about {% if lang in rtl_languages %} ⟵ {% else %} ⟶ {% endif %}?

[Mohammed Alotaibi]

Or maybe macro like this, is looks better, will help us to do every thing in clean way

do_something::do_something(ltr="⟶", rtl="⟵")

Please suggest a name for the macro :)

[Óscar]

{% if lang in rtl_languages %} ⟵ {% else %} ⟶ {% endif %}

That won't work outside base.html, where we define rtl_languages; variables aren't inherited.

Here's something I just learnt about: you can use CSS to target styling based on the directionality of the text. This means we can do:

:dir(rtl) .arrow {
    display: inline-block;
    transform: rotate(180deg);
}

To flip all arrows with the arrow class. So all we need to do is:

1. Add the arrow class to all arrows, like so:

<a href="{{ get_url(path="blog", lang=lang) }}/">{{ macros_translate::translate(key="all_posts", default="All posts", language_strings=language_strings) }}&nbsp;<span class="arrow">⟶</span></a>

2. Add the CSS to _misc.scss:

:dir(rtl) .arrow {
    display: inline-block;
    transform: rotate(180deg);
}

This avoids creating the macro. We might regret it later if we need to change something else (who knows?), but I think this is a clean implementation for flipping the arrows.

To find the arrows (they are in different files), you can do a global search for these elements:

• →
• ←
• ⟶

I think that's all the arrows on tabi.

[Óscar]

Do you want to do the PR yourself? I can do it. Or we can do half and half :)

[Mohammed Alotaibi]

I think that's all the arrows on tabi.

There is also the "See Changes" arrow

Do you want to do the PR yourself?

Yes I want

[Óscar]

There is also the "See Changes" arrow

True! Good catch.

Yes I want

Awesome, thanks! Happy to review when it's ready.