Customs authorization form are filled manually, which is repetitive and error-prone. The technical challenge was Arabic text support inside PDFs, most available libraries produce reversed or disconnected characters.
Instead of writing Arabic text directly into the PDF (which breaks), the tool renders each field onto a hidden HTML Canvas, converts it to a transparent PNG, then overlays it onto the original PDF at the exact coordinates.
The browser handles Arabic shaping natively no external libraries needed.
Coordinate mismatch: The original coordinates were measured at 842pt width, while the actual A4 PDF is 595pt wide. Solved with an auto-scaling factor (≈ 0.707) and Y-axis inversion.
Auto font-sizing: If the text is too long for a field, the font size shrinks automatically to fit without clipping.
`HTML5 Canvas` `pdf-lib` `Vanilla JS` `CSS3`
يتم ملء نموذج التفويض الجمركي يدويًا، وهو أمر متكرر وعرضة للأخطاء. وكان التحدي التقني هو دعم النصوص العربية داخل ملفات PDF حيث تنتج معظم المكتبات المتاحة أحرفًا معكوسة أو غير متصلة.
بدلاً من كتابة النص العربي مباشرةً في ملف PDF (مما يؤدي إلى تلفه)، تقوم الأداة بعرض كل حقل على لوحة HTML مخفية، وتحويله إلى صورة PNG شفافة، ثم تضعها فوق ملف PDF الأصلي عند الإحداثيات الدقيقة.
يتعامل المتصفح مع تشكيل الحروف العربية بشكل أصلي دون الحاجة إلى مكتبات خارجية.
عدم تطابق الإحداثيات: تم قياس الإحداثيات الأصلية بعرض 842 نقطة، في حين أن ملف PDF A4 الفعلي يبلغ عرضه 595 نقطة. تم حل المشكلة باستخدام معامل تحجيم تلقائي (≈ 0.707) وعكس المحور Y.
تحجيم الخط التلقائي: إذا كان النص طويلاً جدًا بالنسبة لحقل ما، فإن حجم الخط يتقلص تلقائيًا ليتناسب مع الحقل دون قص.

_page-00012026104015.jpg)