وداعاً Print to PDF: آخر خطوة في أي deck

بطّلت أطبع PDF بإيدي في يونيو. مش عشان Cmd+P صعب. عشان لمدة سنة تقريباً كنت باعت للناس ملف مش هو اللي أنا عملته، وماكنتش بلاحظ غير لما حد يفتحه قدامي.

الـ deck كان شكله مظبوط في المتصفح. والـ PDF اللي بيوصل يبقى فيه خط تاني، وجدول مقارنة بتلات أعمدة اتلمّ في عمود واحد وراء بعضه، ونص صفحة فاضية بيضا مكان قسم اتزق لقدام. كنت بصلّح كل واحدة فيهم بإيدي، كل مرة، وكأنها حادثة جديدة.

مكانتش حادثة جديدة. دي أربع مشاكل، وهما نفس الأربعة كل مرة، ولكل واحدة فيهم سبب واحد.

الأربعة

الخط مش خطك. Chrome بيبدأ يطبع قبل ما الـ web font يخلّص تحميل، فبيقع على sans عادي. الخط بتاع البراند مكتوب في الـ CSS ومش موجود في الملف.

الأعمدة بتتلم. الـ print viewport بتاع Chrome ضيّق. فأي @media (max-width:760px) كتبته عشان الموبايل بيشتغل وانت بتطبع، وكل grid فيه أكتر من عمود بيتلم في عمود واحد.

الكلام بيطلع تقيل أو مكسّر. Chrome بيحط الحروف كـ Type 3 fonts. على الشاشة تمام. في Preview وAcrobat بيطلع تخين ومدهون، وده بيحصل حتى لو الخط الصح نزل.

فراغات بيضا بتفتح بين الصفحات. بلوك طويل مش لاقي مساحة تكفيه في آخر الصفحة بيتنطّ كله للصفحة اللي بعدها، ويسيب الباقي فاضي.

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

اختار الـ mode قبل ما تلمس أي حاجة

دي القرار اللي بيطلّع أوحش ناتج لما يتاخد غلط، وبياخد ثانيتين.

الـ deck سلايدز ١٦:٩ ثابتة، كل واحدة ملء الشاشة. السلايد بتبقى صفحة، بالعافية، على ١٢٨٠×٧٢٠.

الـ document عرض سعر أو تقرير أو ورقة واحدة: صفحة طويلة من الأقسام. المحتوى لازم يمشي ويملى الصفحات.

اعكس الاتنين وهتاخد الفراغات. الغريزة مع المستند إنك تحافظ على كل قسم كامل، فبتكتب page-break-inside: avoid على القسم، وقسم طويل مش لاقي مكان بيتنطّ ويسيب نص صفحة بيضا. القاعدة عكس كده بالظبط: سيب الأقسام تمشي عبر الصفحات، واحمي بس البلوكات الصغيرة، card أو صف في جدول أو callout، عشان دول ما ينقسموش من النص.

الطريقة، للاتنين

خطوتين. التانية شكلها غلط لحد ما تجربها.

واحد. اطبع بـ Chrome headless بدل نافذة الطباعة. اديله وقت افتراضي طويل عشان الخط يوصل فعلاً، وprofile لوحده عشان ما يتخانقش مع الـ Chrome المفتوح عندك.

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new --disable-gpu --no-pdf-header-footer --no-margins \
  --virtual-time-budget=20000 \
  --user-data-dir=/tmp/chrome-pdf-export \
  --print-to-pdf="/abs/path/out.pdf" \
  "file:///abs/path/source.html"

مقاس الورق مش flag. بييجي من @page { size: A4 } في الـ CSS بتاعك. A4 للمنطقة وأوروبا، وletter لأمريكا.

اتنين. حوّله لصور. كل صفحة تبقى صورة بدقة عالية، وبعدين تبني الملف من الصور دي.

pdftoppm -png -r 200 out.pdf page
img2pdf $(ls page-*.png | sort) --pagesize A4 -o final.pdf

الكلام ده شكله تخريب. الملف الجديد مفيهوش خطوط خالص، فمفيش حاجة فاضلة تتعرض بشكل مختلف. بيبقى نفس الشكل في Preview وفي Acrobat وفي المتصفح وعلى الموبايل وعلى جهاز عمره ما سمع بالخط بتاعك. ومشكلة الـ Type 3 مستحيل تحصل لأن مفيش خطوط أصلاً تبقى Type 3.

والثمن حقيقي: الكلام مبقاش قابل للتحديد أو النسخ. لـ deck أو مستند رايح لعميل، ده سعر عادل. ولو محتاج نسخ الكلام، اتخطى خطوة التحويل لصور وحط الخط جوه الـ HTML كـ base64 data URI. هتحتفظ بالنسخ، وهتحتفظ بشوية من الخطورة.

وبعدين اتأكد، وده أمر واحد:

pdffonts final.pdf     # لازم ما يطلّعش أي خطوط، سطر العنوان بس

لو طلّعلك ليستة خطوط، يبقى الخطوة التانية مااتنفذتش.

تركّبه إزاي في Claude

الـ skill فولدر جواه ملف اسمه SKILL.md. مش محتاج terminal ولا clone.

من صفحة الريبو، دوس زرار Code الأخضر واختار Download ZIP. وفي Claude، افتح Settings، روح على Capabilities، وضيف الـ ZIP كـ skill. خلاص، ده التركيب.

وبعد كده مش هتناديه. هتقول «حوّل الـ HTML ده لـ PDF» وهو يقرا الملف ويختار الـ mode لوحده.

تركّبه إزاي في ChatGPT

نفس الفولدر، باب تاني. من الـ sidebar روح على Plugins، افتح تاب Skills، اختار Create، وبعدين Upload from your computer، واديله الفولدر بعد ما تفكّ الضغط.

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

لازم يكون على جهازك إيه

تلات حاجات، وأولهم غالباً موجود عندك أصلاً.

Google Chrome، بيتستخدم headless. وpoppler لأدوات الصفحات، brew install poppler. وimg2pdf، بـ pip install img2pdf.

ده كله بيشتغل على جهازك انت، والشرط ده يستاهل يتقال بصوت عالي: الشغل ده على الكمبيوتر، مش حاجة تعملها من الموبايل.

ده بيقع فين

دي الخطوة الخامسة في سلسلة كتبت عنها لما قفلت Canva: ملف براند الـ AI بيقراه الأول، وdecks بتاعتك تعلّمه انت بتبني حجّتك إزاي، وskill بيبني بالـ HTML، ومسحة humanizer، وبعدين دي.

الأربعة الأولانيين بيعملوا حاجة حلوة. ودي بتخليها تتبعت. الـ deck الجميل بالـ HTML وهو قاعد على اللابتوب بتاعك مش deliverable، ومحدش عايز لينك لملف مش قادر يفتحه من الموبايل وهو في التاكسي.

أنا مبقتش أحسن في التصدير. أنا بطّلت أعمله.