Skip to content

Add RTL Support #2367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
+568 −3
Open

Add RTL Support #2367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
419a24f
feat: add rtl style and check dir in default.html
zakariaf Apr 20, 2025
5a804e4
feat: add RTL Bootstrap stylesheet support in head.html
zakariaf May 23, 2025
0f5db26
fix: adjust margins for post-meta elements in RTL layout
zakariaf May 23, 2025
007e8e3
fix: optimize padding and margin styles for RTL layout
zakariaf May 23, 2025
dc521e8
fix: enhance RTL styles for search and post-meta elements
zakariaf May 30, 2025
b406593
fix: adjust post-tag margins for RTL layout
zakariaf May 30, 2025
28d1150
fix: add ID to trending tags section and adjust margin-right for post…
zakariaf May 30, 2025
a98ad38
fix: update TOC styles for RTL layout by adjusting borders
zakariaf May 30, 2025
1947a37
fix: remove unnecessary padding adjustments for list elements in RTL …
zakariaf May 30, 2025
676086f
fix: adjust RTL styles
zakariaf May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
{% endunless %}

{% if dir and dir contains 'rtl' %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-MdqCcafa5BLgxBDJ3d/4D292geNL64JyRtSGjEszRUQX9rhL1QkcnId+OT7Yw+D+" crossorigin="anonymous">
{% endif %}

<!-- Theme style -->
<link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">

Expand Down
2 changes: 1 addition & 1 deletion _includes/trending-tags.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
{% endfor %}

{% if trending_tags.size > 0 %}
<section>
<section id="trending-tags">
<h2 class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</h2>
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
{% for tag_name in trending_tags %}
Expand Down
12 changes: 10 additions & 2 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,16 @@
{% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
{% endif %}

<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
{% assign _lang_code = lang | split: '-' | first %}

{%- capture dir -%}
{%- if 'ar,fa,he,iw,ps,ug,ur,yi,ku' contains _lang_code -%}
dir="rtl"
{%- endif -%}
{%- endcapture -%}

<!-- `lang` attribute is set in _includes/lang.html -->
<html lang="{{ lang }}" {{ dir }} {{ prefer_mode }}>
{% include head.html %}

<body>
Expand Down
1 change: 1 addition & 0 deletions _sass/base/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
@forward 'base';
@forward 'typography';
@forward 'syntax';
@forward 'rtl';
Loading