الزير سالم

Adding An Image

<section data-background-image="salem.jpeg" data-background-size="1000px">
</section>

Could have started with some YAML, e.g.

---
title: الزير سالم
date: June 21, 2017
---

if you ignore the front matter like I did here you need to specify metadata:

pandoc -t revealjs -s -o p3.html p3.md -V revealjs-url=./reveal.js -V theme=black -V transition=fade --metadata pagetitle="zir"

./revealjs is a subfolder from where this webpage exists

التحكم بالنص العربي ليس سهلا

خذ مثلًا النص التالي:

المادة التاسعة:

أي زواج يتبين لدى الجهة المختصة مخالفته للأحكام السابقة يترتب عليه ما يلي

  1. محاكمة المتزوج تأديبيًا لدى ديون المظالم
  2. عدم توثيق الزواج من قبل الجهات المختصة السعودية
  3. عدم السماح بدخول الزوجة أو الزوج الأجنبي إلى المملكة وإنهاء إقامتهما إذا كانا مقيمين داخل المملكة

ذلك بما عصوا و كانوا يعتدون

و هنا الكود الذي ولد النص السابق

<p dir="rtl" lang="ar" style="color:#ff0000;font-size:20px;">التحكم بالنص العربي ليس سهلا</p>
<p dir="rtl" lang="ar" style="color:#ff0000;font-size:20px;">خذ مثلًا التالي:</p>
<h4 dir="rtl" lang="ar" style="color:#ff0000;">المادة التاسعة:</h4>
<p dir="rtl" lang="ar" style="color:#ff0000;font-size:20px;">
أي زواج يتبين لدى الجهة المختصة مخالفته للأحكام السابقة يترتب عليه ما يلي
</p>
<ol lang="ar" style="list-style-type:arabic-indic ;direction:RTL; text-align: right; color:#ff0000;font-size:20px;">
<li>محاكمة المتزوج تأديبيًا لدى ديون المظالم</li>
<li>عدم توثيق الزواج من قبل الجهات المختصة السعودية</li>
<li>عدم السماح بدخول الزوجة أو الزوج الأجنبي إلى المملكة وإنهاء إقامتهما إذا كانا مقيمين داخل المملكة </li>
</ol>
<p dir="rtl" lang="ar" style="color:#ff0000;font-size:20px;">
ذلك بما عصوا و كانوا يعتدون
</p>

مرة أخرى:

هل يجوز هذا يا شيخ؟ أم أنه ظلم؟

و شكرًا 

<p style="direction:rtl;lang:ar;color:#ff0000;font-size:20px;">
مرة أخرى:</p>
<p style="direction:rtl;lang:ar;color:#ff0000;font-size:20px;">هل يجوز هذا يا شيخ؟ أم أنه ظلم؟</p>
<p style="direction:rtl;lang:ar;color:#ff0000;font-size:20px;">و شكرًا</p>

The presentation markup hierarchy needs to be .reveal > .slides > section where the section represents one slide and can be repeated indefinitely. If you place multiple section elements inside of another section they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. --Hakim Hattab

Let's see this in action..

Down arrow

المادة التاسعة:

أي زواج يتبين لدى الجهة المختصة مخالفته للأحكام السابقة يترتب عليه ما يلي



  1. محاكمة المتزوج تأديبيًا لدى ديوان المظالم

  1. عدم توثيق الزواج من قبل الجهات المختصة السعودية

  1. عدم السماح بدخول الزوجة أو الزوج الأجنبي إلى المملكة وإنهاء إقامتهما إذا كانا مقيمين داخل المملكة 

<h4 dir="rtl" lang="ar" style="color:#ff0000;">المادة التاسعة:</h4>
<p dir="rtl" lang="ar" style="color:#ff0000;font-size:20px;">
أي زواج يتبين لدى الجهة المختصة مخالفته للأحكام السابقة يترتب عليه ما يلي
</p>
<section data-transition="slide">1</section>
<section data-transition="slide">2</section>
<section data-transition="slide">3</section>

Down arrow
يقول الزير أبو ليلى المهلهل

و قلب الزير قاسي ما يلينا ..

و ان لان الحديد ما لان قلبي ..

و ان لان..

الحديد..

ما لان قلبي!

Transitions

<section data-transition="slide">
يقول الزير أبو ليلى المهلهل
</section>
<section data-transition="slide">
و قلب الزير قاسي ما يلينا ..
</section>
<section data-transition="slide-in fade-out">
و ان لان الحديد ما لان قلبي ..
</section>

و سلامتكم