ShakeebJustify

Poetry Justification for Urdu / Nastaliq

A lightweight JavaScript library that automatically formats Urdu poetry into beautifully justified layouts. Supports classical poetic forms including Ghazal, Qat'a, Mukhammas, and Musaddas.

View on NPM GitHub

Installation

CDN (Recommended)

<script src="https://cdn.jsdelivr.net/npm/shakeeb-justify@1.0.9/dist/shakeeb-justify.min.js"></script>

The library runs automatically on page load. For dynamic content, call ShakeebJustify.apply()

Single Column

.sher

Standard ghazal layout — one line per row with automatic gap after every couplet (2 lines). Each line is fully justified for that classic printed poetry look.

HTML

<div class="sher">
ہم پہ ساقی کی عنایت سے جلے جاتے ہیں
یہ جو اَب تک کفِ افسوس ملے جاتے ہیں
یاد آ جاتی ہیں بے ساختہ باتیں ان کی
بے سبب ہونٹ تبسم میں ڈھلے جاتے ہیں
</div>
Result

غزل

شکیبؔ احمد

ہم پہ ساقی کی عنایت سے جلے جاتے ہیں یہ جو اَب تک کفِ افسوس ملے جاتے ہیں یاد آ جاتی ہیں بے ساختہ باتیں ان کی بے سبب ہونٹ تبسم میں ڈھلے جاتے ہیں وقتِ رخصت کی پس و پیش انہیں کیا معلوم دل رکا جاتا ہے جانے سے ولے جاتے ہیں رفتہ رفتہ دمِ آخیر بھی آ پہنچے گا رات دن وصل کے وعدوں پہ ٹلے جاتے ہیں جائیے کچھ نہیں کہتے، جو ہوا ہے سو ہوا سارے الزام مقدر کے گلے جاتے ہیں ضبطِ گریہ میں شکیبؔ آپ نے پایا ہے کمال ان کی گلیوں سے بھی چپ چاپ چلے جاتے ہیں

Two Columns

.sher2

Side-by-side layout — each couplet's two lines displayed in adjacent columns. Perfect for longer nazms and qasidas where horizontal space is available.

HTML

<div class="sher2">
اِک دن رسولِ پاک نے اصحاب سے کہا
دیں مال راہِ حق میں جو ہوں تم میں مالدار
...
</div>
Result

صدیق

علامہ اقبالؔ

اِک دن رسولِ پاک نے اصحاب سے کہا دیں مال راہِ حق میں جو ہوں تم میں مالدار ارشاد سن کے فرطِ طرب سے عمر اٹھے اس روز انکے پاس تھے درہم کئی ہزار دل میں یہ کہہ رہے تھے کہ صدیق سے ضرور بڑھ کر رکھے گا آج قدم میرا راہوار لائے غرض کہ مال رسولِ امیں کے پاس ایثار کی ہے دست نگر ابتدائے کار پوچھا حضور وسرورِ عالم نے ، اے عمر ! اے وہ کہ جوشِ حق سے ترے دل کو ہے قرار رکھا ہے کچھ عیال کی خاطر بھی تو نے کیا؟ مسلم ہے اپنے خویش و اقارب کا حق گذار

Musaddas

6-line stanzas

The musaddas is a 6-line poetic form, often used in elegies (marsiya). ShakeebJustify supports three layout variants for different visual effects.

Classic (4+2)

.musaddas

Gap after 4 lines, then 2 lines

<div class="musaddas">...</div>
اس قدر شوخ کہ اللہ سے بھی برہم ہے تھا جو مسجود ملائک یہ وہی آدم ہے عالم کیف ہے دانائے رموز کم ہے ہاں مگر عجز کے اسرار سے نامحرم ہے ناز ہے طاقت گفتار پہ انسانوں کو بات کرنے کا سلیقہ نہیں نادانوں کو

All 6 Together

.musaddas-6

Continuous flow, single unit — gap after 6 lines

<div class="musaddas-6">...</div>
اس قدر شوخ کہ اللہ سے بھی برہم ہے تھا جو مسجود ملائک یہ وہی آدم ہے عالم کیف ہے دانائے رموز کم ہے ہاں مگر عجز کے اسرار سے نامحرم ہے ناز ہے طاقت گفتار پہ انسانوں کو بات کرنے کا سلیقہ نہیں نادانوں کو

Mixed Layout

.musaddas-mixed

4 lines in 2-column + 2 lines in 1-column — marsiya-style emphasis

<div class="musaddas-mixed">...</div>
اس قدر شوخ کہ اللہ سے بھی برہم ہے تھا جو مسجود ملائک یہ وہی آدم ہے عالم کیف ہے دانائے رموز کم ہے ہاں مگر عجز کے اسرار سے نامحرم ہے ناز ہے طاقت گفتار پہ انسانوں کو بات کرنے کا سلیقہ نہیں نادانوں کو

Mukhammas

5-line stanzas

The mukhammas is a 5-line poetic form. ShakeebJustify supports multiple layout variants.

Standard

.mukhammas

Gap after every 5 lines

<div class="mukhammas">...</div>
خوگر قربت و دیدار پہ کیسی گزرے کیا خبر اس کے دل زار پہ کیسی گزرے ہجر میں اس ترے بیمار پہ کیسی گزرے دور کیا جانیے بد کار پہ کیسی گزرے تیرے ہی در پہ مرے بیکس و تنہا تیرا

3+2 Pattern

.mukhammas-3-2

Gap after 3 lines, then 2 lines

<div class="mukhammas-3-2">...</div>
خوگر قربت و دیدار پہ کیسی گزرے کیا خبر اس کے دل زار پہ کیسی گزرے ہجر میں اس ترے بیمار پہ کیسی گزرے دور کیا جانیے بد کار پہ کیسی گزرے تیرے ہی در پہ مرے بیکس و تنہا تیرا

Mixed Layout

.mukhammas-mixed

4 lines in 2-column + 1 line in 1-column — strong closing emphasis

<div class="mukhammas-mixed">...</div>
خوگر قربت و دیدار پہ کیسی گزرے کیا خبر اس کے دل زار پہ کیسی گزرے ہجر میں اس ترے بیمار پہ کیسی گزرے دور کیا جانیے بد کار پہ کیسی گزرے تیرے ہی در پہ مرے بیکس و تنہا تیرا

Custom Patterns

For poetic forms not covered by the built-in classes, use data-pattern and data-mixed attributes.

data-pattern

Define custom grouping patterns

Gap after every 4 lines (Qat'a):

<div data-pattern="4">...</div>

Gap after 3, then 2 (repeating):

<div data-pattern="3+2">...</div>

Gap after 7 lines:

<div data-pattern="7">...</div>

data-mixed

Combine 1-column and 2-column layouts

4 lines 2-col, then 2 lines 1-col:

<div data-mixed="4:2col,2:1col">...</div>

3 lines 1-col, then 2 lines 2-col:

<div data-mixed="3:1col,2:2col">...</div>

Modes: 1col = single column, 2col = two columns

Copy Buttons (Opt-in)

Enable copy-to-clipboard functionality with the data-copy attribute. Buttons appear on hover (or tap on mobile). Poetry is copied with proper line breaks.

Copy All

Single button to copy entire poem

data-copy="all"

Copy Row

Per-line copy buttons on hover

data-copy="row"

Both

All + row buttons

data-copy="both"

Live Example

Hover over the poem to see the copy button

<div class="sher" data-copy="all">...</div>
پروانے کو چراغ ہے ، بلبل کو پھول بس صدیق کے لئے ہے خدا کا رسول بس

Note: When you copy poetry from this library (even without copy buttons), lines are preserved with proper line breaks for pasting into other applications.

Quick Reference

Class Layout Description
.sher 1-column Gap after every 2 lines
.sher2 2-column Pairs displayed side by side
.mukhammas 1-column Gap after every 5 lines
.mukhammas-3-2 1-column Gap after 3, then 2 lines
.mukhammas-mixed Mixed 4 lines 2-col + 1 line 1-col
.musaddas 1-column Gap after 4, then 2 lines
.musaddas-6 1-column Gap after every 6 lines
.musaddas-mixed Mixed 4 lines 2-col + 2 lines 1-col
data-pattern="N" 1-column Custom grouping, e.g. 4, 3+2, 5+1
data-mixed="..." Mixed Custom layout, e.g. 4:2col,2:1col