المستندات والطباعة
كل الورق اللي بتطلعه أمانة: عقود وفواتير وإيصالات وقسائم وشهادات وتقارير وبطاقات. نظام طباعة واحد بنفس الأقواس والختم، لكل نوع شخصيته، وكله بيتقرا بالأبيض والأسود. المقاسات، الخطوط بالنقطة، اللون والحبر، الكسر، الأرقام، الأمان، وإتاحة الـ PDF.
الفكرة: ورق وحبر
أمانة بتطلع ورق بنفس جدية الشاشة. القاعدة: الورق أبيض والنص حبر، واللون إضافة بتحمل معنى (ختم، حالة، رقم واحد كبير)، والأقواس والختم والأرقام الثقيلة هم الهوية. المستند أول حاجة بيقولها: إيه الحالة، وإيه الناقص، قبل أي وعد.
documents/ صفحة HTML قائمة بذاتها، وكل واحد ليه PDF في assets/pdf/ بيتولّد من tools/build-pdfs.sh. المعاينة المصغّرة في لوحة المستندات.مقاسات الورق والصفحات المسمّاة
كل مقاس له @page باسم، وكل ورقة بتاخد page: name. كده المستند الواحد يجمع مقاسات (بطاقة CR80 جنب ورقة A4) من غير ما نكسر الصفحات. الهوامش على الـ @page دايماً صفر، والورقة نفسها هي اللي بترسم الهامش الآمن (ده بيسمح بلون كامل لحد الحافة وعلامات قص مضبوطة).
| الورقة | المقاس (مم) | @page و class | هامش آمن (جانبي / علوي / سفلي) | الاستخدام |
|---|---|---|---|---|
| A4 رأسي | 210 × 297 | a4 · .sheet--a4 | 15 / 14 / 18 | عقد، فاتورة، تقارير، كشف، نماذج، ورق مراسلات |
| A4 أفقي | 297 × 210 | a4l · .sheet--a4l | 14 / 12 / 14 | شهادة التوثيق |
| A5 رأسي | 148 × 210 | a5 · .sheet--a5 | 11 / 11 / 13 | نماذج قصيرة (متاح، لا يستخدمه مستند حالياً) |
| A5 أفقي | 210 × 148 | a5l · .sheet--a5l | 11 / 10 / 12 | قسيمة المرتب، إيصال استلام نقدية بكعب |
| رول حراري | 80 × متغير (208) | thermal · .sheet--thermal | 4.5 / 7 / 7 | إيصال دفع (مساحة الطباعة الفعلية 72 مم) |
| بطاقة CR80 | 85.6 × 54 | cr80 · .sheet--cr80 | 4 / 4 / 4 | بطاقة تعريف العاملة، وورقتا قص A4 لـ 8 بطاقات |
| مظروف DL | 220 × 110 | dl · .sheet--dl | 10 / 9 / 9 | مراسلات |
| كارت شخصي | 85 × 55 (+3 قص) | bcard · .sheet--bcard | 6 / 5 / 5 | كارت الموظف |
| شاشة | 640 × 270 px · 1080 × 1350 px | sigmail · social | 24 px · 72 px | توقيع البريد، بطاقة واتساب 4:5 |
القص (bleed) وعلامات القص
أي لون أو صورة بتوصل للحافة (ظهر الكارت الأصفر، ورقة CR80) لازم تتمد 3 مم برّه خط القص، والنص والشعار يبعدوا 5 مم على الأقل عن الحافة (4 مم في CR80). ورقتا قص البطاقات بتجيب علامات قص 5 مم خارج الشبكة. ?annotations=on على أي مستند بيعرض الهامش الآمن للمراجعة، ومش بيتطبع.
سلّم الخطوط بالنقطة (pt)
الطباعة بالنقطة مش بالبكسل. العناوين Tajawal 800 والأرقام الكبيرة، والقراءة Readex Pro. أصغر حجم لأي معلومة 9 نقاط. السبع نقاط مسموحة للنص المجهري الزخرفي بس (مش معلومة، وبـ aria-hidden).
| Token | القيمة | الخط | الاستخدام | عيّنة |
|---|---|---|---|---|
| --pt-micro | 7pt | Arial (SVG) | نص مجهري زخرفي فقط | AMANA · VERIFIED |
| --pt-xs | 9pt | Readex 400/600 | تذييل، تسميات، حواشٍ، حد أدنى للمعلومة | رقم الوثيقة والتاريخ |
| --pt-sm | 9.5pt | Readex | نص كثيف: عقد، جداول | بنود العقد والجداول |
| --pt-base | 10.5pt | Readex | القراءة الافتراضية، سطر 1.6 | فقرة قراءة عادية |
| --pt-md | 12pt | Tajawal 800 / Readex | مقدمة، عنوان صغير | عنوان صغير |
| --pt-lg | 14pt | Tajawal 800 | عنوان قسم | عنوان قسم |
| --pt-xl | 18pt | Tajawal 800 | عنوان رئيسي للمستند الكثيف | فاتورة |
| --pt-2xl | 24pt | Tajawal 800 | عنوان صفحة | كشف عمولات |
| --pt-3xl | 36pt | Tajawal 800 | عنوان المستند، رقم مؤشر | 9,000 |
| --pt-4xl / 5xl | 56 / 96pt | Tajawal 800 | أرقام الغلاف التحريري (واحد في الصفحة) | 41 |
الكلاسات: .p-mega .p-giant .p-display .p-title .p-h1 .p-h2 .p-h3 .p-lead .p-body .p-dense .p-small .p-eyebrow. العربي مفيهوش تباعد حروف أبداً، والعناوين text-wrap: balance.
اللون والحبر
الأبيض ورق، وحبر منتصف الليل #0e2a33 هو كل النصوص (13.7:1). الألوان الأربعة بمعانيها (فيروزي ثقة، طماطم انتباه، شمس تمييز، ليلكي رعاية) إضافة بتحمل كلمة وأيقونة، ومفيش نص ملوّن غير الغامق من نفس العائلة (طماطم غامق، فيروزي غامق). النص على أي لون صريح حبر.
| اللون | القيمة | درجة الرمادي عند الطباعة | معناه في الورق |
|---|---|---|---|
| حبر | #0e2a33 | 14% | النص، الخطوط، الظل الصلب |
| فيروزي | #12b3a0 | 56% | موثّق، تم، المستوى 2 |
| طماطم | #ff6b4a | 53% | مستحق، انتباه، رقم الإيصال |
| ليلكي | #b8a6ff | 69% | رعاية، الأسرة، العقد |
| شمس | #ffc53d | 78% | تمييز واحد: الإجمالي، المستوى 3 |
قواعد الحبر
- مساحة لون كبيرة واحدة في الصفحة على الأكثر (صندوق الإجمالي، الغلاف). الباقي تظليل خفيف أو خط.
- التظليل (
.tone) والصفوف المخططة economy: لو الطابعة شالتها، الصفحة لسه بتتقرا. الألوان اللي بتحمل معنى (ختم، ختم مطاطي، حالة، QR، رسوم)print-color-adjust: exact. - الخلفية دايماً بيضاء ومفيش وضع داكن:
color-scheme: lightعلى الورقة. - أقل سُمك خط 0.5 نقطة، وخط الجدول الرئيسي 1.2 نقطة، وخط الإطار 0.75 نقطة.
- الظل الصلب (1.2 مم) على صندوق واحد في الصفحة، مش على كل صندوق.
قواعد الرمادي (أبيض وأسود)
أي مستند لازم يمر باختبار واحد: صوّره بـ filter: grayscale(1) وشوف لو أي معلومة ضاعت. التمثيل بالأسفل هو نفس المكوّنات ملونة ورمادية جنب بعض.
| الحالة | الإطار | الأيقونة | الكلمة |
|---|---|---|---|
| تم / ناجح | متصل 1pt | علامة صح | تم، مدفوعة، صُرف |
| جارٍ / ينتظر | متقطع | ساعة | جارية، متوقع، مشروط |
| مشكلة / متأخر | مزدوج 2.4pt | تنبيه أو × | مستحقة، لم يتحقق، بلاغ مفتوح |
| لا ينطبق | رمادي متصل | شرطة | لا شيء، لم يثبت |
- الرسوم البيانية: نقط وخطوط (
pattern) وأرقام مكتوبة على كل عنصر، والأسطورة بكلمة ونمط. - الحضور في القسيمة بعلامات (✓ ◦ + ×) مش بخلفيات.
- أي تظليل أقل من 6% بيتعامل كأنه مش موجود (بيختفي في الطابعات الرمادية).
قواعد الصفحات والكسر
الورقة = صفحة مادية. الصفحة المتعددة = عدة .sheet بمحتوى معروف مقاسه، مش نص بيتدفق ويتكسر. كده الغلاف والتوقيع ولا مرة بيتفصلوا. لما المستند يتدفق فعلاً (كشف حساب طويل) بنستخدم body.pdoc--flow وصفحة @page flow.
| القاعدة | كيف |
|---|---|
| الصف ما يتكسرش | .ptable tr { break-inside: avoid }، والترويسة تتكرر thead { display: table-header-group } |
| العنوان ما يتفصلش عن فقرته | h1..h4 { break-after: avoid }، والفقرات orphans: 3; widows: 3 |
| التوقيع ما يتفصلش عن النص | .psig, .pesign { break-inside: avoid }، وصفحة التوقيع صفحة لوحدها |
| كل ورقة صفحة | .sheet { break-after: page } وآخر ورقة auto |
| مفيش صفحة بيضا | ارتفاع الورقة بيطرح 0.3 مم في الطباعة، وعرضها 100% من الصفحة |
| رأس وتذييل وأرقام صفحات | تذييل ثابت .pfoot بعدّاد counter(sheet) ورقم الإجمالي في data-of (يشتغل في كل المتصفحات). في وضع التدفق: @page flow بصناديق الهامش @top-right و@bottom-center (Chrome 131+) |
| عدد الصفحات | بيتتأكد في tools/build-pdfs.sh (بيطبع Pages بعد كل ملف) |
الأرقام والتواريخ والفلوس
أرقام غربية (0 إلى 9) في كل مكان. الفلوس والأرقام التعريفية معزولة LTR (.pnum)، وفي الجداول المبلغ دايماً بخانتين عشريتين وبمحاذاة اليمين علشان العلامة العشرية تتحاذى تحت بعضها.
| البند | الكمية | المبلغ (ج.م) |
|---|---|---|
| عمولة تعيين، مرحلة 1 (30%) | 1 | 2,250.00 |
| رسم تشغيل الدفع | 1 | 40.00 |
| ضريبة القيمة المضافة 14% | 1 | 320.60 |
| الإجمالي | 2,610.60 | |
- التاريخ المقروء: «الثلاثاء 27 أكتوبر 2026». التاريخ في الجداول والأكواد: 2026-10-27 (ISO). الوقت 24 ساعة.
- الفلوس: «ج.م» بعد الرقم بحجم أصغر (
.pcur)، الألوف بفاصلة، والكسور بنقطة: 3,465.60. - الإجمالي كتابةً بالعربي في الفواتير والإيصالات: «ألفان وستمائة وعشرة جنيهات وستون قرشاً لا غير».
- الأرقام التعريفية (عقد، فاتورة، IBAN، هاتف) بـ
.pnumأو.pmono، ولا تتكسر على سطرين. - كل بيانات الأشخاص مقنّعة في المستندات اللي بتخرج برّه الطرفين: 2910 •••• •••• 245.
السطر المزدوج اللغة
العربي الأول دايماً، وتحته لغة العاملة أو الإنجليزي بحجم 9 نقاط. سطر الترجمة بيتحط في <span dir="ltr" lang="..."> داخل كتلة RTL، فتفضل محاذية لليمين والترقيم ما يتقلبش. الأمهرية والتغرينية بخط Noto Sans Ethiopic.
عناصر الأمان
الأمان في الورق هو إمكانية التحقق، مش الزخرفة. كل مستند مهم فيه رقم وثيقة + رابط تحقق + بصمة، وبعضها فيه ختم وإطار بنص مجهري. الرابط والـ QR بيفتحوا الحالة فقط (صحيح، موقّع، آخر إصدار) ولا بيعرضوا بيانات شخصية.
| العنصر | Class | القاعدة |
|---|---|---|
| ختم دائري | .pseal + .is-teal|sun|lil | حلقة متقطعة داخلية، مائل 8°. أيقونة + كلمة. بحجم --s. |
| ختم مطاطي | .pstamp | إطار مزدوج وكلمة بحجم 18pt. «مدفوعة» (فيروزي غامق) أو «مستحقة» (طماطم غامق). |
| توقيع إلكتروني | .pesign | الاسم، الصفة، الوقت، بصمة قصيرة، وطريقة التوقيع. |
| QR وباركود | .qr .barcode | أقل مقاس 20 مم، وحد هادئ أبيض. الموجود هنا نمط تجريبي مش قابل للمسح. |
| نص مجهري | .pmicro .pframe | ارتفاع 1.6 مم، زخرفي، aria-hidden. |
| نمط أقواس دقيق | .pguil | خط 0.45 وحدة من نمط الأقواس، شفافية 35 إلى 55%. |
| علامة مائية | .wm | «نسخة تجريبية» أو «مسودة»، 7% شفافية، تحت المحتوى، مائلة 30°. |
رحلة التحقق
إمكانية وصول ملفات PDF
PDF اللي بيطلع من Chrome بيكون Tagged (فيه شجرة هيكل)، فكل اللي بنكتبه صح في HTML بينتقل: العناوين والجداول والقوائم واللغة. قبل ما أي مستند يتسلّم نتأكد من القايمة دي.
| البند | المطلوب | كيف نتحقق |
|---|---|---|
| عنوان المستند | <title> فيه النوع والرقم: «عقد عمل منزلي AMN-C-2026-004871». | pdfinfo file.pdf (Title) |
| اللغة | <html lang="ar-EG" dir="rtl">، وlang على كل سطر بلغة تانية. | قارئ الشاشة بيبدّل النطق |
| ترتيب القراءة | ترتيب الـ DOM هو ترتيب القراءة (اليمين لليسار، من فوق لتحت). مفيش position بيقلب الترتيب البصري عن المنطقي. | انسخ النص من PDF وشوف ترتيبه |
| العناوين | h1 واحد للمستند، h2 للأقسام، h3 لما تحتها. مش خط كبير بس. | pdfinfo يقول Tagged: yes |
| الجداول | th وthead وcaption، والخلايا الفاضية فاضية مش بمسافات. | مراجعة يدوية |
| الصور والرموز | QR والباركود role="img" مع aria-label. الزخرفة (نص مجهري، خطوط) aria-hidden. | الزخرفة ما تظهرش في الاستخراج |
| الحجم والتباين | أقل 9 نقاط. النص الأساسي 7:1 أو أعلى (حبر على أبيض 13.7:1). التباين على الألوان الصريحة حبر. | صفحة الألوان + اختبار الرمادي |
| اللون وحده | مفيش معلومة باللون بس: كلمة وأيقونة وشكل. | filter: grayscale(1) |
| الروابط | الرابط مكتوب نصاً على الورق (مفيش «اضغط هنا»)، وقابل للنسخ. | مراجعة يدوية |
المستندات الاثنا عشر
كل ملف جاهز للفتح والطباعة، وله PDF متولّد. لوحة المعاينة فيها شروحات كل مستند: مقاسه ومتى بيتولّد ولمن بيروح.
| المستند | الورقة | الصفحات | الشخصية | ملفات |
|---|---|---|---|---|
| عقد عمل منزلي | A4 | 3 | رسمي وكثيف | HTML · PDF |
| فاتورة ضريبية | A4 | 1 | نضيفة وجدولية | HTML · PDF |
| إيصال حراري | 80 مم | 1 | ضيق وعملي | HTML · PDF |
| إيصال استلام نقدية | A5 أفقي | 1 | دفتر إيصالات بكعب | HTML · PDF |
| قسيمة مرتب | A5 أفقي | 1 | دافئة، العاملة أولاً | HTML · PDF |
| كشف عمولات | A4 | 2 | دفتر حسابات هادئ | HTML · PDF |
| شهادة توثيق | A4 أفقي | 2 | احتفالية: قوس وختم | HTML · PDF |
| بطاقة تعريف العاملة | CR80 + A4 | 4 | صغيرة ولمسية | HTML · PDF |
| تقرير حادثة | A4 | 2 | سرّي وجاد | HTML · PDF |
| تقرير أداء المكتب | A4 | 4 | تحريري برقم كبير | HTML · PDF |
| تقييم التجربة والاستبدال | A4 | 3 | مساحة كتابة واسعة | HTML · PDF |
| الهوية خارج النظام | A4 · DL · كارت · px | 6 | هادئة ومتسقة | HTML · PDF |
إزاي تعمل مستند جديد
انسخ رأس أي مستند وغيّر المحتوى. الجسم دايماً <main class="desk"> فيه ورقة أو أكتر. وبعدين شغّل tools/build-pdfs.sh اسم-الملف.
<html lang="ar-EG" dir="rtl" class="pdoc">
<head>
<title>نوع المستند + الرقم | أمانة</title>
<meta name="color-scheme" content="light">
<!-- نفس روابط الـ CSS مثل wireframes، وبعدها -->
<link rel="stylesheet" href="../assets/css/print.css">
</head>
<body class="pdoc" data-root="../">
<div class="doc-bar noprint">... زر window.print() ...</div>
<main class="desk">
<section class="sheet sheet--a4" aria-label="الصفحة 1 من 1">
<header class="phead">...</header>
...
<footer class="pfoot"><span class="pfoot__id">رقم الوثيقة</span><span class="pfoot__page" data-of="1"></span></footer>
</section>
</main>
</body>
أوضاع المعاينة بالـ URL: ?theme=light (إجباري للـ PDF)، ?wrap=1 (الأوراق جنب بعض بدون شريط، تستخدمها لوحة المستندات)، ?annotations=on (الهامش الآمن).
افعل ولا تفعل
- لا تكتب مبلغاً أو تاريخاً بأرقام هندية، ولا تعكس ترتيب الرقم بالـ RTL (استخدم
.pnum). - لا تحط لون خلفية كاملة للصفحة، ولا أكتر من مساحة لون صريحة واحدة.
- لا تعرض بيانات شخصية كاملة خارج الطرفين: الرقم القومي والهاتف مقنّعان.
- لا تستخدم QR حقيقي بدون مكتبة بتولّد تصحيح أخطاء M أو أعلى. اللي في النظام نمط تجريبي مكتوب عليه «QR تجريبي».
- لا تعتمد على صورة العاملة في مستند طباعة بدون موافقة مكتوبة، ولا تكبّرها فوق 30 × 40 مم.