MAHMOUD ABDELNABY
Cro · CLI SCRIPT · 2

Arabic RTL Layout Micro-Jank & Mirroring Linter

Catch embarrassing RTL mirroring bugs, flipped arrows, and broken text layouts before your Arabic website launches.

Problem it addresses

Create an automated RTL design quality assurance toolkit: 1) Python scanner (rtl_linter.py) auditing CSS and HTML files for non-logical properties (margin-left vs margin-inline-start), hardcoded left-aligned icons, missing dir attributes, and unisolated bidirectional text tags (<bdi>), 2) 35-point visual RTL inspection checklist, 3) Modern CSS logical property migration guide.

Who it is for

BOTH operating in high-growth e-commerce, digital publishing, and direct-response marketing across Saudi Arabia, UAE, and Egypt.

What is inside

Key files listed in the README repository architecture:

  • checklists/35-point-rtl-visual-qa.md
  • css/rtl-fix-resets.css
  • examples/bad_and_good_rtl_styles.css
  • examples/sample_broken_rtl.html
  • LICENSE
  • README.md
  • snippets/css-logical-properties-cheatsheet.css
  • src/rtl_linter.py
  • tests/test_linter.py
  • tests/test_rtl_linter.py

How to evaluate and use it

  1. Read the README first and confirm that the documented problem matches your use case.
  2. Inspect the listed files to find the data, tools, templates, and tests relevant to your task.
  3. Follow the repository’s Quick Start and check prerequisites before running commands.
  4. Compare outputs with documented examples and review limitations before using them in a decision or client workflow.

Quick Start from the README: python -m unittest discover -s tests · python src/rtl_linter.py --help

Scope and limitations

  • CSS Logical Properties: Audits CSS stylesheets to ensure 'margin-inline-start' and 'inset-inline' replace legacy directional 'margin-left' and 'left' properties.
  • Icon Mirroring Directionality: Verifies that directional icons (arrows, back buttons, progress bars) mirror in RTL while non-directional icons (clocks, checkmarks) remain static.
  • Cumulative Layout Shift (CLS): Prevents layout jumps caused by late font swap or directional flips by enforcing RTL directionality on root <html> tag.

This page summarizes the available documentation; it does not establish performance or business results. Verify data and prerequisites before use.

Related repositories