Description
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:
-
Settings Tab (
PythonBridgeSettingTab.ts
&styles.css
):- Security Warning Callout: The
.python-bridge-security-warning-callout
and its content need to ensure correcttext-align
(right) anddirection
(rtl) whenbody.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.
- Security Warning Callout: The
-
Modals (e.g.,
UserInputModal.ts
,ScriptSelectionModal.ts
, futureActivationWarningModal.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;
anddirection: rtl;
applied underbody.is-rtl
. - Input Fields: Text input fields (
<input type="text">
,<textarea>
) must correctly supportdirection: 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
andmargin-left
/right
properties should be reviewed and either converted to logical properties (e.g.,padding-inline-start
) or have specific RTL overrides.
-
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 instyles.css
whenbody.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.