كيف تحوّل شرائح HTML إلى PPTX مع الحفاظ على التصميم؟

آخر تحديث: 2026-10-14 · فريق دورني

لتحويل شرائح HTML إلى PPTX دون فقدان التصميم، اجعل كل شريحة عنصراً ثابت الحجم بمقاس 1920x1080 بكسل، وحمّل خطوط الويب قبل الالتقاط، وتجنّب وحدات vw وvh داخل الشرائح، واجعل الحالة النهائية للحركة هي النمط الافتراضي، وضع ملاحظات المتحدث في عنصر aside بالفئة notes. عندها تتحوّل كل شريحة إلى صورة كاملة داخل ملف PowerPoint بنسبة 16:9.

لماذا تتعطّل شرائح HTML غالباً في PowerPoint؟

العرض التقديمي بصيغة HTML هو صفحة ويب تبدو كأنها شرائح. فهي تتكيّف مع حجم نافذة المتصفح، وتنتظر خطوطاً من شبكة CDN، وكثيراً ما تُظهر المحتوى بحركة عند النقر أو التمرير. أما PowerPoint فيعمل بالعكس: الشريحة مساحة ثابتة بمقاس 13.333 × 7.5 بوصة (التنسيق العريض 16:9)، وما يظهر عليها لحظة التصدير هو ما سيراه جمهورك.

التحويل إذن يعني تجميد صفحة متحرّكة وقابلة لتغيير الحجم في إطارات ثابتة. إذا كُتب العرض مع مراعاة ذلك، تأتي النتيجة مطابقة حتى البكسل. وإلا ستحصل على عناوين مقصوصة وخطوط بديلة ورسوم بيانية فارغة ونقاط عالقة في منتصف حركة الظهور. القواعد الخمس التالية هي ما يصنع الفرق، سواء كتبت العرض بنفسك أو استخدمت reveal.js أو طلبت من مساعد ذكاء اصطناعي إنشاءه ثم مرّرته عبر محوّلنا المجاني من HTML إلى PPTX.

القاعدة 1: ضع كل شريحة على مساحة ثابتة بمقاس 1920x1080

هذه أهم قاعدة. امنح كل شريحة الحجم الثابت نفسه بوحدات بكسل CSS، أي 1920x1080 (أو 1280x720 بالنسبة نفسها 16:9)، وأخفِ كل ما يتجاوز حدودها. المساحة الثابتة تبدو بالشكل نفسه في نافذة حاسوب محمول صغيرة وعلى شاشة 4K وداخل أداة التحويل.

.slide {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 120px 160px;
}

عنصر واحد واضح لكل شريحة

تبحث أدوات التحويل عن أنماط محدّدة. أداة تحويل HTML إلى PPTX تتعرّف على عروض reveal.js، والعناصر ذات الفئة slide، والأقسام بمقاس 1920x1080 أو 1280x720، وفواصل الصفحات في CSS. كل شريحة يتم التعرّف عليها تصبح شريحة PowerPoint واحدة بالضبط. وفي غياب هذه الإشارات تُعامَل الصفحة كمستند طويل وتُقسَّم إلى صفحات، وهذا نادراً ما يناسب عرضاً تقديمياً.

وإن أردت أن يناسب العرض شاشة صغيرة عند فتح ملف HTML مباشرة، فصغّر المساحة كلها بتحويل CSS عبر سكربت قصير بدلاً من جعل الشريحة مرنة. تحتفظ الشريحة بتخطيطها 1920x1080، ويُصغَّر العرض على الشاشة فقط.

القاعدة 2: تأكّد من تحميل الخطوط قبل الالتقاط

الشريحة المصمَّمة بخط Inter أو Poppins والملتقطة بخط Arial تبدو خاطئة فوراً: تنكسر الأسطر في أماكن مختلفة، وتتجاوز العناوين حدودها، ويختلّ المحاذاة. تُحمَّل خطوط الويب بشكل غير متزامن، لذا فالالتقاط المبكر يستخدم الخط البديل.

• حمّل Google Fonts بوسم link داخل head مع تلميحات preconnect، بدلاً من ‎@import في آخر ملف الأنماط.
• أبقِ display=swap في الرابط حتى لا يختفي النص أثناء تحميل الخط.
• للخطوط المستضافة لديك، استخدم مسارات نسبية واحفظ الملفات بجانب ملف HTML، ثم ضع الكل في ملف ‎.zip ليتمكّن المحوّل من حلّ المسارات.
• اختر خطوطاً بديلة قريبة في العرض (مثلاً Inter ثم system-ui ثم sans-serif) للحدّ من الضرر إذا فشل تحميل خط.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

انتظر الخطوط في سكربتاتك

ينتظر محوّلنا خطوط المستند وصوره قبل الالتقاط، ويمكنك إضافة بضع ثوانٍ من الانتظار للصفحات التي تُبنى بالسكربتات. وإذا كان عرضك يقيس النص بلغة JavaScript (لملاءمة العناوين مثلاً)، فشغّل تلك الشيفرة بعد اكتمال document.fonts.ready.

document.fonts.ready.then(() => {
  document.body.classList.add('fonts-loaded');
});

القاعدة 3: لا وحدات مرتبطة بنافذة العرض داخل الشريحة

وحدات مثل vw وvh وvmin تربط الأحجام بنافذة المتصفح، فيُعاد تخطيط الشريحة كلما تغيّرت النافذة. ولحظة الالتقاط تكون النافذة هي نافذة المحوّل لا شاشتك، فقد يخرج عنوان بحجم 6vw أكبر أو أصغر بكثير مما صمّمت.

داخل المساحة الثابتة استخدم px (أو rem بحجم جذر ثابت) للنصوص والمسافات والمواضع. والدالة clamp()‎ ذات القيمة الوسطى بوحدة vw تعاني المشكلة نفسها: احتفظ بها للمواقع المتجاوبة لا للشرائح.

/* Fragile: depends on the browser window */
.slide h1 { font-size: 6vw; }
.slide .hero { height: 100vh; }

/* Stable: depends only on the 1920x1080 stage */
.slide h1 { font-size: 112px; }
.slide .hero { height: 100%; }

• شبكة مثل repeat(3, 1fr) لا مشكلة فيها، لأن عرض المساحة ثابت.
• استعلامات الوسائط التي تنتقل إلى عمود واحد تحت عرض معيّن فخّ حقيقي: فهي تستجيب للنافذة التي قد تكون أضيق من الشريحة.
• النسب المئوية مناسبة حين تشير إلى الشريحة نفسها (height: 100% من شريحة ارتفاعها 1080 بكسل)، لا إلى نافذة العرض.

القاعدة 4: لا حركات لحظة الالتقاط

حركات الظهور هي السبب الأكثر شيوعاً للشرائح الفارغة أو نصف الشفافة. فالمكتبات والعروض المولَّدة بالذكاء الاصطناعي كثيراً ما تبدأ العناصر بقيمة opacity 0 ثم تُظهرها عندما تصبح الشريحة نشطة أو تدخل مجال الرؤية. والالتقاط في اللحظة الخطأ يسجّل حالة البداية.

يجمّد محوّلنا حركات CSS وانتقالاتها عند حالتها النهائية، ويمرّر الصفحة كاملة ليظهر المحتوى المرتبط بالتمرير. وتجعل أنت ذلك موثوقاً حين تكتب الحركة بحيث تكون الحالة المرئية هي النمط العادي للعنصر، ولا يُحرَّك إلا إطار البداية:

/* The visible state is the default; only the "from" frame is animated */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
}
.slide .bullet { animation: rise 0.6s ease-out both; }

/* No motion when printing or for users who ask for less motion */
@media print, (prefers-reduced-motion: reduce) {
  .slide * { animation: none !important; transition: none !important; }
}

• تجنّب المحتوى الذي لا يظهر إلا حين تضيف JavaScript فئة بعد نقرة أو مؤقّت: إن لم تُضَف الفئة يبقى العنصر مخفياً.
• لن يعيد PowerPoint تشغيل حركات CSS. وإذا كان يجب أن تظهر النقاط خطوة بخطوة، فوزّعها على عدة شرائح.
• الرسوم البيانية: عطّل حركات Chart.js (الخيار animation: false) ليكتمل الرسم فور رسمه.

القاعدة 5: اكتب ملاحظات المتحدث في عنصر aside بالفئة notes

نشرت reveal.js اصطلاحاً بسيطاً: ملاحظات المتحدث توضع في عنصر aside بالفئة notes داخل الشريحة التي تخصّها. ويقرأ تصدير PPTX في محوّلنا هذه العناصر ويضع نصّها في ملاحظات PowerPoint للشريحة المطابقة، حيث تظهر في طريقة عرض المقدّم.

<section class="slide">
  <h2>Revenue grew 18% in Q3</h2>
  <p>Driven by repeat customers in two regions.</p>
  <aside class="notes">
    Mention the July pricing change. Source: finance dashboard, 30 Sept.
  </aside>
</section>

.slide .notes { display: none; }

لماذا تستحق الملاحظات هذا الجهد؟

خارج reveal.js يعرض المتصفح عنصر aside كأي عنصر آخر، لذا أخفِه بقاعدة CSS أعلاه. والملاحظات نصّ، فتبقى قابلة للتعديل في PowerPoint حتى لو كانت الشريحة صورة. لذلك فهي المكان المناسب لنقاط الحديث والمصادر والأرقام التي قد ترغب في تعديلها لاحقاً.

عرض بسيط يتحوّل بشكل نظيف

إليك عرضاً كاملاً من شريحتين يلتزم بالقواعد الخمس. احفظه باسم deck.html وافتحه في المتصفح: تظهر الشرائح مكدّسة عمودياً على الشاشة، وتتحوّل كل واحدة إلى شريحة PowerPoint واحدة بالضبط. كما يجعل قسم print خيارَ الطباعة / الحفظ بصيغة PDF في Chrome أو Edge ينتج صفحة 16:9 لكل شريحة مع الحفاظ على الخلفية الداكنة.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Q3 review</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
  * { box-sizing: border-box; margin: 0; }
  body { background: #e5e7eb; font-family: 'Inter', system-ui, sans-serif; }
  .slide {
    width: 1920px; height: 1080px; position: relative; overflow: hidden;
    padding: 120px 160px; margin: 0 auto 40px;
    background: #0f172a; color: #f8fafc;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .slide h1 { font-size: 112px; line-height: 1.05; }
  .slide h2 { font-size: 72px; margin-bottom: 48px; }
  .slide p, .slide li { font-size: 40px; line-height: 1.4; }
  .slide ul { padding-left: 48px; }
  .slide .notes { display: none; }
  @media print {
    @page { size: 1920px 1080px; margin: 0; }
    body { background: none; }
    .slide { margin: 0; break-after: page; }
  }
</style>
</head>
<body>
  <section class="slide">
    <h1>Q3 review</h1>
    <p>Sales team, October</p>
    <aside class="notes">Welcome everyone, 20 minutes plus questions.</aside>
  </section>
  <section class="slide">
    <h2>Three things to remember</h2>
    <ul>
      <li>Revenue up 18%</li>
      <li>Churn down to 3.1%</li>
      <li>Two new regions open</li>
    </ul>
    <aside class="notes">Pause after each point.</aside>
  </section>
</body>
</html>

PPTX أم PDF للعرض التقديمي؟

لنكن واضحين بشأن النتيجة. في ملف PPTX كل شريحة صورة كاملة، ولهذا تبدو مطابقة تماماً لملف HTML، لكن نص الشريحة غير قابل للتعديل. أما ملف PDF المُنتَج بمحرّك الطباعة في المتصفح فيحتفظ بنص قابل للتحديد والبحث، لكن دون ملاحظات المتحدث.

• تعدّل النص كثيراً؟ أعد بناء الشرائح الكثيفة بالنص في PowerPoint، واحتفظ بالصور المحوَّلة للرسوم البيانية والمخطّطات والرسومات.
• تشارك العرض للقراءة فقط؟ استخدم محوّل HTML إلى PDF أو اتبع دليلنا لتحويل HTML إلى PDF مجاناً.

تحويل العرض خطوة بخطوة

1. احفظ العرض في ملف ‎.html واحد، أو اضغطه في ملف zip مع صوره وملفات CSS والخطوط إن كان يستخدم مسارات نسبية.
2. افتح محوّل HTML إلى PPTX واسحب الملف أو الصق الشيفرة. لا يُرفع أي شيء: يتم التحويل داخل متصفحك، دون تسجيل ودون علامة مائية.
3. تأكّد أن المعاينة تُظهر عدد الشرائح المتوقَّع. إن لم يحدث ذلك، فغالباً لم تُعلَّم الشرائح كعناصر ‎.slide أو كأقسام ثابتة بنسبة 16:9.
4. إذا كان العرض يستخدم Tailwind عبر CDN أو Chart.js، فزِد مدة الانتظار بضع ثوانٍ لتكتمل الأنماط والرسوم البيانية.
5. نزّل ملف ‎.pptx وافتحه في PowerPoint وتحقّق من ملاحظاتك في طريقة عرض المقدّم.

حدّان يجب معرفتهما: الصور المحمّلة من مواقع أخرى لا ترسل ترويسات CORS قد تغيب عن ملف PPTX (ضعها في ملف zip بدلاً من ذلك)، وقد تظهر لوحات WebGL أو إطارات الفيديو فارغة.

إذا كان العرض من إنتاج مساعد ذكاء اصطناعي، فإن دليل تحويل Claude artifact إلى PowerPoint يشرح كيف تطلب هذه البنية من البداية، ويتناول دليل مشاكل تحويل HTML إلى PDF الخطوط والرسوم البيانية والخلفيات بتفصيل أكبر.