Skip to content

Add rtl Parameter to Shell Component for Right-to-Left Layout Support #838

@amrutadotorg

Description

@amrutadotorg

Currently, the Shell component does not provide built-in support for right-to-left (RTL) layouts. Many languages, such as Arabic, Hebrew, and Persian, require RTL directionality. To enhance accessibility and usability for RTL users, I propose adding an rtl parameter to the Shell component, which would automatically set <html dir="rtl"> in the generated page structure.

my current implementation requires js
https://coolbreeze.org/?lang=ar

// Get the 'lang' parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const language = urlParams.get('lang');

// Array of RTL languages (ISO codes)
const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'sd', 'ku', 'dv', 'ug'];

// Check if the current language is RTL
if (rtlLanguages.includes(language)) {
    // Set direction to RTL
    document.documentElement.dir = 'rtl';
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions