Skip to content

Styling Bug: Host page CSS overrides RTL direction for Persian language #872

@Enlight432

Description

@Enlight432

Describe the bug
The extension's response window fails to render Right-to-Left (RTL) text correctly on certain websites that enforce a global direction: ltr style. For Persian (Farsi) responses, the text is incorrectly displayed as LTR.

To Reproduce

  1. Go to a website with aggressive global LTR styles, for example: https://f95zone.to/
  2. Select any text and use a prompt that generates a Persian (Farsi) response.
  3. Observe the response window: the Persian text is aligned to the left (LTR) instead of the right (RTL).

Expected behavior
The response window should always respect the text's directionality, rendering RTL languages like Persian correctly, regardless of the host page's CSS.

Technical Suggestion for a permanent fix:
This is a classic CSS specificity issue. To make the extension more resilient, I recommend isolating its styles from the host page. The best architectural approaches would be:

  1. Using Shadow DOM: Encapsulate the extension's window in a Shadow DOM to create a completely isolated CSS scope. This is the most robust solution.
  2. Using higher specificity selectors or inline styles: As a simpler alternative, ensure the extension's CSS rules for directionality have extremely high specificity or are applied as inline styles to the container element to prevent overrides.

Thank you for this great extension!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions