Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Open
zakariaf wants to merge10 commits intocotes2020:master
base:master
Choose a base branch
Loading
fromzakariaf:add-rtl-support
Open

Conversation

@zakariaf
Copy link
Contributor

@zakariafzakariaf commentedApr 20, 2025•
edited
Loading

Add RTL Support to Jekyll Theme Chirpy

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Improvement (refactoring and improving code)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update

Description

This PR adds comprehensive Right-to-Left (RTL) language support to the Chirpy theme. It enables the theme to automatically detect RTL languages and apply appropriate styling, making it accessible to users of Arabic, Kurdish, Persian, Urdu, and other RTL languages.

The implementation:

  • Applies appropriate direction and styling for RTL content
  • Maintains all existing LTR functionality without changes
  • Includes configuration options to customize RTL behavior
  • Contains a complete Persian translation of the "Text and Typography" sample post, demonstrating all theme features in RTL mode

Important behavior to note: When viewing a page with an RTL language code (e.g.,lang: fa,lang: ar andrtl: true), the theme will automatically switch to RTL mode for that page and use the appropriate locale. This is standard behavior for internationalized websites and follows web accessibility best practices.

Key components:

  1. Language/Direction Detection: Added tolang.html to detect RTL languages
  2. RTL Stylesheet: Createdrtl.scss with comprehensive RTL styling
  3. Example Implementation: Provided Persian locale file and sample content

New Files

  • _sass/rtl.scss: Contains RTL-specific styles for layout and UI elements
  • _data/locales/: locale files as reference implementation:
    • fa-IR.yml: Persian (Modified)
    • ku-IQ.yml: Kurdish (Sorani)
    • ur-PK.yml: Urdu
    • ps-AF.yml: Pashto
    • dv-MV.yml: Dhivehi
  • _posts/2025-04-20-rtl-test-persian.md: Persian translation of the sample post(text-and-typography) showcasing all theme features

Modified Files

  • _sass/main.scss: Added import for rtl.scss
  • _includes/lang.html: Added RTL detection logic
  • _layouts/default.html: Added dir attribute to HTML tag
  • _config.yml: Added RTL configuration options

This change enhances accessibility for millions of users worldwide who read and write in RTL languages without affecting any existing functionality.

Screenshots

imageimageimageimageimageimageimage

Additional context

This implements a non-breaking enhancement that makes the theme more accessible to global users.

Note: The implementation requires a small addition tohead.html to include the RTL font loader, which I've documented in the PR.

This closes the issue#1928 too

ciphermenial reacted with thumbs up emojicotes2020 reacted with rocket emoji
@zakariaf
Copy link
ContributorAuthor

I'm running my Persian blog based on these changes, and it seems works perfectly.https://zakariafatahi.ir/

@zakariaf
Copy link
ContributorAuthor

hello@cotes2020 I just wanted to check if there’s anything else needed from my side to move this PR forward or if there are any concerns about merging it.

@cotes2020
Copy link
Owner

... I just wanted to check if there’s anything else needed from my side to move this PR forward or if there are any concerns about merging it.

Hi there, this is an excellent PR and thank you for your effort! Since there are quite a lot of changes, I’ll need to find some time to review it. Please don’t worry.

zakariaf reacted with thumbs up emoji

@cotes2020cotes2020 linked an issueMay 11, 2025 that may beclosed by this pull request
1 task
Copy link
Owner

@cotes2020cotes2020 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Sorry for leaving this PR pending for so long. Here is my initial review:

  1. Defining different webfonts for specific languages is too complex and will make the project harder to maintain. Therefore, for languages other than English, it's better to use the system's default fonts.

  2. If you want to achieve automatic enabling of the RTL (right-to-left) attribute by intelligently identifying the language, then the configuration file does not need new settings. The Liquid code can identify which languages are RTL.

zakariaf reacted with thumbs up emoji
@zakariaf
Copy link
ContributorAuthor

Thank you for the review!

Regarding the font: I agree it's better to keep things simple for maintainability. That said, the default English font renders quite poorly for RTL languages in practice. For now, I’ve removed the custom fonts as suggested, but I’ll experiment with a simpler approach in a future PR—likely by adding something like this to config.yml file:

# Font Configurationfonts:# Base font for body textbase:["Source Sans Pro", "Microsoft Yahei", sans-serif]# Font for headingsheading:["Lato", "Microsoft Yahei", sans-serif]# Optional: Google Fonts to loadgoogle_fonts:# - "Roboto:400,700"# - "Montserrat:700"

I'll open a separate PR for this to keep things clean.

As for RTL detection via Liquid: I had tested that path, but couldn’t find a reliable way to automatically detect RTL languages purely within Liquid. I’ve simplified the implementation significantly in this PR to make it easier to manage.

Thanks again!

@zakariafzakariaf requested a review fromcotes2020May 20, 2025 10:21
@Nicolai9852
Copy link
Contributor

Hey@zakariaf

I just saw your RTL - it looks really awesome! I did however notice one thing - not sure if it's intentional or not

In the default LTR version, the button to copy the header link is right next to the title
In this RLT it is by the far end to the left side.

From LRT:
billede

RLT:
billede

cotes2020 and zakariaf reacted with thumbs up emoji

Copy link
Owner

@cotes2020cotes2020 left a comment•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

... but couldn’t find a reliable way to automatically detect RTL languages purely within Liquid.

Use this code to automatically detect RTL:

{%assign_lang_code =lang |split:'-' |first %}{%-case_lang_code -%}  {%-when'ar','fa','he','iw','kd','pk','ps','ug','ur','yi' -%}    {%assigndir ='rtl' %}{%-endcase -%}

Additionally, please move the newly added files in_data/locales to a separate PR. The file_posts/2025-04-20-rtl-test-persian.md doesn't need to be included in the repository either.

zakariaf reacted with thumbs up emoji
@zakariaf
Copy link
ContributorAuthor

Hey@Nicolai9852, thanks for catching that! I think it was a mistake — I just fixed it. Appreciate you pointing it out!

@zakariaf
Copy link
ContributorAuthor

@cotes2020 Thanks so much for the suggestions! I’ve applied all of them. Also, I just created another PR for the new locale files:

#2415

zakariafand others added4 commitsMay 23, 2025 20:06
fix: add dir variables and update comments for clarity on language and direction detectionfix: update HTML lang and dir attributes to use correct language variables from lang.htmlfeat: add Persian RTL test post with comprehensive content and formattingfeat: add RTL font loader to support appropriate font loading based on page languagefeat: add RTL styles and font support for Arabic, Persian, and Urdu languagesfeat: enhance RTL support by adding additional languages to the configurationfix: remove pin attribute from Persian RTL test postfeat: add comprehensive RTL support documentationfix: update comment to clarify lang and dir attributes usage in HTML layoutfix: improve formatting of RTL content creation instructions in documentationfix: swap float directions for images in Persian RTL contentfix: remove duplicated font source and unicode-range for RTL fontsfix: update font weights for RTL language stylesheetsfix: add spaces to read time unit and prompt for better formattingfix: reorder RTL font loader inclusion for rendering after googlefontsfix: update RTL language configuration to use 'fa' instead of 'fa-IR' for better compatibilityfix: add transform to sidebar for better responsiveness in RTL layoutfix: add RTL Support feature to READMEfix: update RTL support comments for clarityfix: enhance RTL support documentation for clarity and usabilityfix: correct meta format in fa.yml for claritySigned-off-by: Zakaria Fatahi <zakaria@buzzjective.com>fix: improve sidebar transform handling for RTL layout in mobilerefactor: remove RTL font loader and associated styles for cleaner codebaserefactor: streamline RTL support configuration and enhance language direction detectionchore: remove obsolete RTL support documentationrefactor: remove RTL configuration and streamline language direction detectionchore: remove RTL support mention from READMErefactor: remove obsolete Persian RTL test post for cleaner codebaserefactor: adjust anchor float and margin for improved RTL stylingrefactor: remove rtl.scss from main.scss and move to _scss/baserefactor: revert all changes about locale filesfeat: dir is an optional attribute of html elementCo-authored-by: Cotes Chung <11371340+cotes2020@users.noreply.github.com>Signed-off-by: Zakaria Fatahi <zakaria@buzzjective.com>refactor: add padding and border styles for access panel in RTLrefactor: adjust archive styles for improved RTL layoutfeat: add padding styles for categories in RTL layoutfeat: add margin styles for list items in page category for RTL layoutfeat: add margin styles for tag spans in RTL layout
Copy link
Owner

@cotes2020cotes2020 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

The search bar and the trending tags and TOC in the panel are still not vertically aligned. Please test each page locally first. Thank you!

@zakariaf
Copy link
ContributorAuthor

I tried to check everything, I think all are fixed now.

Copy link
Owner

@cotes2020cotes2020 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Thanks for the update! However, things might not be as fixed as you think. Here's a simple way to self-check if the RTL UI meets the expected standard: take a screenshot of each page in LTR mode, flip the image horizontally, and compare it with your RTL layout. The mismatches should be easy to spot.

Once you've addressed these more obvious UI issues, I'll be happy to take another look at the code in your PR.

@kungfux
Copy link
Collaborator

FYI,CSS logical properties and values may help to reduce the need of overriding CSS rules for RTL support.

@cotes2020cotes2020force-pushed themaster branch 2 times, most recently from758e22f to29bf95eCompareJuly 27, 2025 13:42
@horotat
Copy link

Is this going to happen any time soon?

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

@cotes2020cotes2020cotes2020 requested changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

RTL Support for Chirpy Theme

5 participants

@zakariaf@cotes2020@Nicolai9852@kungfux@horotat
[8]ページ先頭
©2009-2025 Movatter.jp