دليل الاستخدام

1 التثبيت والبدء

بعد تثبيت الإضافة من Chrome Web Store، اضغط على أيقونة نَسَق (ن) في شريط أدوات المتصفّح. ستفتح اللوحة الجانبية على يمين الشاشة.

2 تفعيل الموقع

الإضافة معطّلة افتراضيًا على كل المواقع. لتفعيلها على موقع معيّن، اضغط على المفتاح في أعلى اللوحة:

بمجرد التفعيل، تظهر شارة ON زرقاء على أيقونة الإضافة لتعرف أن الموقع مفعّل. كل التعديلات التي تجريها ستُحفظ خاصةً بهذا الموقع.

3 محدّد العنصر (CSS Selector)

كل تعديل تُجريه يُطبَّق على عنصر معيّن في الصفحة، يُحدَّد عبر CSS Selector. الافتراضي هو html, body, body * أي كل النصوص.

الأزرار السريعة تحت الحقل تختصر selectors شائعة:

• كل النصوص → كل النص في الصفحة
• العناوين → h1, h2, h3, h4, h5, h6
• الفقرات → p, li, td, div
• الروابط → a
• الحقول → input, textarea, button, select

4 أداة اختيار العنصر بالماوس

بدلًا من كتابة CSS selector يدويًا، اضغط على زر السهم ⮾ الأزرق، ثم انقر على أي عنصر في الصفحة. ستحصل على selector دقيق ومستقر تلقائيًا.

5 نوع الخط

اختر من القائمة المنسدلة بين:

• خط الموقع الافتراضي — لا تغيير
• خطوط عربية مدمجة:
  • Tajawal — حديث، مرئي، متعدد الاستخدامات
  • IBM Plex Sans Arabic — احترافي، مناسب للنصوص الطويلة
  • Amiri — كلاسيكي بـ Naskh، مثالي للنصوص الدينية والأدبية
• خطوط النظام — Tahoma, Segoe UI, Arial, Georgia, إلخ
• خط مخصّص من النظام — اكتب اسم أي خط مثبّت على جهازك (مثلاً "GE SS")

6 الحجم وارتفاع السطر

قائمتان منسدلتان جنبًا إلى جنب لاختيار حجم الخط (px) وارتفاع السطر:

القيم الجاهزة: من 10 إلى 72 px للحجم، ومن 1 إلى 3 للارتفاع. لو اخترت "افتراضي"، تُحذف الخاصية من النمط تلقائيًا.

7 سمك الخط، النمط، الزخرفة

سمك الخط: قائمة منسدلة من 100 (رفيع جدًا) إلى 900 (أسود).

النمط: عادي أو مائل.

الزخرفة: بدون، تحته خط، مشطوب، فوقه خط.

8 المحاذاة واتجاه الموقع

المحاذاة: يمين، وسط، يسار، ضبط (justify).

اتجاه الموقع ميزة استراتيجية — قسم بارز يطبّق على html, body مباشرة (بغض النظر عن selector المختار):

• —: بدون تغيير
• RTL: من اليمين لليسار — مثالي للعربية
• LTR: من اليسار لليمين
• تلقائي: حسب لغة المحتوى (مع unicode-bidi: plaintext لضمان عرض النصوص المختلطة بشكل صحيح)

9 الألوان

لون النص ولون الخلفية بحقل لكل واحد. كل حقل يحوي:

• منتقي اللون (المربع الملوّن) → افتح لوحة الألوان واختر بصريًا
• حقل النص → اكتب أي قيمة CSS: #FF0000، rgb(255,0,0)، rgba(...)، transparent
• زر × → مسح اللون والعودة للأصلي

10 محرّر CSS الكامل

للمتقدّمين: تبويب Code يفتح محرّرًا داكنًا لكتابة CSS مخصّص حر.

body {
  font-family: 'Tajawal';
  background: #FFFBEB;
}

h1, h2, h3 {
  color: #1E40AF;
}

التطبيق فوري عند الكتابة، والكود يُحفظ تلقائيًا. الزر 📋 ينسخ كل CSS، والزر ≡ يُنسّق الكود.

11 الحفظ التلقائي

لا يوجد زر "حفظ". كل تعديل يُحفظ تلقائيًا خلال 400ms من التغيير. مؤشّر صغير في الفوتر يعرض الحالة:

القيمة الفارغة (مثل "افتراضي") تحذف الخاصية تلقائيًا من النمط، فلا تتراكم خصائص فارغة.

12 إعادة ضبط الموقع

زر "إعادة ضبط الموقع" في الفوتر يحذف كل تنسيقات الموقع الحالي. يحتاج نقرتين للتأكيد:

لو لم تضغط النقرة الثانية خلال 3 ثوانٍ، أو ضغطت في أي مكان آخر، يلغى التأكيد ويعود الزر طبيعيًا.

13 صفحة الإعدادات

الزر ⚙ أعلى اللوحة يفتح صفحة الإعدادات بأربعة تبويبات:

• المواقع المعدَّلة: قائمة بكل المواقع التي طبّقت عليها أنماطًا، مع بحث، عرض CSS، تفعيل/تعطيل، حذف
• إعدادات عامة: تفعيل/تعطيل الإضافة كليًا، إعدادات الشارة، الاختصارات
• النسخ الاحتياطي: تصدير كل الإعدادات كملف JSON، استيراد ملف، مسح كل البيانات
• حول: معلومات الإصدار، الترخيص، التطوير

14 اختصارات لوحة المفاتيح

للوصول الأسرع، يمكنك استخدام:

يمكنك تغيير هذه الاختصارات من chrome://extensions/shortcuts أو عبر زر "فتح إعدادات الاختصارات" في تبويب الإعدادات العامة.