Menu
فاحص RTL — اكتشف مشاكل الاتجاه من اليمين لليسار في HTML/CSS واحصل على تقييم RTL (0-100)
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Adhan audio playback with multiple muezzin voices
مراجعة كود عربي — راجع الكود مع فحص التعامل مع النصوص العربية وRTL والتعليقات العربية
مصطلحات صحية عربية — ترجم واشرح مصطلحات طبية بالعربي، ساعد في فهم التقارير الطبية
مصطلحات قانونية عربية — ترجم واشرح مصطلحات قانونية، ساعد في فهم العقود والمستندات القانونية بالعربي
Arabic OCR text extraction from images and documents
كاتب السيرة الذاتية — اكتب سيرة ذاتية احترافية بالعربي أو ثنائية اللغة
Based on SOC occupation classification
| 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