Skip to content

feat(i18n): Implement Full Right-to-Left (RTL) Layout Support #25

Open
@mathe00

Description

@mathe00

Currently, while the plugin supports many languages including those written Right-to-Left (RTL) like Arabic, Hebrew, Persian, and Urdu, the plugin's custom user interface elements do not fully adapt to RTL layouts. This can result in a suboptimal user experience where text alignment, element ordering, and spacing (padding/margins) may not appear correctly when an RTL language is active within Obsidian or specifically selected for the plugin.

This issue aims to implement comprehensive RTL support across all custom UI components of the Python Bridge plugin to ensure a consistent and usable experience for RTL language users.

Obsidian typically adds an .is-rtl class to the body element when an RTL language is active, which should be leveraged for applying RTL-specific styles.

Key Areas for RTL Adaptation:

  1. Settings Tab (PythonBridgeSettingTab.ts & styles.css):

    • Security Warning Callout: The .python-bridge-security-warning-callout and its content need to ensure correct text-align (right) and direction (rtl) when body.is-rtl is present. Padding and margins should also be reviewed for RTL compatibility, favoring logical CSS properties where possible.
    • General Layout: While standard Setting components should inherit Obsidian's RTL handling, any custom-structured sections or elements within the settings tab need to be checked.
    • Script-Specific Settings Sections: Headings and dynamically generated controls for individual script settings must render correctly in RTL.
  2. Modals (e.g., UserInputModal.ts, ScriptSelectionModal.ts, future ActivationWarningModal.ts & styles.css):

    • CSS Classes: Ensure key elements within modals (titles, messages, input wrappers, button containers) have distinct CSS classes for targeted RTL styling.
    • Text & Direction: Modal titles and paragraph text should have text-align: right; and direction: rtl; applied under body.is-rtl.
    • Input Fields: Text input fields (<input type="text">, <textarea>) must correctly support direction: rtl; for text entry and display.
    • Button Ordering: For modals with multiple buttons (e.g., Submit/Cancel), their visual order may need to be reversed in RTL layouts (e.g., using flex-direction: row-reverse; on their container).
    • Spacing: All padding-left/right and margin-left/right properties should be reviewed and either converted to logical properties (e.g., padding-inline-start) or have specific RTL overrides.
  3. Notifications (new Notice()):

    • For simple text notifications, Obsidian's default RTL handling should generally be sufficient.
    • If any notifications use complex HTML or specific formatting, they need to be reviewed to ensure they are RTL-friendly. This might involve dynamically adjusting content or styles based on the detected language if necessary (though this is a lower priority if notifications are kept simple).

Tasks / Checklist:

  • Global CSS: Investigate if any global RTL styles (e.g., direction: rtl; on main plugin containers) are needed in styles.css when body.is-rtl is active, or if component-level styling is sufficient.
  • Settings Tab - Security Callout: Implement RTL styles for .python-bridge-security-warning-callout.
  • Settings Tab - General Review: Verify layout of all custom elements in the settings tab under RTL.
  • Modals - CSS Classes: Add/confirm necessary CSS classes for modal elements.
  • Modals - Text & Direction: Apply RTL text alignment and direction styles.
  • Modals - Input Fields: Ensure RTL compatibility for text inputs.
  • Modals - Button Order: Adjust button order for RTL if applicable.
  • Modals - Spacing: Convert to logical properties or add RTL overrides for padding/margins.
  • Notifications - Review: Check any complex notifications for RTL compatibility.
  • Testing: Conduct thorough testing of all plugin UI elements (Settings, Modals, Notices) with multiple RTL languages (e.g., Arabic, Hebrew) activated in Obsidian.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions