قلم - معاينة مكتبة الطباعة العربية

سلم الأحجام - Type Scale

الـ Presets الجاهزة

.q-hero

اصنع شيئاً رائعاً

.q-hero

.q-heading

عنوان القسم الرئيسي

.q-heading .q-h2

.q-body

هذا نص توضيحي لاختبار وضوح الخط وارتفاع السطر في الطباعة العربية.

.q-body

.q-prose

إن الطباعة العربية الجيدة تبدأ باختيار الخط المناسب وضبط المسافات البيضاء بين الحروف والسطور.

.q-prose

.q-label

تسمية الحقل

.q-label

.q-caption

تعليق توضيحي اسفل الصورة

.q-caption

.q-fluid-hero

سائل وحيوي

.q-fluid-hero

.q-kashida

نص مُمتد يستخدم تأثير الكشيدة لتوزيع الكلمات بشكل متوازن.

.q-kashida

محرر حي

اكتب نصك العربي هنا وسيظهر في الأسفل مع تطبيق إعدادات الطباعة المختارة في الشريط الجانبي. جرّب تغيير الخط والحجم لترى الفرق.

الاستخدام

HTML - CDN

<!-- 1. أضف رابط قلم -->
<link rel="stylesheet" href="qalam.min.css">

<!-- 2. استخدم الـ presets مباشرة -->
<h1 class="q-heading q-h1">عنوان رئيسي</h1>
<p  class="q-body">نص المحتوى</p>
<p  class="q-prose">مقالة طويلة</p>

JavaScript - تخصيص الخط

import Qalam from './qalam.esm.js';

Qalam.init({
  font:       'tajawal',   // cairo | tajawal | amiri | ...
  baseSize:   18,            // px
  scaleRatio: 1.333,          // Perfect Fourth
  autoLoad:   true,           // تحميل الخط تلقائياً
});

Tailwind CSS

// tailwind.config.js
const qalam = require('./tailwind/qalam-plugin');

module.exports = {
  plugins: [
    qalam({ fontFamily: 'Tajawal' })
  ]
};

CSS Variables مباشرة

:root {
  font-family: var(--q-font-sans);
  font-size:   var(--q-text-base);
  line-height: var(--q-leading-normal);
}

h1 { font-size: var(--q-text-4xl); font-weight: 700; }
p  { font-size: var(--q-text-base); line-height: var(--q-leading-relaxed); }