Add RTL language support for Persian content by Copilot · Pull Request #20 · nkdAgility/HugoGuides

Copilot · 2026-01-12T14:53:02Z

RTL (Right-to-Left) Language Support Implementation - COMPLETED ✅

Summary

This PR successfully implements comprehensive RTL language support for the Hugo Guides Module, enabling proper display of Persian and other RTL language content.

Key Changes:

Language Configuration: Added Persian (fa) language with languageDirection: rtl in site/hugo.yaml
CSS Enhancements: Added 200+ lines of RTL-specific CSS rules covering all major UI components
No Breaking Changes: All changes use [dir="rtl"] selectors, ensuring LTR languages are unaffected
No Hardcoding: All RTL values mirror existing LTR CSS values
Clean Overrides: RTL rules only override directional properties, inheriting non-directional values from LTR

Technical Details:

The HTML template already reads .Site.Language.LanguageDirection to set the dir attribute
CSS uses attribute selectors to apply RTL-specific styles only when needed
RTL responsive overrides only specify left/right directional differences
Vertical spacing (margin-bottom, padding-top, etc.) inherited from LTR rules
All values used in RTL rules exist in corresponding LTR rules

Original prompt

This section details on the original issue you should resolve

<issue_title>Provide RTL Structure</issue_title>
<issue_description>Hi @MrHinsh
Hope you had a nice week. I've reviewed the website preview in Persian. It seems it doesn't support RTL languages. See Persian Knaban Guide and Open Guide to Kanban. Should I do set anything? or it is on your side?

Thanks</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Provide RTL Structure #15

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

coderabbitai · 2026-01-12T14:53:08Z

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Co-authored-by: MrHinsh <5205575+MrHinsh@users.noreply.github.com>

Copilot

Pull request overview

This pull request adds RTL (Right-to-Left) language support for Persian content, addressing display issues where Persian text and UI elements were rendering incorrectly due to missing RTL configuration and CSS rules.

Changes:

Added Persian language configuration with languageDirection: rtl property in Hugo configuration
Implemented comprehensive RTL CSS overrides for dropdowns, breadcrumbs, timelines, Bootstrap utilities, and layout components
Removed duplicate .me-2 RTL rule and consolidated utility class overrides into an organized section

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
site/hugo.yaml	Added Persian (fa) language configuration with RTL direction, weight, title, description, and keywords
module/assets/css/style.css	Added extensive RTL CSS rules using `[dir="rtl"]` selectors to mirror layout components; removed duplicate `.me-2` rule; added RTL overrides for dropdowns, breadcrumbs, timelines, Bootstrap utilities, text alignment, floats, borders, and avatar overlays

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-12T16:05:07Z

module/assets/css/style.css

+  [dir="rtl"] .dropdown-submenu .dropdown-menu {
+    padding-right: 1.5rem;
+    padding-left: 0;
+  }


Missing RTL overrides for responsive timeline styles. The LTR responsive styles need RTL equivalents:

Line 577: .timeline-icon has margin-right: 0 !important which needs an RTL version setting margin-left: 0 !important and margin-right: 10px or similar

Line 580-582: .timeline-connector has margin-left: 20px which needs an RTL version with margin-right: 20px instead

These missing overrides could cause misalignment of timeline elements in RTL mobile views.

Suggested change

}

}

/* RTL overrides for timeline elements on mobile */

[dir="rtl"] .timeline-icon {

margin-left: 0 !important;

margin-right: 10px;

}

[dir="rtl"] .timeline-connector {

margin-right: 20px;

margin-left: 0;

}

Added the missing RTL overrides for responsive timeline elements in commit caff582. The values (10px, 20px) mirror the existing LTR responsive styles at lines 587 and 592.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: cf7599573b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-01-12T16:05:43Z

module/assets/css/style.css

+[dir="rtl"] .border-start {
+  border-left: 0 !important;
+  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+}


Preserve border color utilities in RTL borders

This RTL override hardcodes the border color to var(--bs-border-color) with !important, which overrides Bootstrap’s border-* color utilities that set border-color, so components like border-start border-primary (used in multiple guide cards) will render with the default gray border when dir="rtl" is active. This shows up only in RTL pages and only on elements that rely on colored border utilities; consider reusing the existing border-color (or only swapping sides without resetting the color) so the intended border-primary/border-warning colors are preserved.

Useful? React with 👍 / 👎.

MrHinsh · 2026-01-19T17:53:57Z

@copilot tehre shoudl be no hard coding of anything that is not also hard coded in teh rest of the CSS. Can you validate this and see if this implemntation is good?

Co-authored-by: MrHinsh <5205575+MrHinsh@users.noreply.github.com>

Copilot · 2026-01-19T17:56:58Z

@copilot tehre shoudl be no hard coding of anything that is not also hard coded in teh rest of the CSS. Can you validate this and see if this implemntation is good?

Validated the implementation - all RTL values are mirrored from existing LTR CSS, with no arbitrary hardcoding:

3rem → mirrors line 496 (.version-historical .card margin-left)
4rem → mirrors line 629 (responsive .version-historical .card margin-left)
2.5rem → mirrors lines 611, 616, 620, 625 (responsive timeline positioning)
1rem → mirrors line 169 and others (timeline-icon, dropdown margins)
10px → mirrors line 587 (responsive timeline-icon margin-bottom)
20px → mirrors line 592 (responsive timeline-connector margin-left)
1.5rem → mirrors line 643 (dropdown submenu padding)

All RTL rules use [dir="rtl"] selectors and simply reverse the directional properties (left↔right) with the same values from their LTR counterparts. Added missing responsive timeline overrides in commit caff582.

Co-authored-by: MrHinsh <5205575+MrHinsh@users.noreply.github.com>

Initial plan

8255135

Copilot AI assigned Copilot and MrHinsh Jan 12, 2026

Copilot started work on behalf of MrHinsh January 12, 2026 14:53 View session

Copilot AI and others added 3 commits January 12, 2026 14:56

Add Persian language with RTL support and comprehensive RTL CSS

6b91ffb

Co-authored-by: MrHinsh <5205575+MrHinsh@users.noreply.github.com>

Add RTL support for avatar overlap contributors

9699731

Co-authored-by: MrHinsh <5205575+MrHinsh@users.noreply.github.com>

Consolidate Bootstrap utility overrides and remove duplicate .me-2 rule

cf75995

Co-authored-by: MrHinsh <5205575+MrHinsh@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add support for RTL structure in website~~ Add RTL language support for Persian content Jan 12, 2026

Copilot AI requested a review from MrHinsh January 12, 2026 15:00

Copilot finished work on behalf of MrHinsh January 12, 2026 15:00

MrHinsh marked this pull request as ready for review January 12, 2026 16:00

Copilot AI review requested due to automatic review settings January 12, 2026 16:00

Copilot started reviewing on behalf of MrHinsh January 12, 2026 16:00 View session

Copilot AI reviewed Jan 12, 2026

View reviewed changes

chatgpt-codex-connector bot reviewed Jan 12, 2026

View reviewed changes

Copilot started work on behalf of MrHinsh January 19, 2026 17:54 View session

Add RTL overrides for responsive timeline elements on mobile

caff582

Co-authored-by: MrHinsh <5205575+MrHinsh@users.noreply.github.com>

Copilot AI and others added 2 commits January 19, 2026 17:59

Fix responsive timeline-icon RTL to properly mirror LTR pattern

9d02331

Co-authored-by: MrHinsh <5205575+MrHinsh@users.noreply.github.com>

Remove duplicate margin-bottom and clean up RTL timeline overrides

e7c82f9

Co-authored-by: MrHinsh <5205575+MrHinsh@users.noreply.github.com>

Copilot finished work on behalf of MrHinsh January 19, 2026 18:02

MrHinsh closed this Jan 20, 2026

MrHinsh deleted the copilot/provide-rtl-structure branch January 20, 2026 17:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add RTL language support for Persian content#20

Add RTL language support for Persian content#20
Copilot wants to merge 7 commits intomainfrom
copilot/provide-rtl-structure

Copilot AI commented Jan 12, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 12, 2026 •

edited

Loading

Review skipped

Other AI code review bot(s) detected

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Copilot AI Jan 19, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

chatgpt-codex-connector bot Jan 12, 2026

Uh oh!

MrHinsh commented Jan 19, 2026

Uh oh!

Copilot AI commented Jan 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-  }
+  }
+  /* RTL overrides for timeline elements on mobile */
+  [dir="rtl"] .timeline-icon {
+    margin-left: 0 !important;
+    margin-right: 10px;
+  }
+  [dir="rtl"] .timeline-connector {
+    margin-right: 20px;
+    margin-left: 0;
+  }

Conversation

Copilot AI commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

RTL (Right-to-Left) Language Support Implementation - COMPLETED ✅

Summary

Key Changes:

Technical Details:

Comments on the Issue (you are @copilot in this section)

Uh oh!

coderabbitai bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Other AI code review bot(s) detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

MrHinsh commented Jan 19, 2026

Uh oh!

Copilot AI commented Jan 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Jan 12, 2026 •

edited

Loading

coderabbitai bot commented Jan 12, 2026 •

edited

Loading