Sabaat IT Solution

Subtitle Overlay

Export
v1.4

How to Use

Quick Start

  1. Import subtitles using TXT, SRT, or VTT button, or drag & drop a file
  2. Click LOAD to process the text into slides
  3. Click OUTPUT to open the chroma key window
  4. Position output window on your capture screen
  5. Use arrow keys or buttons to navigate subtitles

Keyboard Shortcuts

← ↑ Previous
→ ↓ Next
Home First
End Last
PgUp Skip 5 back
PgDn Skip 5 forward
Space Toggle visibility (hides text, keeps box)
Esc Close modals / Clear
Ctrl+F Focus search
Ctrl+Z Undo settings
Ctrl+Y Redo settings
Ctrl+1/2/3 Chroma key

Settings Tabs

  • Style: Font, size, alignment, colors, spacing, Google Fonts
  • Effects: Shadow, outline, glow
  • Output: Chroma key, position, RTL, remote control, OBS source
  • Overlays: Image and text overlays

Labels

Add optional markers to each slide (e.g., ayah number, verse, paragraph). Use # Label for the current slide, 123 Auto to auto-number all slides with a custom prefix.

Customize label appearance in Settings > Output > Label Style: position (6 positions), font size, weight, color, background color & opacity, padding.

Sessions & Presets

  • Style Presets: Save your current style, load or rename saved presets
  • Sessions: Save everything (text + settings) in-project or as JSON file
  • Rename: Click the pencil icon to rename saved sessions/presets
  • Export: PNG images and SRT files via the export icon in the header

Pins

Pin slides for quick access. Click the dot next to any slide number to pin/unpin it. Pinned slides appear in a section above the slide list for fast jumping.

Arabic/Quran Support

  • Auto RTL: Detects Arabic text automatically
  • Auto Font: Switches to Amiri Quran for Arabic
  • Verses: Highlights verse markers like (1) or ﴿١﴾
  • Save Preset: Save your Arabic style as a preset for quick reuse

Video Production

  • Output Window: Chroma key background for ATEM/OBS/vMix keying
  • Visibility Toggle: Hides text only, box stays visible; syncs to output window
  • OBS Browser Source: Use OBS Source URL button for a transparent overlay
  • Remote Control: Open a touch-friendly popup to control from another screen

Sessions & Presets

Style Presets
Sessions (text + all settings)

Version History

v1.4 Current

  • Improved visibility toggle: box stays visible when hidden (text only hides)
  • Output window syncs visibility state (box preserved when hidden)
  • No subtitles + hidden: box hides completely in both preview and output

v1.3

  • Pin slides with colors for quick navigation
  • Pinned slides section with jump-to functionality
  • In-project sessions: save, rename, load without files
  • In-project presets: save, rename, load without files
  • Redesigned Sessions & Presets popup
  • Export (PNG/SRT) moved to header icon
  • Settings button redesigned for visibility

v1.2

  • Subtitle labels/markers (ayah, verse, paragraph numbers)
  • Auto-number labels with custom prefix
  • Save/restore complete sessions as JSON files
  • Undo/redo for settings (Ctrl+Z / Ctrl+Y)
  • Google Fonts integration (search, preview, apply)
  • Remote Control window (touch-friendly popup)
  • OBS Browser Source mode (transparent overlay via ?obs=1)
  • Copy OBS Source URL button

v1.1

  • Fixed PNG export to match preview/output exactly
  • Fixed output window font sync
  • Built-in presets (Quran, Movie, News, Karaoke, Minimal)
  • Export/import settings presets as JSON
  • Drag & drop file import (TXT, SRT, VTT)
  • VTT subtitle file support
  • Visibility toggle button
  • Reset settings button
  • Version history modal

v1.0 Initial Release

  • Search in slides with live filtering and highlighting
  • Custom position fine-tuning with X/Y offset sliders
  • Saveable position presets
  • Export slides as PNG images (1920x1080)
  • Export as SRT file with timing
  • Export progress bar
  • Complete UI redesign with tabs
  • Responsive layout for all devices
  • Words/Slide control with Regenerate
  • Multiple Arabic fonts support
  • Chroma key system (green, magenta, blue, custom)
  • Text effects: shadow, outline, glow
  • RTL auto-detection and Quran verse markers
  • Output window with real-time sync
  • Keyboard shortcuts for navigation
  • Settings persistence via localStorage
  • Overlay images and text support

Settings

Font
48px
Layout
2
20
1.4
0px
0px
20px
90%
Off
70%
Colors
Shadow
2px
2px
4px
Outline
Glow
Chroma Key
Position
Fine Tune
0%
0%
Saved Presets
RTL & Arabic
Waiting for text...
Label Style
18px
600
5px
#ffc107
#000000
60%
0px
0px
Output Window
Images
Text Overlays
Live Preview
1920 x 1080
Preview Text
0 / 0
SUBTITLES 0 items
No subtitles loaded