Menü
فاحص RTL — اكتشف مشاكل الاتجاه من اليمين لليسار في HTML/CSS واحصل على تقييم RTL (0-100)
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Adhan audio playback with multiple muezzin voices
مراجعة كود عربي — راجع الكود مع فحص التعامل مع النصوص العربية وRTL والتعليقات العربية
مصطلحات صحية عربية — ترجم واشرح مصطلحات طبية بالعربي، ساعد في فهم التقارير الطبية
مصطلحات قانونية عربية — ترجم واشرح مصطلحات قانونية، ساعد في فهم العقود والمستندات القانونية بالعربي
Arabic OCR text extraction from images and documents
كاتب السيرة الذاتية — اكتب سيرة ذاتية احترافية بالعربي أو ثنائية اللغة
| name | raqeeb |
| description | فاحص RTL — اكتشف مشاكل الاتجاه من اليمين لليسار في HTML/CSS واحصل على تقييم RTL (0-100) |
| version | 1.0.0 |
| author | Mousa Abu Mazin |
| license | MIT |
| platforms | ["linux","macos"] |
| prerequisites | {"commands":["raqeeb"],"env_vars":[]} |
| metadata | {"hermes":{"tags":["arabic","rtl","html","css","accessibility","web","linter"]}} |
أداة لاكتشاف مشاكل RTL في HTML/CSS مع تقييم من 0 إلى 100. استخدم لفحص المواقع العربية.
raqeeb scan .
مثال — فحص مشروع Next.js:
raqeeb scan ./src/
النتيجة المتوقعة:
🔍 Scanning ./src/ (47 HTML/CSS files)...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔴 HIGH: src/components/Navbar.tsx:12
Missing dir="rtl" on nav element
Fix: <nav dir="rtl">
🔴 HIGH: src/app/layout.tsx:8
<html> missing dir="rtl" and lang="ar"
Fix: <html lang="ar" dir="rtl">
🟠 MEDIUM: src/styles/globals.css:45
Using margin-left instead of margin-inline-start
Line: .sidebar { margin-left: 20px; }
Fix: .sidebar { margin-inline-start: 20px; }
🟠 MEDIUM: src/components/Card.tsx:23
text-align: left found — should be text-align: start
Fix: text-align: start;
🟡 LOW: src/styles/globals.css:89
Using padding-right instead of padding-inline-end
Fix: padding-inline-end: 16px;
🟡 LOW: src/components/Footer.tsx:5
Float: left used — prefer logical properties
Fix: float: inline-start;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Issues: 6 (2 HIGH, 2 MEDIUM, 2 LOW)
RTL Score: 62/100
raqeeb url URL
مثال — فحص موقع حي:
raqeeb url "https://example.sa"
النتيجة المتوقعة:
🌐 Fetching https://example.sa ...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Page: الصفحة الرئيسية
HTML elements: 342
CSS rules: 1,247
Issues found: 8
HIGH: 1 (missing dir attribute)
MEDIUM: 4 (physical properties)
LOW: 3 (minor alignment)
RTL Score: 71/100
raqeeb report .
مثال:
raqeeb report ./src/ --format markdown
النتيجة المتوقعة:
# تقرير جودة RTL
**المشروع**: ./src/
**التاريخ**: 2026-04-06
**التقييم**: 62/100
## ملخص
| الفئة | النتيجة | المشاكل |
|-------|---------|---------|
| Direction | 70/100 | 2 |
| CSS Layout | 55/100 | 4 |
| Text Rendering | 80/100 | 1 |
| Forms | 60/100 | 3 |
| Tables | 90/100 | 0 |
| Media | 75/100 | 1 |
| Navigation | 50/100 | 3 |
| Accessibility | 45/100 | 2 |
## التوصيات ذات الأولوية
1. أضف dir="rtl" و lang="ar" على <html>
2. استبدل الخصائص الفيزيائية بالمنطقية
3. أضف aria-label بالعربي للعناصر التفاعلية
raqeeb fix .
مثال عملي:
raqeeb fix ./src/
النتيجة المتوقعة:
🔧 Auto-fixing RTL issues...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. src/app/layout.tsx:8
<html lang="en"> → <html lang="ar" dir="rtl">
Apply? [y/N/a(ll)] y ✓
2. src/styles/globals.css:45
margin-left: 20px → margin-inline-start: 20px
Apply? [y/N/a(ll)] y ✓
3. src/styles/globals.css:67
padding-right: 16px → padding-inline-end: 16px
Apply? [y/N/a(ll)] a ✓ (applying all remaining)
Fixed: 6 issues
RTL Score: 62 → 89 (+27)
تطبيق بدون تأكيد:
raqeeb fix ./src/ --yes
raqeeb explain
| فيزيائي (خطأ) | منطقي (صح) | الوصف |
|---|---|---|
margin-left | margin-inline-start | هامش بداية السطر |
margin-right | margin-inline-end | هامش نهاية السطر |
padding-left | padding-inline-start | حشوة بداية السطر |
padding-right | padding-inline-end | حشوة نهاية السطر |
text-align: left | text-align: start | محاذاة النص |
text-align: right | text-align: end | محاذاة النص |
float: left | float: inline-start | تعويم |
float: right | float: inline-end | تعويم |
border-left | border-inline-start | حد بداية السطر |
border-right | border-inline-end | حد نهاية السطر |
left: 0 | inset-inline-start: 0 | موضع بداية |
right: 0 | inset-inline-end: 0 | موضع نهاية |
✓ <html dir="rtl" lang="ar">
✓ <body> يرث dir من html
✓ <input> مع dir="auto" للحقول ثنائية اللغة
✓ <table> مع dir="rtl"
✓ <form> مع تسميات عربية
✓ <img> مع alt بالعربي
✓ <nav> مع ترتيب RTL
| الفئة | عدد الفحوصات | أمثلة |
|---|---|---|
| Direction | 3 | dir attribute, lang attribute, document flow |
| CSS Layout | 5 | logical properties, flexbox direction, grid |
| Text Rendering | 3 | text-align, unicode-bidi, writing-mode |
| Forms | 3 | input direction, label placement, placeholder |
| Tables | 2 | table direction, cell alignment |
| Media | 3 | image mirroring, icon direction, video controls |
| Navigation | 3 | menu order, breadcrumb direction, pagination |
| Accessibility | 2 | aria-label language, reading order |
raqeeb init --write
يولّد GitHub Actions workflow:
# .github/workflows/rtl-check.yml
name: RTL Quality Check
on: [pull_request]
jobs:
rtl-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Install raqeeb
run: pipx install raqeeb
- name: Check RTL quality
run: raqeeb ci --threshold 75
- name: Upload report
if: always()
uses: actions/upload-artifact@v4
with:
name: rtl-report
path: rtl-report.md
خيار الحد الأدنى للتقييم:
# يفشل CI إذا التقييم أقل من 75
raqeeb ci --threshold 75
# يفشل فقط إذا فيه مشاكل HIGH
raqeeb ci --threshold 0 --fail-on high