مكتبة طباعة عربية احترافية

طباعة عربية مثالية
في سطر واحد

مكتبة CSS/JS خفيفة (~4KB) تُقدِّم متغيرات type scale مُعايَرة خصيصاً للعربي، line-height مُحسَّن، وpresets جاهزة لـ Tailwind وCSS خالص. RTL-first. بلا تبعيات.

معاينة المنتج تواصل عبر واتساب

$39 $79 شامل الضريبة - ترخيص مدى الحياة

معاينة مباشرة

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

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

هذا نص توضيحي يُظهر وضوح الطباعة العربية عند استخدام line-height مُحسَّن ومتغيرات type scale مُعايَرة. لاحظ الفرق في القراءة.

تعليق توضيحي - font-size: var(--q-text-sm)

--q-text-4xl --q-leading-normal --q-font-sans .q-heading .q-body .q-prose

المميزات

ما يجعل قلم مختلفاً

صُمِّم من الصفر لحل مشاكل حقيقية في الطباعة العربية على الويب

📐

Type Scale مُعايَر للعربي

نسبة 1.25 بدلاً من 1.333 لأن الحروف العربية أوسع - يمنحك تناسقاً بصرياً مثالياً.

📏

Line-Height مُحسَّن

1.8 للنصوص العادية و2.0 للنثر - يستوعب التشكيل والامتدادات دون تداخل.

🎨

Presets جاهزة

q-hero, q-heading, q-body, q-prose, q-label, q-caption - جاهزة للنسخ واللصق.

🌀

Tailwind Plugin

سطر واحد في tailwind.config.js يُضيف fontFamily و lineHeight وutilities العربية.

📦

~4KB بلا تبعيات

CSS خالص + JS اختياري للتخصيص الديناميكي. لا تحتاج شيئاً آخر.

🔠

6 خطوط مدعومة

Cairo, Tajawal, Amiri, Noto Naskh, Lateef, Scheherazade - كل خط بإعداداته المثلى.

💧

Fluid Typography

clamp() جاهزة: q-fluid-sm, q-fluid-heading, q-fluid-hero - تتكيف مع كل حجم شاشة.

🌙

Dark Mode تلقائي

leading-normal يرتفع قليلاً في الوضع الداكن تلقائياً لتحسين القراءة.

لقطات من المنتج

Qalam Arabic typography preview

سلم الأحجام

Type Scale - نسبة 1.25

10 مستويات مُعايَرة على أساس 16px - تُغطي كل حالة من التعليق حتى البطل

المتغير	rem	px	معاينة	الاستخدام
--q-text-xs	0.640rem	~10px	نص تعليق صغير جداً	تسميات توضيحية
--q-text-sm	0.800rem	~13px	نص ثانوي صغير	caption, label
--q-text-base	1.000rem	16px	النص الأساسي	body
--q-text-md	1.125rem	18px	نص متوسط	lead paragraph
--q-text-lg	1.250rem	20px	عنوان صغير	h5, h6
--q-text-xl	1.563rem	25px	عنوان متوسط	h4
--q-text-2xl	1.953rem	31px	عنوان كبير	h3
--q-text-3xl	2.441rem	39px	عنوان قسم	h2
--q-text-4xl	3.052rem	49px	بطل صغير	h1
--q-text-5xl	3.815rem	61px	بطل	hero

الـ Presets

جاهز للنسخ واللصق

فئات CSS مُركَّبة تجمع الحجم والوزن وارتفاع السطر دفعة واحدة

.q-hero

اصنع شيئاً

5xl + black + leading-tight + tracking-tight

.q-heading .q-h2

عنوان الصفحة

bold + leading-tight + tracking-tight

.q-body

نص المحتوى الأساسي للصفحة والمقالات القصيرة.

base + normal + leading-normal

.q-prose

مقالة طويلة مع خط أميري ومسافات واسعة مريحة للقراءة.

Amiri + md + leading-relaxed + max-width: 68ch

.q-label

تسمية الحقل

sm + semibold + leading: 1 - للأزرار والبادجات

.q-caption

تعليق اسفل الصورة او الجدول

sm + opacity 0.7 + leading-snug

.q-fluid-hero

سائل وحيوي دائماً

clamp(2xl, 6vw, 5xl) - يتكيف مع الشاشة

.q-kashida

نص مُمتد بالكشيدة لتوزيع متوازن.

text-justify: kashida + text-align: justify

الاستخدام

ثلاث طرق للتكامل

1 - HTML خالص

<!-- أضف المكتبة -->
<link rel="stylesheet" href="qalam.min.css"/>

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

2 - JavaScript / تهيئة ديناميكية

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

// تهيئة بخط Tajawal وحجم 18px
Qalam.init({
  font:       'tajawal',
  baseSize:   18,
  scaleRatio: 1.333,
  autoLoad:   true,
});

// قراءة قيمة token
const size = Qalam.getToken('--q-text-2xl');

3 - Tailwind CSS Plugin

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

module.exports = {
  content: ['./src/**/*.{html,js,jsx,tsx}'],
  plugins: [
    qalam({ fontFamily: 'Cairo' })
  ],
};

المحتويات

ما يتضمنه الملف

CSS qalam.css - كامل مع تعليقات

CSS qalam.min.css - ~4KB

JS qalam.js - CJS

ESM qalam.esm.js

JS tailwind/qalam-plugin.js

JS postcss/qalam-preset.js

TS index.d.ts

MD README.md

جاهز لطباعة عربية مثالية؟

ترخيص مدى الحياة - استخدام في مشاريع غير محدودة - تحديثات مجانية

$39

السعر الأصلي: $79

شراء قلم الآن تواصل عبر واتساب