المستندات العربية واتجاه النص
تُنشئ صحيفة المستندات بالمحرك نفسه الذي يستخدمه متصفح Google Chrome، فيعمل تشكيل الحروف العربية والتخطيط من اليمين إلى اليسار والنص المختلط بالعربية والإنجليزية كما يعمل في المتصفح. يتناول هذا الدليل التفاصيل التي تجعل المستندات العربية تبدو صحيحة على الورق.
الاتجاه واللغة
اضبطهما على العنصر الجذري. تحدد lang قواعد التشكيل الصحيحة، وتحدد dir ترتيب القراءة وترتيب أعمدة الجداول والمحاذاة الافتراضية.
<html dir="rtl" lang="ar">للنص الإنجليزي داخل النص العربي (الأسماء وأرقام الآيبان والرموز)، أحِطه بعنصر يحفظ اتجاهه الخاص:
<p>رقم الحساب: <bdi dir="ltr">SA03 8000 0000 6080 1016 7519</bdi></p>الخطوط
هذه الخطوط مثبتة على الخادم ويمكن استخدامها بأسمائها دون تحميل أي شيء:
| الخط | يناسب |
|---|---|
Noto Naskh Arabic | نصوص المستندات؛ نمط الكتب الكلاسيكي. |
Noto Sans Arabic | نصوص واضحة بأسلوب الواجهات، والجداول. |
Noto Kufi Arabic | العناوين ونصوص العلامة التجارية. |
Amiri | المستندات الرسمية والعقود والنصوص المشكولة بالكامل. |
DejaVu Sans و Liberation Sans و Liberation Serif | النصوص اللاتينية؛ ولخط Liberation مقاسات Arial و Times New Roman نفسها. |
Noto Color Emoji | الرموز التعبيرية. |
body { font-family: 'Noto Naskh Arabic', 'Noto Sans', sans-serif; }تعمل خطوطك الخاصة أيضًا: حمّلها عبر @font-face من عنوان عام أو ضمّنها بصيغة data:. وينتظر المحرك تحميل خطوط الويب قبل إنشاء الملف. الخطوط المستضافة على Google Fonts تُحمَّل من Google؛ فإن كان مستندك لا يجوز أن يتسبب في أي طلب خارج المملكة، فضمّن الخط أو استخدم خطًا مثبتًا.
الأرقام والتواريخ
- الأرقام الهندية (
١٢٣) والأرقام الغربية (123) كلتاهما سليمة. اختر نوعًا واحدًا لكل مستند؛ وتشيع الأرقام الغربية في المستندات المالية السعودية. - تحتفظ المبالغ بترتيبها داخل النص العربي. ولأعمدة المبالغ، اضبط
direction: ltr; text-align: leftعلى الخلايا، وfont-variant-numeric: tabular-numsلتصطف الكسور العشرية. - الريال: اكتب
ر.سأوSAR. رمز الريال السعودي الجديد (U+20C1) غير موجود بعد في الخطوط المثبتة؛ فإن احتجت إليه فضمّن خطًا يحتويه أو استخدم صورة SVG. - التواريخ الهجرية نص عادي بالنسبة للمحرك؛ نسّقها في تطبيقك.
الجداول الممتدة على عدة صفحات
لتكرار صف ترويسة الجدول في كل صفحة، ضعه داخل <thead> وأرسل use_print: true. من دون ورقة أنماط الطباعة تظهر الترويسة في الصفحة الأولى فقط.
tr { break-inside: avoid; } /* do not split a row across pages */
thead { display: table-header-group; } /* repeat the header */أرقام الصفحات بالعربية
"footer": { "source": "<div style=\"width:100%;text-align:center;font-size:9px\">صفحة {{page}} من {{total}}</div>" },
"margin": "20mm"تظهر الأرقام بالأرقام الغربية. أعطِ التذييل أنماطه الخاصة داخل العنصر: فأنماط المستند الرئيسي لا تصل إليه.
رموز QR للفوترة الإلكترونية من هيئة الزكاة
تحمل الفواتير الضريبية المبسطة في المملكة رمز QR يتضمن اسم البائع ورقمه الضريبي والطابع الزمني والإجمالي وضريبة القيمة المضافة بصيغة TLV مرمّزة بـ Base64. أنشئ الصورة في تطبيقك وضمّنها بصيغة data:؛ وستضعها صحيفة تمامًا كما في شيفرة HTML.
<img src="data:image/png;base64,iVBORw0KGgo..." width="120" height="120" alt="ZATCA QR">تُنشئ مجموعة اختباراتنا رمزًا كهذا، وتُنشئ الفاتورة، ثم تقرأ الرمز من ملف PDF؛ فيطابق الأصل بتًا ببت. اجعل عرض الرمز 25 مم على الأقل لتقرأه الهواتف بسهولة من الورق.
قيد معروف: النص المشكول بالكامل في طبقة النص
مع كثافة الحركات (التشكيل)، يُرسم النص بشكل صحيح، لكن طبقة النص المخفية في ملف PDF، التي تُستخدم للبحث والنسخ، قد يفوتها الحرف الأخير من ذلك السطر. الصفحة المطبوعة لا تتأثر. فإن كان مستخدموك يبحثون داخل ملفات PDF، فتجنّب التشكيل الكامل في الحقول القابلة للبحث كالأسماء والأرقام.