moshe-ship raqeeb — فاحص RTL للمواقع العربية
أداة لاكتشاف مشاكل 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
أنماط CSS الشائعة التي يفحصها
الخصائص الفيزيائية → المنطقية
| فيزيائي (خطأ) | منطقي (صح) | الوصف |
|---|---|---|
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
✓ <html dir="rtl" lang="ar">
✓ <body> يرث dir من html
✓ <input> مع dir="auto" للحقول ثنائية اللغة
✓ <table> مع dir="rtl"
✓ <form> مع تسميات عربية
✓ <img> مع alt بالعربي
✓ <nav> مع ترتيب RTL
الفئات الـ8 بالتفصيل
| الفئة | عدد الفحوصات | أمثلة |
|---|---|---|
| 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 |
إعداد CI
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
متى تستخدم
- المستخدم يبني موقع عربي ويريد فحص RTL
- مراجعة موقع قبل الإطلاق
- إعداد CI لفحص RTL تلقائي
- تحويل موقع LTR إلى RTL
- مراجعة pull request يحتوي تغييرات CSS