diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2ce6f08e..8aa715a8 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -29,6 +29,16 @@ For example, the _Translators: Icelandic (latest)_ group has access to:
When working on changes to the "latest" source content in English, make sure to avoid unnecessarily removing and adding StreamField blocks, so block references are stable between revisions.
+#### RTL support
+
+The guide supports right-to-left languages, like Arabic and Hebrew. All layout
+and styling changes must work correctly in both LTR and RTL.
+
+We test RTL changes by setting `dir="rtl"` on the page and comparing against
+the LTR version. If you're unsure whether something should mirror or stay
+fixed, start a thread in [GitHub Discussions](https://github.com/wagtail/guide/discussions)
+or the #editor-guide channel of the [Wagtail Slack workspace](https://github.com/wagtail/wagtail/wiki/Slack).
+
### Versioning
Our default "latest" version of the guide corresponds to Wagtail’s release currently in development. When Wagtail has a new release, we create a copy of the guide’s "latest" content for that release. Here are the preliminary steps to do this:
diff --git a/apps/core/templates/base.html b/apps/core/templates/base.html
index 145c8135..b300e0f9 100644
--- a/apps/core/templates/base.html
+++ b/apps/core/templates/base.html
@@ -1,8 +1,9 @@
-{% load core_tags wagtailcore_tags wagtailroutablepage_tags wagtailuserbar manifest %}
+{% load core_tags wagtailcore_tags wagtailroutablepage_tags wagtailuserbar manifest i18n %}
{% wagtail_site as current_site %}
+{% get_current_language_bidi as LANGUAGE_BIDI %}
-
+
diff --git a/apps/core/templates/components/feedback.html b/apps/core/templates/components/feedback.html
index 381bda8c..14cf82df 100644
--- a/apps/core/templates/components/feedback.html
+++ b/apps/core/templates/components/feedback.html
@@ -3,7 +3,7 @@
<div class="feedback">
{% csrf_token %}
<div class="feedback__container" data-feedback-container>
- <h2 class="feedback__heading">{% trans 'Was this page helpful?' %}</h2>
+ <h2 class="feedback__heading" dir="auto">{% trans 'Was this page helpful?' %}</h2>
<div class="feedback__options">
<button class="feedback__button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="{% trans 'This page was helpful' %}" data-bs-trigger="hover" data-happy-button aria-label="{% trans 'Happy' %}">
{% include "./svg/happy.svg" %}
diff --git a/apps/core/templates/components/footer.html b/apps/core/templates/components/footer.html
index 5862885d..2f8c0535 100644
--- a/apps/core/templates/components/footer.html
+++ b/apps/core/templates/components/footer.html
@@ -12,8 +12,8 @@
{% endwith %}
</div>
<div class="link-block__content">
- <h2 class="link-block__heading">{{ footer_item.title }}</h2>
- <div class="link-block__description">
+ <h2 class="link-block__heading" dir="auto">{{ footer_item.title }}</h2>
+ <div class="link-block__description" dir="auto">
{{ footer_item.description }}
</div>
</div>
diff --git a/apps/core/templates/components/language_selector.html b/apps/core/templates/components/language_selector.html
index 49784793..58bfcafa 100644
--- a/apps/core/templates/components/language_selector.html
+++ b/apps/core/templates/components/language_selector.html
@@ -5,14 +5,14 @@
{% if page %}
<button class="language-selector__toggle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
{% get_language_info for LANGUAGE_CODE as lang %}
- <span class="language-selector__label">{{ lang.name_translated }} {% if page %}({% get_version_from_language_code page.localized.locale.language_code %}){% endif %}</span>
+ <span class="language-selector__label" dir="auto">{{ lang.name_translated }} {% if page %}({% get_version_from_language_code page.localized.locale.language_code %}){% endif %}</span>
</button>
{% spaceless %}
<ul class="language-selector__dropdown dropdown-menu">
{% for translation in page.get_translations.live %}
{% get_language_info for translation.locale.language_code as lang %}
<li>
- <a href="{% pageurl translation %}" rel="alternate" hreflang="{% get_language_from_language_code translation.locale.language_code %}" class="language-selector__dropdown-item dropdown-item">
+ <a href="{% pageurl translation %}" rel="alternate" hreflang="{% get_language_from_language_code translation.locale.language_code %}" class="language-selector__dropdown-item dropdown-item" dir="auto">
{{ lang.name_local }} ({% get_version_from_language_code translation.locale.language_code %})
</a>
</li>
diff --git a/apps/core/templates/components/nav_buttons.html b/apps/core/templates/components/nav_buttons.html
index 7e9c1c61..3275811f 100644
--- a/apps/core/templates/components/nav_buttons.html
+++ b/apps/core/templates/components/nav_buttons.html
@@ -4,14 +4,14 @@
{% if previous %}
<a href="{% pageurl previous %}" class="nav-buttons__link" rel="prev">
{% include "core/svg/arrow.svg" %}
- <div class="nav-buttons__label">
+ <div class="nav-buttons__label" dir="auto">
{{ previous }}
</div>
</a>
{% endif %}
{% if next %}
<a href="{% pageurl next %}" class="nav-buttons__link" rel="next">
- <div class="nav-buttons__label">
+ <div class="nav-buttons__label" dir="auto">
{{ next }}
</div>
{% include "core/svg/arrow.svg" %}
diff --git a/apps/core/templates/components/navigation.html b/apps/core/templates/components/navigation.html
index 4b04bbfe..ac2d60ac 100644
--- a/apps/core/templates/components/navigation.html
+++ b/apps/core/templates/components/navigation.html
@@ -8,7 +8,7 @@
</li>
<li class="navigation__item">
{% endif %}
- <a href="{% pageurl item %}" class="navigation__link{% if info.level == 0 %} navigation__link--heading{% endif %}{% if item.id == current_page.id %} active{% endif %}">{{ item }}</a>
+ <a href="{% pageurl item %}" class="navigation__link{% if info.level == 0 %} navigation__link--heading{% endif %}{% if item.id == current_page.id %} active{% endif %}" dir="auto">{{ item }}</a>
{% for close in info.close %}
</li>
</ul>
diff --git a/apps/core/templates/core/blocks/alert.html b/apps/core/templates/core/blocks/alert.html
index 65c1b11b..14062da0 100644
--- a/apps/core/templates/core/blocks/alert.html
+++ b/apps/core/templates/core/blocks/alert.html
@@ -5,7 +5,7 @@
<div class="alert__icon">
{% include self.icon %}
</div>
- <div class="alert__heading">{% trans self.alert_type %}</div>
+ <div class="alert__heading" dir="auto" >{% trans self.alert_type %}</div>
</div>
<div class="alert__content">
{{ self.alert_body|richtext }}
diff --git a/apps/core/templates/core/blocks/section.html b/apps/core/templates/core/blocks/section.html
index 4d45a830..bba9c0fc 100644
--- a/apps/core/templates/core/blocks/section.html
+++ b/apps/core/templates/core/blocks/section.html
@@ -7,8 +7,8 @@
{% include self.icon %}
</div>
<div class="section__content">
- <h2 class="section__heading">{{ self.title }}</h2>
- <p class="section__description">{{ self.text }}</p>
+ <h2 class="section__heading" dir="auto" >{{ self.title }} </h2>
+ <p class="section__description" dir="auto" >{{ self.text }} </p>
</div>
</a>
</div>
diff --git a/apps/core/templates/core/content_page.html b/apps/core/templates/core/content_page.html
index 790f4d74..b2a568b1 100644
--- a/apps/core/templates/core/content_page.html
+++ b/apps/core/templates/core/content_page.html
@@ -3,7 +3,7 @@
{% load wagtailcore_tags core_tags i18n %}
{% block content %}
- <h1 class="heading heading--one">{{ page.title }}</h1>
+ <h1 class="heading heading--one" dir="auto">{{ page.title }}</h1>
{% if page.table_of_contents %}
<div class="toc">
@@ -28,7 +28,7 @@ <h2 class="toc__heading">{% trans 'In this section' %}</h2>
<ul>
{% for child in children %}
<li>
- <a href="{% pageurl child %}">{{ child.title }}</a>
+ <a href="{% pageurl child %}" dir="auto">{{ child.title }}</a>
</li>
{% endfor %}
</ul>
@@ -39,7 +39,7 @@ <h2 class="toc__heading">{% trans 'In this section' %}</h2>
<p class="byline">
- <em>{% blocktrans with last_updated=page.last_published_at|date:"F j, Y" trimmed %}Last updated: {{ last_updated }}{% endblocktrans %}</em>
+ <em dir ="auto">{% blocktrans with last_updated=page.last_published_at|date:"F j, Y" trimmed %}Last updated: {{ last_updated }}{% endblocktrans %}</em>
</p>
{% include '../components/nav_buttons.html' %}
diff --git a/apps/core/templates/core/home_page.html b/apps/core/templates/core/home_page.html
index 8988fa5e..887f1774 100644
--- a/apps/core/templates/core/home_page.html
+++ b/apps/core/templates/core/home_page.html
@@ -3,7 +3,7 @@
{% block content %}
- <h1 class="heading heading--display">{{ page.title }}</h1>
+ <h1 class="heading heading--display" dir="auto">{{ page.title }}</h1>
<div class="introduction">
{{ page.introduction|richtext }}
diff --git a/apps/core/templates/core/svg/explanation.svg b/apps/core/templates/core/svg/explanation.svg
index 1d513bd2..94705022 100644
--- a/apps/core/templates/core/svg/explanation.svg
+++ b/apps/core/templates/core/svg/explanation.svg
@@ -1 +1 @@
-<svg class="svg_icon" width="114" height="100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path class="svg_icon__animated_path" d="M20.778 19.995c-.601-4.274 2.343-8.376 6.782-9 4.274-.601 8.4 2.508 9 6.782.624 4.439-2.508 8.4-6.782 9-4.439.624-8.377-2.343-9-6.782Zm12.036 76.097c-2.96.416-5.585-1.563-6-4.522L21.66 54.91l-3.659 8.56c-1.133 2.674-4.305 3.958-6.979 2.825-2.674-1.133-3.958-4.305-2.825-6.98l7.294-17.286c2.29-5.184 6.97-8.859 12.56-9.645l23.508-3.303-1.848-13.152c-.6-4.275 2.343-8.377 6.782-9L93.32 1.752c4.274-.601 8.399 2.508 9 6.782l5.176 36.826c.623 4.438-2.508 8.399-6.783 9l-36.825 5.175c-4.439.624-8.377-2.343-9-6.782l-1.11-7.891L64.3 43.384l.74 5.261 31.564-4.436-4.436-31.565-31.565 4.436 1.48 10.522 2.63-.37c2.794-.393 5.607 1.727 6 4.521.416 2.96-1.727 5.608-4.522 6l-22.358 3.143 6.654 47.347c.416 2.96-1.727 5.608-4.521 6-2.96.416-5.585-1.562-6-4.521l-2.958-21.043-2.63.37 2.957 21.042c.416 2.96-1.727 5.608-4.521 6Z" fill="#80D7D8"/><path class="svg_icon__original_path" d="M29.11 49.752h1v-3.589l-1.857 3.072.856.517Zm-3.682 6.094-.856-.517-.002.002.858.515Zm-6.983-4.19.858.515v-.002l-.858-.513Zm7.364-12.314-.85-.528-.004.008-.005.007.859.513ZM54.5 33.375v1h1v-1h-1Zm0 12.188v-1h-1v1h1Zm8.125 0h1v-1h-1v1Zm0 4.062h-1v1h1v-1Zm24.375 0v1h1v-1h-1Zm0-24.375h1v-1h-1v1Zm-24.375 0v-1h-1v1h1Zm0 8.125h-1v1h1v-1ZM47.391 41.5v-1h-1v1h1Zm-8.125 20.313h1v-1h-1v1Zm-2.032 0v-1h-1v1h1Zm-4.078-38.594c0-2.762 2.232-5.094 5.094-5.094v-2c-3.993 0-7.094 3.254-7.094 7.094h2Zm5.094-5.094c2.748 0 5.094 2.345 5.094 5.094h2c0-3.853-3.24-7.094-7.094-7.094v2Zm5.094 5.094c0 2.862-2.332 5.093-5.094 5.093v2c3.84 0 7.094-3.1 7.094-7.093h-2Zm-5.094 5.093c-2.876 0-5.094-2.218-5.094-5.093h-2c0 3.98 3.114 7.093 7.094 7.093v-2Zm-5.078 52.813c-1.733 0-3.063-1.33-3.063-3.063h-2c0 2.838 2.225 5.063 5.063 5.063v-2Zm-3.063-3.063v-28.31h-2v28.31h2Zm-1.856-28.827-3.681 6.094 1.712 1.034 3.681-6.094-1.712-1.034ZM24.57 55.33c-.858 1.43-2.783 1.912-4.214 1.054L19.327 58.1c2.378 1.426 5.531.638 6.958-1.74l-1.715-1.029Zm-4.214 1.054c-1.43-.859-1.912-2.783-1.053-4.214l-1.715-1.03c-1.427 2.379-.639 5.532 1.74 6.959l1.028-1.715Zm-1.052-4.216 7.363-12.314-1.717-1.026-7.363 12.314 1.717 1.026Zm7.354-12.3c2.111-3.401 5.733-5.494 9.688-5.494v-2c-4.678 0-8.928 2.478-11.387 6.44l1.7 1.054Zm9.688-5.494H54.5v-2H36.346v2Zm19.154-1V23.219h-2v10.156h2Zm0-10.156c0-2.762 2.232-5.094 5.094-5.094v-2c-3.994 0-7.094 3.254-7.094 7.094h2Zm5.094-5.094H89.03v-2H60.594v2Zm28.437 0c2.749 0 5.094 2.345 5.094 5.094h2c0-3.853-3.24-7.094-7.094-7.094v2Zm5.094 5.094v28.437h2V23.22h-2Zm0 28.437c0 2.862-2.332 5.094-5.094 5.094v2c3.84 0 7.094-3.1 7.094-7.094h-2Zm-5.094 5.094H60.594v2H89.03v-2Zm-28.437 0c-2.876 0-5.094-2.218-5.094-5.094h-2c0 3.98 3.114 7.094 7.094 7.094v-2ZM55.5 51.656v-6.093h-2v6.093h2Zm-1-5.093h8.125v-2H54.5v2Zm7.125-1v4.062h2v-4.063h-2Zm1 5.062H87v-2H62.625v2Zm25.375-1V25.25h-2v24.375h2ZM87 24.25H62.625v2H87v-2Zm-25.375 1v8.125h2V25.25h-2Zm1 9.125h2.031v-2h-2.031v2Zm2.031 0c1.606 0 3.063 1.457 3.063 3.063h2c0-2.711-2.352-5.063-5.063-5.063v2Zm3.063 3.063c0 1.712-1.436 3.062-3.063 3.062v2c2.69 0 5.063-2.205 5.063-5.063h-2ZM64.656 40.5H47.391v2h17.265v-2Zm-18.265 1v36.563h2V41.5h-2Zm0 36.563c0 1.712-1.437 3.062-3.063 3.062v2c2.69 0 5.063-2.205 5.063-5.063h-2Zm-3.063 3.062c-1.733 0-3.062-1.33-3.062-3.063h-2c0 2.838 2.225 5.063 5.062 5.063v-2Zm-3.062-3.063v-16.25h-2v16.25h2Zm-1-17.25h-2.032v2h2.032v-2Zm-3.032 1v16.25h2v-16.25h-2Zm0 16.25c0 1.713-1.436 3.063-3.062 3.063v2c2.69 0 5.062-2.205 5.062-5.063h-2Z" fill="#262626"/></svg>
+<svg class="svg_icon svg_icon--flip-rtl" width="114" height="100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path class="svg_icon__animated_path" d="M20.778 19.995c-.601-4.274 2.343-8.376 6.782-9 4.274-.601 8.4 2.508 9 6.782.624 4.439-2.508 8.4-6.782 9-4.439.624-8.377-2.343-9-6.782Zm12.036 76.097c-2.96.416-5.585-1.563-6-4.522L21.66 54.91l-3.659 8.56c-1.133 2.674-4.305 3.958-6.979 2.825-2.674-1.133-3.958-4.305-2.825-6.98l7.294-17.286c2.29-5.184 6.97-8.859 12.56-9.645l23.508-3.303-1.848-13.152c-.6-4.275 2.343-8.377 6.782-9L93.32 1.752c4.274-.601 8.399 2.508 9 6.782l5.176 36.826c.623 4.438-2.508 8.399-6.783 9l-36.825 5.175c-4.439.624-8.377-2.343-9-6.782l-1.11-7.891L64.3 43.384l.74 5.261 31.564-4.436-4.436-31.565-31.565 4.436 1.48 10.522 2.63-.37c2.794-.393 5.607 1.727 6 4.521.416 2.96-1.727 5.608-4.522 6l-22.358 3.143 6.654 47.347c.416 2.96-1.727 5.608-4.521 6-2.96.416-5.585-1.562-6-4.521l-2.958-21.043-2.63.37 2.957 21.042c.416 2.96-1.727 5.608-4.521 6Z" fill="#80D7D8"/><path class="svg_icon__original_path" d="M29.11 49.752h1v-3.589l-1.857 3.072.856.517Zm-3.682 6.094-.856-.517-.002.002.858.515Zm-6.983-4.19.858.515v-.002l-.858-.513Zm7.364-12.314-.85-.528-.004.008-.005.007.859.513ZM54.5 33.375v1h1v-1h-1Zm0 12.188v-1h-1v1h1Zm8.125 0h1v-1h-1v1Zm0 4.062h-1v1h1v-1Zm24.375 0v1h1v-1h-1Zm0-24.375h1v-1h-1v1Zm-24.375 0v-1h-1v1h1Zm0 8.125h-1v1h1v-1ZM47.391 41.5v-1h-1v1h1Zm-8.125 20.313h1v-1h-1v1Zm-2.032 0v-1h-1v1h1Zm-4.078-38.594c0-2.762 2.232-5.094 5.094-5.094v-2c-3.993 0-7.094 3.254-7.094 7.094h2Zm5.094-5.094c2.748 0 5.094 2.345 5.094 5.094h2c0-3.853-3.24-7.094-7.094-7.094v2Zm5.094 5.094c0 2.862-2.332 5.093-5.094 5.093v2c3.84 0 7.094-3.1 7.094-7.093h-2Zm-5.094 5.093c-2.876 0-5.094-2.218-5.094-5.093h-2c0 3.98 3.114 7.093 7.094 7.093v-2Zm-5.078 52.813c-1.733 0-3.063-1.33-3.063-3.063h-2c0 2.838 2.225 5.063 5.063 5.063v-2Zm-3.063-3.063v-28.31h-2v28.31h2Zm-1.856-28.827-3.681 6.094 1.712 1.034 3.681-6.094-1.712-1.034ZM24.57 55.33c-.858 1.43-2.783 1.912-4.214 1.054L19.327 58.1c2.378 1.426 5.531.638 6.958-1.74l-1.715-1.029Zm-4.214 1.054c-1.43-.859-1.912-2.783-1.053-4.214l-1.715-1.03c-1.427 2.379-.639 5.532 1.74 6.959l1.028-1.715Zm-1.052-4.216 7.363-12.314-1.717-1.026-7.363 12.314 1.717 1.026Zm7.354-12.3c2.111-3.401 5.733-5.494 9.688-5.494v-2c-4.678 0-8.928 2.478-11.387 6.44l1.7 1.054Zm9.688-5.494H54.5v-2H36.346v2Zm19.154-1V23.219h-2v10.156h2Zm0-10.156c0-2.762 2.232-5.094 5.094-5.094v-2c-3.994 0-7.094 3.254-7.094 7.094h2Zm5.094-5.094H89.03v-2H60.594v2Zm28.437 0c2.749 0 5.094 2.345 5.094 5.094h2c0-3.853-3.24-7.094-7.094-7.094v2Zm5.094 5.094v28.437h2V23.22h-2Zm0 28.437c0 2.862-2.332 5.094-5.094 5.094v2c3.84 0 7.094-3.1 7.094-7.094h-2Zm-5.094 5.094H60.594v2H89.03v-2Zm-28.437 0c-2.876 0-5.094-2.218-5.094-5.094h-2c0 3.98 3.114 7.094 7.094 7.094v-2ZM55.5 51.656v-6.093h-2v6.093h2Zm-1-5.093h8.125v-2H54.5v2Zm7.125-1v4.062h2v-4.063h-2Zm1 5.062H87v-2H62.625v2Zm25.375-1V25.25h-2v24.375h2ZM87 24.25H62.625v2H87v-2Zm-25.375 1v8.125h2V25.25h-2Zm1 9.125h2.031v-2h-2.031v2Zm2.031 0c1.606 0 3.063 1.457 3.063 3.063h2c0-2.711-2.352-5.063-5.063-5.063v2Zm3.063 3.063c0 1.712-1.436 3.062-3.063 3.062v2c2.69 0 5.063-2.205 5.063-5.063h-2ZM64.656 40.5H47.391v2h17.265v-2Zm-18.265 1v36.563h2V41.5h-2Zm0 36.563c0 1.712-1.437 3.062-3.063 3.062v2c2.69 0 5.063-2.205 5.063-5.063h-2Zm-3.063 3.062c-1.733 0-3.062-1.33-3.062-3.063h-2c0 2.838 2.225 5.063 5.062 5.063v-2Zm-3.062-3.063v-16.25h-2v16.25h2Zm-1-17.25h-2.032v2h2.032v-2Zm-3.032 1v16.25h2v-16.25h-2Zm0 16.25c0 1.713-1.436 3.063-3.062 3.063v2c2.69 0 5.062-2.205 5.062-5.063h-2Z" fill="#262626"/></svg>
diff --git a/apps/core/templates/core/svg/tutorial.svg b/apps/core/templates/core/svg/tutorial.svg
index 488b52c0..eb9c24df 100644
--- a/apps/core/templates/core/svg/tutorial.svg
+++ b/apps/core/templates/core/svg/tutorial.svg
@@ -1 +1 @@
-<svg class="svg_icon" width="95" height="93" aria-hidden="true"><path class="svg_icon__animated_path" d="M4.615 15.791c-.324-2.301 1.254-4.2 3.39-4.5l5.262-.739c2.301-.323 4.176 1.09 4.5 3.391l2.75 19.564 2.63-.37c2.301-.323 4.2 1.254 4.5 3.391.323 2.302-1.09 4.177-3.391 4.5l-13.152 1.849c-2.137.3-4.177-1.09-4.5-3.391-.3-2.138 1.254-4.2 3.39-4.5l2.631-.37-2.195-15.618-1.315.185c-2.137.3-4.2-1.254-4.5-3.392ZM21.557 61.19c-1.171-1.177-3.121-.735-3.923.719l-1.461 2.72c-1.061 1.993-3.458 2.833-5.287 1.749-1.993-1.061-2.833-3.458-1.749-5.287l1.439-2.884c3.183-5.98 11.005-7.582 16.16-3.11 4.171 3.438 4.862 9.544 1.8 13.997l-4.9 6.892 5.59-.786c2.137-.3 4.2 1.254 4.5 3.391.324 2.302-1.254 4.2-3.391 4.5l-14.467 2.034c-1.644.23-3.24-.383-3.94-1.793-.866-1.388-.933-3.055.056-4.367L22.02 64.478c.683-1.102.499-2.417-.462-3.288Zm58.35-54.807c2.795-.392 5.608 1.727 6 4.522.416 2.959-1.726 5.607-4.52 6L39.3 22.82c-2.96.416-5.585-1.562-6-4.522-.393-2.794 1.562-5.584 4.521-6l42.086-5.915Zm3.697 26.304c2.795-.392 5.608 1.727 6 4.522.416 2.959-1.726 5.607-4.521 6l-42.087 5.915c-2.959.416-5.584-1.562-6-4.522-.393-2.794 1.563-5.584 4.522-6l42.086-5.915Zm3.697 26.304c2.795-.392 5.607 1.727 6 4.522.416 2.959-1.727 5.607-4.521 6l-42.087 5.915c-2.959.416-5.584-1.562-6-4.522-.393-2.794 1.562-5.584 4.522-6L87.3 58.991Z" fill="#80D7D8"/><path class="svg_icon__original_path" d="M28.076 32.469h-1v1h1v-1Zm-6.094 0v1h1v-1h-1Zm0-12.06h1v-1h-1v1Zm3.936 33.134-.8.6.015.02.017.02.768-.64Zm-3.047.127-.8-.6-.006.009.806.59Zm-1.396 1.904-.807-.591-.002.003.809.588Zm-4.19.762.625-.78-.018-.015-.019-.014-.588.809Zm-.762-4.19.781.625.023-.028.02-.03-.824-.566Zm1.397-2.03-.809-.589-.008.01-.007.012.824.566Zm12.568-.636-.754.657.008.01.01.01.736-.676Zm-.127 10.792.727.687.005-.006.006-.006-.738-.675Zm-4.443 4.697-.726-.687-1.596 1.687h2.322v-1Zm-9.648 4.316.948-.316-.015-.046-.02-.044-.913.406Zm.507-3.3.707.707.015-.015.013-.014-.735-.679Zm9.141-9.903.735.678.017-.018.016-.02-.768-.64Zm-6.998-38.72c0-1.199.921-2.047 2.047-2.047v-2c-2.175 0-4.047 1.69-4.047 4.046h2Zm2.047-2.047h4.062v-2h-4.062v2Zm4.062 0c1.225 0 2.047.821 2.047 2.046h2c0-2.33-1.717-4.046-4.047-4.046v2Zm2.047 2.046V32.47h2V17.36h-2Zm1 16.108h2.031v-2h-2.03v2Zm2.031 0c1.198 0 2.047.921 2.047 2.047h2c0-2.175-1.69-4.047-4.047-4.047v2Zm2.047 2.047c0 1.225-.822 2.047-2.047 2.047v2c2.33 0 4.047-1.718 4.047-4.047h-2Zm-2.047 2.047H19.951v2h10.156v-2Zm-10.156 0c-1.125 0-2.047-.85-2.047-2.047h-2c0 2.356 1.872 4.047 4.047 4.047v-2Zm-2.047-2.047c0-1.099.95-2.047 2.047-2.047v-2c-2.203 0-4.047 1.844-4.047 4.047h2Zm2.047-2.047h2.031v-2h-2.03v2Zm3.031-1v-12.06h-2v12.06h2Zm-1-13.06h-1.015v2h1.015v-2Zm-1.015 0c-1.098 0-2.047-.95-2.047-2.048h-2c0 2.203 1.844 4.047 4.047 4.047v-2Zm5.751 33.534c-1.234-1.645-3.56-1.321-4.647.127l1.6 1.2c.437-.583 1.158-.513 1.447-.127l1.6-1.2Zm-4.653.136-1.397 1.904 1.613 1.183 1.396-1.905-1.612-1.182Zm-1.4 1.907c-.74 1.018-2.007 1.168-2.755.57l-1.25 1.56c1.791 1.434 4.332.821 5.623-.954l-1.617-1.176Zm-2.792.541c-1.018-.74-1.167-2.008-.569-2.756l-1.561-1.25c-1.433 1.792-.821 4.333.954 5.624l1.176-1.618Zm-.526-2.814 1.397-2.031-1.648-1.133-1.397 2.031 1.649 1.133Zm1.382-2.01c2.682-3.688 8.014-4 11.005-.566l1.508-1.313c-3.864-4.437-10.72-3.988-14.13.703l1.617 1.176Zm11.022-.547c2.423 2.643 2.336 6.753-.127 9.44l1.475 1.351c3.123-3.407 3.29-8.691.126-12.142l-1.474 1.351Zm-.116 9.428-4.444 4.698 1.453 1.374 4.444-4.697-1.453-1.375Zm-3.717 6.385h4.316v-2h-4.316v2Zm4.316 0c1.098 0 2.047.949 2.047 2.047h2c0-2.203-1.844-4.047-4.047-4.047v2Zm2.047 2.047c0 1.198-.921 2.046-2.047 2.046v2c2.175 0 4.047-1.69 4.047-4.046h-2Zm-2.047 2.046H19.062v2h11.172v-2Zm-11.172 0c-.968 0-1.636-.47-1.844-1.093l-1.897.632c.554 1.662 2.17 2.462 3.742 2.462v-2Zm-1.879-1.183c-.37-.834-.244-1.642.302-2.188l-1.415-1.414c-1.231 1.232-1.36 2.963-.714 4.414l1.827-.812Zm.33-2.216 9.14-9.903-1.47-1.356-9.14 9.902 1.47 1.357Zm9.173-9.94c.944-1.133.944-2.688 0-3.82l-1.536 1.28c.326.391.326.868 0 1.259l1.536 1.28ZM75.938 19.25c1.605 0 3.062 1.457 3.062 3.063h2c0-2.711-2.352-5.063-5.063-5.063v2ZM79 22.313c0 1.712-1.436 3.062-3.063 3.062v2c2.69 0 5.063-2.205 5.063-5.063h-2Zm-3.063 3.062h-32.5v2h32.5v-2Zm-32.5 0c-1.732 0-3.062-1.33-3.062-3.063h-2c0 2.838 2.225 5.063 5.063 5.063v-2Zm-3.062-3.063c0-1.626 1.35-3.062 3.063-3.062v-2c-2.858 0-5.063 2.372-5.063 5.063h2Zm3.063-3.062h32.5v-2h-32.5v2Zm32.5 20.313c1.605 0 3.062 1.456 3.062 3.062h2c0-2.71-2.352-5.063-5.063-5.063v2ZM79 42.624c0 1.713-1.436 3.063-3.063 3.063v2c2.69 0 5.063-2.205 5.063-5.063h-2Zm-3.063 3.063h-32.5v2h32.5v-2Zm-32.5 0c-1.732 0-3.062-1.33-3.062-3.063h-2c0 2.837 2.225 5.063 5.063 5.063v-2Zm-3.062-3.063c0-1.626 1.35-3.063 3.063-3.063v-2c-2.858 0-5.063 2.373-5.063 5.063h2Zm3.063-3.063h32.5v-2h-32.5v2Zm32.5 20.313c1.605 0 3.062 1.457 3.062 3.063h2c0-2.711-2.352-5.063-5.063-5.063v2ZM79 62.938C79 64.65 77.564 66 75.937 66v2C78.627 68 81 65.795 81 62.937h-2ZM75.937 66h-32.5v2h32.5v-2Zm-32.5 0c-1.732 0-3.062-1.33-3.062-3.063h-2c0 2.838 2.225 5.063 5.063 5.063v-2Zm-3.062-3.063c0-1.626 1.35-3.062 3.063-3.062v-2c-2.858 0-5.063 2.372-5.063 5.063h2Zm3.063-3.062h32.5v-2h-32.5v2Z" fill="#262626"/></svg>
+<svg class="svg_icon svg_icon--flip-rtl" width="95" height="93" aria-hidden="true"><path class="svg_icon__animated_path" d="M4.615 15.791c-.324-2.301 1.254-4.2 3.39-4.5l5.262-.739c2.301-.323 4.176 1.09 4.5 3.391l2.75 19.564 2.63-.37c2.301-.323 4.2 1.254 4.5 3.391.323 2.302-1.09 4.177-3.391 4.5l-13.152 1.849c-2.137.3-4.177-1.09-4.5-3.391-.3-2.138 1.254-4.2 3.39-4.5l2.631-.37-2.195-15.618-1.315.185c-2.137.3-4.2-1.254-4.5-3.392ZM21.557 61.19c-1.171-1.177-3.121-.735-3.923.719l-1.461 2.72c-1.061 1.993-3.458 2.833-5.287 1.749-1.993-1.061-2.833-3.458-1.749-5.287l1.439-2.884c3.183-5.98 11.005-7.582 16.16-3.11 4.171 3.438 4.862 9.544 1.8 13.997l-4.9 6.892 5.59-.786c2.137-.3 4.2 1.254 4.5 3.391.324 2.302-1.254 4.2-3.391 4.5l-14.467 2.034c-1.644.23-3.24-.383-3.94-1.793-.866-1.388-.933-3.055.056-4.367L22.02 64.478c.683-1.102.499-2.417-.462-3.288Zm58.35-54.807c2.795-.392 5.608 1.727 6 4.522.416 2.959-1.726 5.607-4.52 6L39.3 22.82c-2.96.416-5.585-1.562-6-4.522-.393-2.794 1.562-5.584 4.521-6l42.086-5.915Zm3.697 26.304c2.795-.392 5.608 1.727 6 4.522.416 2.959-1.726 5.607-4.521 6l-42.087 5.915c-2.959.416-5.584-1.562-6-4.522-.393-2.794 1.563-5.584 4.522-6l42.086-5.915Zm3.697 26.304c2.795-.392 5.607 1.727 6 4.522.416 2.959-1.727 5.607-4.521 6l-42.087 5.915c-2.959.416-5.584-1.562-6-4.522-.393-2.794 1.562-5.584 4.522-6L87.3 58.991Z" fill="#80D7D8"/><path class="svg_icon__original_path" d="M28.076 32.469h-1v1h1v-1Zm-6.094 0v1h1v-1h-1Zm0-12.06h1v-1h-1v1Zm3.936 33.134-.8.6.015.02.017.02.768-.64Zm-3.047.127-.8-.6-.006.009.806.59Zm-1.396 1.904-.807-.591-.002.003.809.588Zm-4.19.762.625-.78-.018-.015-.019-.014-.588.809Zm-.762-4.19.781.625.023-.028.02-.03-.824-.566Zm1.397-2.03-.809-.589-.008.01-.007.012.824.566Zm12.568-.636-.754.657.008.01.01.01.736-.676Zm-.127 10.792.727.687.005-.006.006-.006-.738-.675Zm-4.443 4.697-.726-.687-1.596 1.687h2.322v-1Zm-9.648 4.316.948-.316-.015-.046-.02-.044-.913.406Zm.507-3.3.707.707.015-.015.013-.014-.735-.679Zm9.141-9.903.735.678.017-.018.016-.02-.768-.64Zm-6.998-38.72c0-1.199.921-2.047 2.047-2.047v-2c-2.175 0-4.047 1.69-4.047 4.046h2Zm2.047-2.047h4.062v-2h-4.062v2Zm4.062 0c1.225 0 2.047.821 2.047 2.046h2c0-2.33-1.717-4.046-4.047-4.046v2Zm2.047 2.046V32.47h2V17.36h-2Zm1 16.108h2.031v-2h-2.03v2Zm2.031 0c1.198 0 2.047.921 2.047 2.047h2c0-2.175-1.69-4.047-4.047-4.047v2Zm2.047 2.047c0 1.225-.822 2.047-2.047 2.047v2c2.33 0 4.047-1.718 4.047-4.047h-2Zm-2.047 2.047H19.951v2h10.156v-2Zm-10.156 0c-1.125 0-2.047-.85-2.047-2.047h-2c0 2.356 1.872 4.047 4.047 4.047v-2Zm-2.047-2.047c0-1.099.95-2.047 2.047-2.047v-2c-2.203 0-4.047 1.844-4.047 4.047h2Zm2.047-2.047h2.031v-2h-2.03v2Zm3.031-1v-12.06h-2v12.06h2Zm-1-13.06h-1.015v2h1.015v-2Zm-1.015 0c-1.098 0-2.047-.95-2.047-2.048h-2c0 2.203 1.844 4.047 4.047 4.047v-2Zm5.751 33.534c-1.234-1.645-3.56-1.321-4.647.127l1.6 1.2c.437-.583 1.158-.513 1.447-.127l1.6-1.2Zm-4.653.136-1.397 1.904 1.613 1.183 1.396-1.905-1.612-1.182Zm-1.4 1.907c-.74 1.018-2.007 1.168-2.755.57l-1.25 1.56c1.791 1.434 4.332.821 5.623-.954l-1.617-1.176Zm-2.792.541c-1.018-.74-1.167-2.008-.569-2.756l-1.561-1.25c-1.433 1.792-.821 4.333.954 5.624l1.176-1.618Zm-.526-2.814 1.397-2.031-1.648-1.133-1.397 2.031 1.649 1.133Zm1.382-2.01c2.682-3.688 8.014-4 11.005-.566l1.508-1.313c-3.864-4.437-10.72-3.988-14.13.703l1.617 1.176Zm11.022-.547c2.423 2.643 2.336 6.753-.127 9.44l1.475 1.351c3.123-3.407 3.29-8.691.126-12.142l-1.474 1.351Zm-.116 9.428-4.444 4.698 1.453 1.374 4.444-4.697-1.453-1.375Zm-3.717 6.385h4.316v-2h-4.316v2Zm4.316 0c1.098 0 2.047.949 2.047 2.047h2c0-2.203-1.844-4.047-4.047-4.047v2Zm2.047 2.047c0 1.198-.921 2.046-2.047 2.046v2c2.175 0 4.047-1.69 4.047-4.046h-2Zm-2.047 2.046H19.062v2h11.172v-2Zm-11.172 0c-.968 0-1.636-.47-1.844-1.093l-1.897.632c.554 1.662 2.17 2.462 3.742 2.462v-2Zm-1.879-1.183c-.37-.834-.244-1.642.302-2.188l-1.415-1.414c-1.231 1.232-1.36 2.963-.714 4.414l1.827-.812Zm.33-2.216 9.14-9.903-1.47-1.356-9.14 9.902 1.47 1.357Zm9.173-9.94c.944-1.133.944-2.688 0-3.82l-1.536 1.28c.326.391.326.868 0 1.259l1.536 1.28ZM75.938 19.25c1.605 0 3.062 1.457 3.062 3.063h2c0-2.711-2.352-5.063-5.063-5.063v2ZM79 22.313c0 1.712-1.436 3.062-3.063 3.062v2c2.69 0 5.063-2.205 5.063-5.063h-2Zm-3.063 3.062h-32.5v2h32.5v-2Zm-32.5 0c-1.732 0-3.062-1.33-3.062-3.063h-2c0 2.838 2.225 5.063 5.063 5.063v-2Zm-3.062-3.063c0-1.626 1.35-3.062 3.063-3.062v-2c-2.858 0-5.063 2.372-5.063 5.063h2Zm3.063-3.062h32.5v-2h-32.5v2Zm32.5 20.313c1.605 0 3.062 1.456 3.062 3.062h2c0-2.71-2.352-5.063-5.063-5.063v2ZM79 42.624c0 1.713-1.436 3.063-3.063 3.063v2c2.69 0 5.063-2.205 5.063-5.063h-2Zm-3.063 3.063h-32.5v2h32.5v-2Zm-32.5 0c-1.732 0-3.062-1.33-3.062-3.063h-2c0 2.837 2.225 5.063 5.063 5.063v-2Zm-3.062-3.063c0-1.626 1.35-3.063 3.063-3.063v-2c-2.858 0-5.063 2.373-5.063 5.063h2Zm3.063-3.063h32.5v-2h-32.5v2Zm32.5 20.313c1.605 0 3.062 1.457 3.062 3.063h2c0-2.711-2.352-5.063-5.063-5.063v2ZM79 62.938C79 64.65 77.564 66 75.937 66v2C78.627 68 81 65.795 81 62.937h-2ZM75.937 66h-32.5v2h32.5v-2Zm-32.5 0c-1.732 0-3.062-1.33-3.062-3.063h-2c0 2.838 2.225 5.063 5.063 5.063v-2Zm-3.062-3.063c0-1.626 1.35-3.062 3.063-3.062v-2c-2.858 0-5.063 2.372-5.063 5.063h2Zm3.063-3.062h32.5v-2h-32.5v2Z" fill="#262626"/></svg>
diff --git a/apps/frontend/static_src/js/feedback/index.js b/apps/frontend/static_src/js/feedback/index.js
index 89a1f4ad..42132424 100644
--- a/apps/frontend/static_src/js/feedback/index.js
+++ b/apps/frontend/static_src/js/feedback/index.js
@@ -63,7 +63,9 @@ export const handleFeedback = () => {
tooltipList.forEach((tooltip) => {
tooltip.dispose();
});
- feedbackContainer.innerHTML = gettext('Thanks for your feedback!');
+ feedbackContainer.innerHTML = `<span dir="auto">${gettext(
+ 'Thanks for your feedback!',
+ )}</span>`;
feedbackPk = data.pk;
additionalFeedbackContainer.classList.add('active');
} catch (err) {
diff --git a/apps/frontend/static_src/js/main.js b/apps/frontend/static_src/js/main.js
index 6382c6bb..420fe4b2 100644
--- a/apps/frontend/static_src/js/main.js
+++ b/apps/frontend/static_src/js/main.js
@@ -27,6 +27,7 @@ const injectResultsInHTML = (results) => {
removeExistingChildren(resultsCountContainer);
const resultsCountHeading = document.createElement('h2');
+ resultsCountHeading.dir = 'auto';
const resultHeadingString = ngettext(
'%s result found.',
'%s results found.',
@@ -40,9 +41,13 @@ const injectResultsInHTML = (results) => {
results.forEach((result) => {
const resultDiv = document.createElement('a');
+ resultDiv.dir = 'auto';
const resultHeading = document.createElement('h3');
+ resultHeading.dir = 'auto';
const resultDescription = document.createElement('div');
+ resultDescription.dir = 'auto';
const resultParentSection = document.createElement('div');
+ resultParentSection.dir = 'auto';
resultHeading.innerText = result.title;
resultDescription.innerText = result.search_description;
resultParentSection.innerText = result.parent_section;
diff --git a/apps/frontend/static_src/scss/components/autocomplete.scss b/apps/frontend/static_src/scss/components/autocomplete.scss
index b076d096..2c882465 100644
--- a/apps/frontend/static_src/scss/components/autocomplete.scss
+++ b/apps/frontend/static_src/scss/components/autocomplete.scss
@@ -5,7 +5,7 @@
&__count {
@include fs(s);
- position: absolute;
+ position: relative;
top: $gutter;
inset-inline-end: 0;
color: $meta-color;
diff --git a/apps/frontend/static_src/scss/components/header.scss b/apps/frontend/static_src/scss/components/header.scss
index 9d13a25e..85ea115f 100644
--- a/apps/frontend/static_src/scss/components/header.scss
+++ b/apps/frontend/static_src/scss/components/header.scss
@@ -17,6 +17,13 @@
@include media-query(large) {
flex-direction: column;
margin-bottom: ($gutter * 2);
+
+ [dir='rtl'] & {
+ display: grid;
+ grid-template-columns: max-content;
+ justify-content: end;
+ justify-items: end;
+ }
}
// Mask off menu behind logo
@@ -72,11 +79,17 @@
width: 48px;
margin-inline-end: ($gutter * 0.5);
overflow: hidden;
+ direction: ltr;
@include media-query(large) {
width: auto;
inset-inline-start: -48px;
margin-inline-end: 0;
+
+ [dir='rtl'] & {
+ inset-inline-start: auto;
+ grid-column: 1;
+ }
}
&:hover,
@@ -108,13 +121,18 @@
position: relative;
top: -$gutter;
inset-inline-start: 0;
+
+ [dir='rtl'] & {
+ grid-column: 1;
+ justify-content: flex-end;
+ }
}
}
&__burger {
position: absolute;
- inset: 15px 12px auto auto;
-
+ inset-block-start: 15px;
+ inset-inline-end: 12px;
@include media-query(large) {
display: none;
}
@@ -122,7 +140,8 @@
&__search-toggle {
position: absolute;
- inset: 17px 50px auto auto;
+ inset-block-start: 17px;
+ inset-inline-end: 50px;
padding: 0;
margin: 0;
border: 0;
diff --git a/apps/frontend/static_src/scss/components/nav-buttons.scss b/apps/frontend/static_src/scss/components/nav-buttons.scss
index 5bc8abea..27cee73f 100644
--- a/apps/frontend/static_src/scss/components/nav-buttons.scss
+++ b/apps/frontend/static_src/scss/components/nav-buttons.scss
@@ -32,6 +32,16 @@
&[rel='prev'] svg {
transform: rotateZ(180deg);
}
+
+ [dir='rtl'] & {
+ &[rel='prev'] svg {
+ transform: none;
+ }
+
+ &[rel='next'] svg {
+ transform: rotateZ(180deg);
+ }
+ }
}
&__label {
diff --git a/apps/frontend/static_src/scss/components/primary-nav.scss b/apps/frontend/static_src/scss/components/primary-nav.scss
index a79c8f93..44ea7658 100644
--- a/apps/frontend/static_src/scss/components/primary-nav.scss
+++ b/apps/frontend/static_src/scss/components/primary-nav.scss
@@ -1,6 +1,6 @@
.primary-nav {
display: none;
- position: absolute;
+ position: fixed;
z-index: 5;
background-color: light-dark($color--page-bg, $color--off-black);
padding: ($gutter * 6) $gutter ($gutter * 2);
diff --git a/apps/frontend/static_src/scss/components/section.scss b/apps/frontend/static_src/scss/components/section.scss
index 4ddc84dd..3537b016 100644
--- a/apps/frontend/static_src/scss/components/section.scss
+++ b/apps/frontend/static_src/scss/components/section.scss
@@ -35,6 +35,10 @@
.svg_icon__original_path {
fill: light-dark(currentcolor, $color--white);
}
+
+ [dir='rtl'] & .svg_icon--flip-rtl {
+ transform: scaleX(-1);
+ }
}
&__heading {
diff --git a/apps/frontend/static_src/scss/components/toc.scss b/apps/frontend/static_src/scss/components/toc.scss
index c09bc1da..0d8fbc3a 100644
--- a/apps/frontend/static_src/scss/components/toc.scss
+++ b/apps/frontend/static_src/scss/components/toc.scss
@@ -35,6 +35,10 @@
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMDA3RDdFIiBkPSJNMjgwLjIgMTUwLjJjLTcuMS02LjQtMTguMS04LTI1LjktNC4xcy0xNS4yIDEyLjQtMTUuMiAyMWwuMDAyIDU2TDE1MiAyMjRjLTEzLjIgMC0yNCAxMC44LTI0IDI0djE2YzAgMTMuMyAxMC44IDI0IDI0IDI0bDg4LS45djU2YzAgOS41MzEgNS42NTYgMTguMTYgMTQuMzggMjJhMjQuMDI1IDI0LjAyNSAwIDAgMCAyNS45MS00LjM3NWw5Ni04OC43NUMzODEuMiAyNjguMyAzODQgMjYxLjkgMzg0IDI1NS4yYy0uMzEzLTcuNzgxLTIuODc1LTEzLjI1LTcuODQ0LTE3Ljc1TDI4MC4yIDE1MC4yek0yNTYgMEMxMTQuNiAwIDAgMTE0LjYgMCAyNTZzMTE0LjYgMjU2IDI1NiAyNTYgMjU2LTExNC42IDI1Ni0yNTZTMzk3LjQgMCAyNTYgMHptMCA0NjRjLTExNC43IDAtMjA4LTkzLjMxLTIwOC0yMDhTMTQxLjMgNDggMjU2IDQ4czIwOCA5My4zMSAyMDggMjA4LTkzLjMgMjA4LTIwOCAyMDh6Ii8+PC9zdmc+');
}
+ [dir='rtl'] &::before {
+ transform: scaleX(-1);
+ }
+
a {
text-decoration: none;
font-weight: 700;
diff --git a/apps/search/templates/search/search.html b/apps/search/templates/search/search.html
index 490d787e..51bff2ef 100644
--- a/apps/search/templates/search/search.html
+++ b/apps/search/templates/search/search.html
@@ -18,9 +18,9 @@ <h1>{% trans 'Search' %}</h1>
<ul>
{% for result in search_results %}
<li>
- <h4><a href="{% pageurl result %}">{{ result }}</a></h4>
+ <h4 dir="auto"><a href="{% pageurl result %}">{{ result }}</a></h4>
{% if result.search_description %}
- {{ result.search_description }}
+ <div dir="auto">{{ result.search_description }}</div>
{% endif %}
</li>
{% endfor %}