Skip to content

Conversation

@zakariaf
Copy link
Contributor

@zakariaf zakariaf commented Apr 20, 2025

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, Hebrew, Persian, Urdu, and other RTL languages.

The implementation:

  • Automatically detects RTL languages based on the page's lang attribute
  • Applies appropriate direction and styling for RTL content
  • Provides language-specific fonts for various RTL languages
  • Maintains all existing LTR functionality without changes
  • Includes configuration options to customize RTL behavior

Key components:

  1. Language/Direction Detection: Added to lang.html to detect RTL languages
  2. RTL Stylesheet: Created rtl.scss with comprehensive RTL styling
  3. RTL Font Support: Added rtl-fonts.scss for language-specific fonts
  4. Example Implementation: Provided Persian locale file and sample content

New Files

  • _sass/rtl.scss: Contains RTL-specific styles for layout and UI elements
  • _sass/rtl-fonts.scss: Defines and applies language-specific fonts for RTL languages
  • _includes/rtl-font-loader.html: HTML-based font loader for faster RTL font loading
  • _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
  • docs/RTL-SUPPORT.md: Documentation for RTL support

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.

Additional context

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

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

@github-actions github-actions bot closed this Apr 20, 2025
@github-actions
Copy link

Oops, it seems you've opened an invalid pull request. No worries, we'll close it for you.

palonso pushed a commit to palonso/palonso.github.io that referenced this pull request Jul 28, 2025
Added condition to avoid security issue according to GitHub's dependabot


![image](https://github.com/alshedivat/al-folio/assets/31376482/b470a83a-5038-48be-99a6-1cbf63de57bf)

---------

Signed-off-by: George Araujo <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant