{"id":"69803bd1-6f80-4e8b-ae04-8458bdd337d1","slug":"darajoukar-reveal-rtl","kind":"skill","name":"reveal-rtl","summary":"Right-to-left (Persian) support plugin for reveal.js","owner":"darajoukar","repoUrl":"https://github.com/darajoukar/reveal-rtl","license":"MIT","licenseTier":"permissive","trust":"community","stars":6,"match":null,"fewStars":false,"format":"skill","createdAt":"2026-10-24T04:37:41.000Z","addedAt":"2026-10-28T20:56:52.750Z","logoUrl":"https://avatars.githubusercontent.com/u/183307383?u=e3ff0de9676d224c994a0962c90539f632ff66de&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["browser-web","design-media"],"tags":["farsi","persian","presentation","reveal-js","revealjs-plugin","rtl","deck","html-css-javascript"],"runtime":"node","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-28T20:57:32.751Z","sample":false,"url":"https://conduits.dev/tools/darajoukar-reveal-rtl","language":"JavaScript","transports":["stdio"],"install":{"npm":"reveal-rtl"},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"
\n\n# reveal-rtl\n\n**Right-to-left presentations with [reveal.js](https://revealjs.com) 6 — Persian, Arabic and more**\n\n**ارائههای راستبهچپ با reveal.js** · عروض تقديمية من اليمين إلى اليسار مع reveal.js\n\n[](https://www.npmjs.com/package/reveal-rtl)\n[](https://github.com/darajoukar/reveal-rtl/actions/workflows/ci.yml)\n[](LICENSE)\n\n[**Website**](https://darajoukar.github.io/reveal-rtl/) · [**Live demo**](https://darajoukar.github.io/reveal-rtl/demo/) · [Markdown demo](https://darajoukar.github.io/reveal-rtl/demo/markdown.html) · [Gallery](https://darajoukar.github.io/reveal-rtl/gallery/) · [npm](https://www.npmjs.com/package/reveal-rtl)\n\n[English](#english) · [فارسی](#فارسی) · العربية\n\n\n\n\n\n
\n\n---\n\n## Quick start\n\nStart a new presentation in one command (one `index.html`, slides in Markdown):\n\n```bash\nnpm create reveal-rtl my-talk # Persian; add -- --lang ar or -- --lang en\nnpm create reveal-rtl my-defense -- --template thesis # thesis defense outline\nnpm create reveal-rtl lesson-3 -- --template class # lecture outline\n```\n\nAdd to an existing project:\n\n```bash\nnpm install reveal.js reveal-rtl\n```\n\nOr straight from a CDN — no build step, works from `file://`:\n\n```html\n\n\n\n\n\n
\n
سلام دنیا
\n
\n\n\n\n\n\n\n```\n\nWith a bundler / ES modules:\n\n```js\nimport Reveal from 'reveal.js';\nimport RevealNotes from 'reveal.js/plugin/notes';\nimport RevealRTL from 'reveal-rtl';\nimport RevealRTLUI from 'reveal-rtl/ui';\nimport 'reveal.js/reveal.css';\nimport 'reveal-rtl/rtl.css';\nimport 'reveal-rtl/ui.css';\n\nReveal.initialize({ plugins: [ RevealNotes, RevealRTL(), RevealRTLUI() ] });\n```\n\n`RevealRTLUI` (toolbar, slide list, exports) and `ui.css` are optional.\n\n---\n\n\n\n## English\n\n### Two plugins\n\n| Plugin | File | What it does |\n|---|---|---|\n| **RevealRTL** | `plugin/rtl.js` + `core/rtl.css` | Right-to-left layout and typography, localized digits, Jalali dates, localized help, notes and speaker view |\n| **RevealRTLUI** | `plugin/ui.js` + `core/ui.css` | Toolbar, searchable slide list, timer, drawing tools, zoom, themes, exports |\n\n### RevealRTL features\n\n- Turns on reveal.js `rtl` mode before the first render (direction, arrow keys, swipe, progress bar)\n- Fixes what reveal.js themes leave left-to-right: list indentation, table alignment, the forced `sans-serif` font, letter spacing\n- **Vazirmatn bundled** (variable font, OFL) — works offline, no Google Fonts; change with `--rtl-font`\n- **Localized digits** in slide text, slide number (every format: `h.v`, `h/v`, `c`, `c/t`), PDF page numbers and ordered lists — Persian `۱۲۳`, Arabic `١٢٣` or Latin\n- Code, `pre`, `dir=\"ltr\"` and `.latin-digits` content stays left-to-right with Latin digits; Persian/Arabic text inside code still joins correctly\n- **Jalali dates**: `` (today) or ``; **Hijri (lunar) dates** with ``, in the UI language\n- Localized, RTL **keyboard help** (`?`), **on-slide notes** and **speaker view** (`S`, mirrored layout)\n- **Jump to slide** (`G`) accepts Persian/Arabic digits\n- Tested on all 14 reveal.js themes plus the two bundled ones\n\n### RevealRTLUI features\n\n- **Slide list** with search (`M`) — matches Arabic/Persian letter variants and digits; hover shows a slide preview\n- First / last slide, **grid view** (overview)\n- **Timer** that survives a page refresh; click it to set a length and it **counts down**, turning yellow near the end and red (negative) when over\n- **Laser pointer** (`Z`), **pen** (`D`) and **erase** (`E`); drawings are kept per slide, saved across reloads and included in the PDF export\n- Zoom in / out / reset, **theme switcher** (remembered), clock\n- Notes on the slide, speaker view button, fullscreen\n- **Export**: PDF (print view), **PNG image of the current slide with your pen drawing**, JSON, Markdown (reveal.js format, `Note:` for notes), HTML, **offline single-file HTML** (CSS, scripts, fonts, images and slide backgrounds inlined) and speaker notes as text\n- Hide / show the toolbar (`T`); compact one-row layout on phones\n\n### Options\n\n`rtlOptions` (shared by both plugins):\n\n| Option | Default | Description |\n|---|---|---|\n| `lang` | `'fa'` | Language of all built-in labels: `'fa'`, `'ar'`, `'en'` |\n| `digits` | by language | `'persian'`, `'arabic'`, `'latin'`; `true` = language default, `false` = Latin |\n| `labels` | — | Override single labels, e.g. `{ first: 'آغاز' }` (keys in [`core/i18n.js`](core/i18n.js)) |\n\n`uiOptions`:\n\n| Option | Default | Description |\n|---|---|---|\n| `themes` | `[]` | Theme menu entries: `{ name, href }` |\n| `themeLink` | `'#theme'` | Selector of the theme `` to swap |\n| `duration` | `totalTime` / none | Presentation length in minutes; the timer counts down |\n| `warnAt` | 5 (or 20% of a short talk) | Minutes left when the timer turns yellow |\n| `idle` | `3000` | Milliseconds without mouse movement before the toolbar fades |\n| `digits` | `rtlOptions.digits` | Digit style for the toolbar only |\n\n### Keyboard\n\n| Key | Action | Key | Action |\n|---|---|---|---|\n| `←` / `→` | Next / previous slide (RTL) | `M` | Slide list |\n| `Esc` / `O` | Grid view | `T` | Hide / show toolbar |\n| `G` | Jump to slide | `Z` | Laser pointer |\n| `S` | Speaker view | `D` | Pen |\n| `F` | Fullscreen | `E` | Erase this slide's drawing |\n| `B` / `.` | Pause (black screen) | `?` | Keyboard help |\n\n### Themes\n\nTwo themes built from the reveal.js theme template, tuned for Persian/Arabic: `themes/parsi-light.css` and `themes/parsi-dark.css`. Use them in place of a reveal.js theme. All 14 reveal.js themes work too.\n\n### Images, backgrounds and icons\n\nUse reveal.js's own features; see [`demo/media.html`](https://darajoukar.github.io/reveal-rtl/demo/media.html):\n\n```html\n…\n…\n\n
\n
متن
\n \n
\n \n\n \n```\n\n- `data-background-opacity` keeps text readable on photos. In Markdown: ``.\n- **`rtl-mirror`** (from `core/rtl.css`) flips directional icons/images — arrows, \"next\", \"back\" — in RTL decks only. Don't use it on clocks, logos or text.\n- Inline SVG with `fill=\"currentColor\"` follows the theme color.\n- The **offline HTML** export embeds `` (including `data-src`) and slide background images; background videos and iframes stay as links.\n- **Image of this slide (PNG)** in the export menu saves the slide exactly as shown — theme, background and pen drawing — using the browser's screen capture (desktop browsers; choose this tab when asked).\n\n### Writing slides in Markdown\n\nUse reveal.js's markdown plugin and list it before `RevealRTL()`; see [`demo/markdown.html`](demo/markdown.html):\n\n```html\n\n \n\n```\n\n### Phones\n\nBelow 435px reveal.js 6 switches to a vertical scroll view; set `scrollActivationWidth: null` to keep swiping slide by slide.\n\n### Use with Claude (Agent Skill)\n\nThe repo ships an Agent Skill, **`rtl-slides`**, that teaches Claude to build reveal-rtl presentations — correct Persian typography, speaker notes, the text check — from a request like «یک ارائهی فارسی دربارهی … بساز».\n\n- **Claude Code** (2.1.275+):\n ```\n /plugin install reveal-rtl --marketplace darajoukar/reveal-rtl\n ```\n or in two steps: `/plugin marketplace add darajoukar/reveal-rtl`, then `/plugin install reveal-rtl@reveal-rtl`.\n- **claude.ai** (web/desktop): download [`rtl-slides-skill.zip`](https://github.com/darajoukar/reveal-rtl/releases/latest/download/rtl-slides-skill.zip) and upload it under Settings → Capabilities → Skills.\n- **By hand**: copy [`plugins/reveal-rtl/skills/rtl-slides`](plugins/reveal-rtl/skills/rtl-slides) into `~/.claude/skills/`.\n\n### Persian text checker\n\n```bash\nnpx reveal-rtl-lint slides/ # files or folders; .html and .md\n```\n\nReports Arabic `ي`/`ك` instead of Persian `ی`/`ک`, a space where a zero-width non-joiner belongs (`می رود` → `میرود`, `کتاب ها` → `کتابها`), numbers mixing digit sets (`۱4`) and Arabic-Indic digits in Persian text. It only reports — nothing is changed — and exits with code 1 when it finds something (handy in CI). Code, elements with another `lang` (e.g. `lang=\"ar\"`) and text between `` and `` are skipped.\n\n### Development\n\n```bash\nnpm install\nnpm run build # dist/ bundles and themes/ (commit both)\nnpm test # unit tests\nnpm run test:e2e # Playwright browser tests (desktop + mobile)\nnpm run lint:text # Persian text check of the demos and docs\nnpm run demo # serve the repo at http://localhost:3000/demo/\n```\n\nIf Playwright's Chromium download is unavailable, use an installed browser: `PW_CHANNEL=msedge npm run test:e2e`. CI fails if `dist/` or `themes/` is out of date.\n\n---\n\n\n\n## فارسی\n\n
\n\n**reveal-rtl** دو پلاگین برای ساخت ارائههای راستبهچپ با reveal.js 6 است؛ برای فارسی ساخته شده و عربی را هم پشتیبانی میکند.\n\n### نصب\n\n
\n\nیا بدون نصب، مستقیم از CDN — نمونهی کامل در بخش [Quick start](#quick-start) بالا. فایل HTML را میشود مستقیم با دابلکلیک باز کرد.\n\n### پلاگین RevealRTL\n\n- فعال شدن حالت `rtl` در reveal.js پیش از اولین نمایش (جهت، کلیدها، کشیدن انگشت، نوار پیشرفت)\n- اصلاح تورفتگی فهرستها، تراز جدولها و فونت در تمهای reveal.js\n- **فونت وزیرمتن داخل پکیج**؛ بدون اینترنت و بدون Google Fonts (قابل تغییر با `--rtl-font`)\n- **اعداد فارسی** در متن اسلاید، شمارهی اسلاید (همهی قالبها)، شمارهی صفحههای PDF و فهرست شمارهدار؛ یا اعداد عربی یا لاتین\n- کد و متنهای `dir=\"ltr\"` چپبهراست و با اعداد لاتین میمانند؛ متن فارسی داخل کد هم درست و پیوسته نمایش داده میشود\n- **تاریخ شمسی** با `` و **تاریخ قمری** با ``\n- **راهنمای کلیدها** (`?`)، **یادداشتها** و **پنجرهی سخنران** (`S`) فارسی و راستبهچپ\n- **رفتن به اسلاید** (`G`) با اعداد فارسی\n\n### پلاگین RevealRTLUI (نوار ابزار)\n\n- **فهرست اسلایدها** با جستجو (`M`) و پیشنمایش با بردن موس\n- اولین و آخرین اسلاید، **نمای شبکهای**\n- **تایمر** که با رفرش متوقف نمیشود؛ با کلیک روی آن مدت ارائه را بدهید تا **معکوس** بشمارد (زرد در دقایق آخر، قرمز و منفی بعد از پایان وقت)\n- **نشانگر لیزری** (`Z`)، **قلم** (`D`) و **پاک کردن** (`E`)؛ نوشتهها برای هر اسلاید جدا، بعد از رفرش هم میمانند و در خروجی PDF هم میآیند\n- بزرگنمایی و کوچکنمایی، **انتخاب تم**، ساعت، یادداشتها، پنجرهی سخنران، تمامصفحه\n- **خروجی**: PDF، JSON، Markdown، HTML، **HTML آفلاین تکفایلی** و یادداشتهای سخنران\n- پنهان و نمایش نوار ابزار (`T`)؛ نمای فشرده روی گوشی\n\n### تنظیمات\n\nگزینه `rtlOptions.lang` زبان برچسبها را تعیین میکند (`'fa'` پیشفرض، `'ar'`، `'en'`) و `rtlOptions.digits` نوع رقم را (`'persian'`، `'arabic'`، `'latin'`). جدول کامل تنظیمات و کلیدها در [بخش انگلیسی](#english) است.\n\n### تمها\n\nدو تم مخصوص فارسی و عربی: **پارسی روشن** (`themes/parsi-light.css`) و **پارسی تیره** (`themes/parsi-dark.css`). همهی ۱۴ تم reveal.js هم کار میکنند.\n\n### عکس، پسزمینه و آیکن\n\nاز امکانات خود reveal.js استفاده کنید (نمونه در [`demo/media.html`](https://darajoukar.github.io/reveal-rtl/demo/media.html)):\n\n- **پسزمینهی اسلاید:** `data-background-image`، `data-background-color` و `data-background-gradient`؛ با `data-background-opacity` عکس کمرنگ میشود تا متن خوانا بماند.\n- **عکس و متن کنار هم:** کلاس `r-hstack`؛ در راستبهچپ اولین بخش سمت راست قرار میگیرد. `r-stretch` عکس را به اندازهی اسلاید بزرگ میکند.\n- **آیکن:** SVG با `fill=\"currentColor\"` رنگ تم را میگیرد. به آیکنهای جهتدار (فلش، بعدی، برگشت) کلاس **`rtl-mirror`** بدهید تا در ارائهی راستبهچپ قرینه شوند؛ ساعت و لوگو را قرینه نکنید.\n- خروجی **HTML آفلاین** عکسها و پسزمینههای اسلاید را هم داخل فایل قرار میدهد.\n- **تصویر این اسلاید (PNG)** در منوی خروجی، اسلاید را دقیقاً همانطور که میبینید ذخیره میکند، همراه با نوشتههای قلم (در مرورگر دسکتاپ؛ وقتی پرسید، همین تب را انتخاب کنید).\n\n### نوشتن با Markdown\n\nپلاگین markdown خود reveal.js را قبل از `RevealRTL()` بگذارید؛ نمونه در [`demo/markdown.html`](demo/markdown.html).\n\n### موبایل\n\nبرای اینکه روی گوشی اسلاید به اسلاید (با کشیدن انگشت) کار کند، `scrollActivationWidth: null` را تنظیم کنید.\n\n### شروع سریع\n\nبا یک دستور یک ارائهی آمادهی فارسی بسازید (یک فایل `index.html` با اسلایدهای Markdown):\n\n
\n\nقالب `thesis` اسلایدهای **دفاع پایاننامه** را آماده میکند (عنوان با استاد راهنما و مشاور، بیان مسئله، اهداف، پیشینه، روش، یافتهها، نتیجهگیری، منابع) و قالب `class` اسلایدهای **ارائهی کلاسی** را (اهداف جلسه، مفهوم، مثال، تمرین کلاسی، جمعبندی، تکلیف). فقط جاهای «…» را پر کنید. نمونههای پرشده در [گالری](https://darajoukar.github.io/reveal-rtl/gallery/) هستند.\n\n### استفاده با Claude\n\nاین ریپو یک Skill به اسم **`rtl-slides`** دارد که به Claude یاد میدهد ارائه را با reveal-rtl بسازد؛ با نیمفاصله و نگارش درست فارسی، یادداشت سخنران و بررسی متن. بعد از نصب کافی است بنویسید: «یک ارائهی فارسی دربارهی … بساز».\n\n- در **Claude Code:** دستور `/plugin install reveal-rtl --marketplace darajoukar/reveal-rtl`\n- در **claude.ai:** فایل [`rtl-slides-skill.zip`](https://github.com/darajoukar/reveal-rtl/releases/latest/download/rtl-slides-skill.zip) را دانلود کنید و در Settings → Capabilities → Skills آپلود کنید.\n\n### بررسی متن فارسی\n\n
\n\n```bash\nnpx reveal-rtl-lint slides/\n```\n\n
\n\n \nاین ابزار «ي» و «ك» عربی، فاصله بهجای نیمفاصله (مثل «می رود» و «کتاب ها»)، عددهایی که ارقام فارسی و لاتین را قاطی کردهاند (مثل «۱4») و ارقام عربی در متن فارسی را گزارش میکند. فقط هشدار میدهد و چیزی را تغییر نمیدهد. کد و بخشهایی با `lang=\"ar\"` بررسی نمیشوند.\n\n\n
\n\n---\n\n\n\n\n## العربية\n\n\n\nمشروع **reveal-rtl** يضمّ إضافتين لإنشاء عروض تقديمية من اليمين إلى اليسار باستخدام reveal.js 6، مع دعم كامل للعربية والفارسية.\n\n### التثبيت\n\n\n\n```bash\nnpm install reveal.js reveal-rtl\n```\n\n
\n\nأو مباشرةً من CDN دون تثبيت — المثال الكامل في قسم [Quick start](#quick-start) أعلاه. اضبط اللغة العربية هكذا:\n\n
\n\n```js\nReveal.initialize({\n rtlOptions: { lang: 'ar' }, // واجهة عربية وأرقام عربية ١٢٣\n plugins: [ RevealNotes, RevealRTL(), RevealRTLUI() ]\n});\n```\n\n
\n\n### إضافة RevealRTL\n\n- تفعيل وضع `rtl` في reveal.js قبل العرض الأول (الاتجاه، الأسهم، السحب، شريط التقدم)\n- إصلاح المسافات البادئة للقوائم ومحاذاة الجداول والخط في سمات reveal.js\n- **خط Vazirmatn مضمّن** يعمل دون اتصال بالإنترنت\n- **أرقام عربية** (أو فارسية أو لاتينية) في نص الشرائح ورقم الشريحة وصفحات PDF والقوائم المرقمة\n- الشيفرة والنصوص `dir=\"ltr\"` تبقى من اليسار إلى اليمين بأرقام لاتينية\n- **التاريخ الهجري** بوسم ``\n- **مساعدة لوحة المفاتيح** (`?`) و**الملاحظات** و**نافذة المتحدث** (`S`) بالعربية ومن اليمين إلى اليسار\n- **الانتقال إلى شريحة** (`G`) بالأرقام العربية\n\n### إضافة RevealRTLUI (شريط الأدوات)\n\n- **قائمة الشرائح** مع البحث (`M`) ومعاينة عند تمرير الفأرة\n- الشريحة الأولى والأخيرة، **العرض الشبكي**\n- **مؤقت** لا يتوقف عند إعادة التحميل؛ انقر عليه لتحديد المدة فيعدّ **تنازليًا** (أصفر قرب النهاية، أحمر وسالب بعد انتهاء الوقت)\n- **مؤشر ليزر** (`Z`) و**قلم** (`D`) و**مسح** (`E`)؛ الكتابة محفوظة لكل شريحة بعد إعادة التحميل وتظهر في تصدير PDF\n- التكبير والتصغير، **اختيار السمة**، الساعة، الملاحظات، نافذة المتحدث، ملء الشاشة\n- **التصدير**: PDF وJSON وMarkdown وHTML و**HTML دون اتصال في ملف واحد** وملاحظات المتحدث\n- إخفاء شريط الأدوات وإظهاره (`T`)؛ تخطيط مضغوط على الهاتف\n\n
\n\n### الخيارات\n\nالخيار `rtlOptions.lang` يحدد لغة الواجهة (`'fa'` أو `'ar'` أو `'en'`) و`rtlOptions.digits` نوع الأرقام (`'persian'` أو `'arabic'` أو `'latin'`). الجداول الكاملة للخيارات والمفاتيح في [القسم الإنجليزي](#english).\n\n
\n\n### الاستخدام مع Claude\n\nمهارة **`rtl-slides`** تعلّم Claude إنشاء عروض reveal-rtl. في Claude Code: `/plugin install reveal-rtl --marketplace darajoukar/reveal-rtl`؛ وفي claude.ai ارفع الملف [`rtl-slides-skill.zip`](https://github.com/darajoukar/reveal-rtl/releases/latest/download/rtl-slides-skill.zip) من Settings → Capabilities → Skills.\n\n### الصور والخلفيات والأيقونات\n\n- **خلفية الشريحة:** `data-background-image` و`data-background-gradient`، مع `data-background-opacity` لإبقاء النص مقروءًا.\n- **صورة ونص جنبًا إلى جنب:** الصنف `r-hstack`؛ في الاتجاه من اليمين إلى اليسار يكون العنصر الأول على اليمين.\n- **الأيقونات:** أضف الصنف **`rtl-mirror`** إلى الأيقونات الاتجاهية (الأسهم، التالي، الرجوع) لتنعكس تلقائيًا.\n- **صورة هذه الشريحة (PNG)** في قائمة التصدير تحفظ الشريحة كما تظهر مع كتابة القلم.\n\n### الهاتف\n\nلكي يعمل العرض شريحةً بشريحة بالسحب على الهاتف، اضبط `scrollActivationWidth: null`.\n\n### بداية سريعة\n\nأنشئ عرضًا جاهزًا بالعربية بأمر واحد:\n\n
![\"reveal-rtl](\"https://raw.githubusercontent.com/darajoukar/reveal-rtl/main/docs/demo.gif\")
\n\n![\"reveal-rtl](\"https://raw.githubusercontent.com/darajoukar/reveal-rtl/main/docs/screenshot-light.png\")
![\"reveal-rtl](\"https://raw.githubusercontent.com/darajoukar/reveal-rtl/main/docs/screenshot-dark.png\")
\n\n![\"…\"](\"images/chart.svg\")
\n![\"…\"](\"images/big.jpg\")
\n\n \n```\n\n- `data-background-opacity` keeps text readable on photos. In Markdown: ``.\n- **`rtl-mirror`** (from `core/rtl.css`) flips directional icons/images — arrows, \"next\", \"back\" — in RTL decks only. Don't use it on clocks, logos or text.\n- Inline SVG with `fill=\"currentColor\"` follows the theme color.\n- The **offline HTML** export embeds `