The Art of the Justified Verse (Announcing shakeeb-justify v2.0.0!)

If you’ve ever tried reading Urdu poetry on a standard web page, you’ve probably felt a slight twitch in your eye.

Traditional Urdu typography—especially when draped in the elegant, cursive curves of the Nastaliq script—isn't meant to just sit left-aligned like a random grocery list. It’s an art form. Historically, divans and lit-magazines have printed Urdu poetry with strict, gorgeous visual structures. Both edges of a line are perfectly aligned (fully justified), couplets (sher) stay tightly bound, and stanzas leave just the right amount of breathing room.

But standard web layout tools like CSS text-align: justify? They look at Urdu script, panic, and completely break the aesthetic.

Frustrated by this, I embarked on a journey that started as a small, hacky code snippet years ago and has officially evolved into a fully grown, zero-dependency NPM package.

Today, I’m thrilled to announce the release of shakeeb-justify v2.0.0!

Here is the story of how it was built, why it exists, and how you can use it to give your web-based poetry the royal treatment it deserves.

The Origin Story: Nostalgia and the 2021 Hack

Back in 2021, I just wanted a way to display standard ghazals online without losing their visual soul. Urdu poetry has distinct structural rules:

Lines must be justified (both left and right edges aligned perfectly).
Couplets need to stick together.
It needs to handle Right-to-Left (RTL) rendering safely without causing layout explosions.

My initial solution was a simple script. It worked by wrapping lines into divs, calculating widths, and letting the browser do its best. It was local, keeping it alive for nostalgia's sake in the GitHub commit history, but it had limitations. It only handled basic single and double columns. If someone wanted to render complex classical poetic structures, they were out of luck.

Fast forward to recently: I decided it was time to stop gatekeeping this functionality in an old repository. I ripped the layout engine apart, rewrote it for performance, namespaced the CSS to prevent annoying style conflicts (.shakeeb-justify), and packaged it neatly onto NPM.

Step-by-Step: The Anatomy of a Poetry Layout Engine

Building version 2.0.0 required turning abstract poetic rules into strict, programmatic logic. Under the hood, the library parses plain text, HTML paragraphs (<p>), or line breaks (<br>), sanitizes them, and builds a rock-solid grid system using semantic tables (which provide the cleanest, most backward-compatible rendering for justified RTL texts).

We didn't stop at standard couplets. Version 2.0.0 introduces native semantic support for classical poetic forms:

Ghazal / Qat'a: Classic double or single-column structures.
Mukhammas (5-line stanzas): Supports standard spacing, custom "3+2" groupings, or a "mixed layout" that places 4 lines in two columns and isolates the final line at the bottom for dramatic emphasis.
Musaddas (6-line stanzas): Perfect for Marsiya layouts, letting you group all 6 lines together or run a "4+2 mixed layout" (4 lines in two columns, followed by a closing single-column couplet).

To prevent weird hover artifacts, gaps between stanzas are calculated using empty spacer rows instead of messy padding blocks. And to prevent regressions, I even threw in a Jest unit-testing suite to make sure future changes don't accidentally wreck your carefully aligned layout.

Quick Start: How to Use It

I wanted shakeeb-justify to be ridiculously easy to implement—whether you are a hardcore JavaScript developer or someone just setting up a simple blog.

1. Installation

If you're using modern build tools, grab it via NPM:

Bash

npm install shakeeb-justify

And import it into your script:

JavaScript
import { ShakeebJustify } from 'shakeeb-justify';
// Run it!
ShakeebJustify.apply();

If you prefer a simpler approach, just drop the CDN link directly into your HTML file:

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

(The library automatically triggers on DOMContentLoaded, so you don't even have to call it manually! For dynamic/AJAX content, just trigger ShakeebJustify.apply() manually.)

2. Writing the Markup

The library looks for specific class names and formats whatever text is inside them. You don't need to format your raw text with complex tags—just paste it as-is.

Standard Ghazal (Single Column, automatic gap every 2 lines):

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

Two Columns (Side-by-Side Misras):

HTML
<div class="sher2">
ہر ایک بات پہ کہتے ہو تم کہ تو کیا ہے
تمہیں کہو کہ یہ اندازِ گفتگو کیا ہے
</div>

3. Getting Fancy with Stanzas and Custom Patterns

Want a Musaddas with a mixed layout (4 lines side-by-side, 2 lines below)? Easy:

HTML
<div class="musaddas-mixed">
</div>

What if you have a wild, non-traditional form? Say hello to the data-pattern attribute. You can declare exactly when the layout engine should insert a visual break using a simple + separator:

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

Features You (And Your Readers) Will Love

Zero Dependencies: Clocking in as an incredibly lightweight library, it won't bloat your website's load times.
Copy-Friendly Outputs: Have you ever tried copying poetry from a web table and ended up pasting a scrambled mess? I fixed that. shakeeb-justify injects hidden newlines into the DOM, ensuring that when your readers highlight and copy a poem, it preserves its perfect line-breaks when pasted into WhatsApp, Twitter, or Notepad.
Optional Copy Buttons: Want to make sharing even easier? Just pass the data-copy attribute to automatically generate seamless clipboard copy buttons for your readers.
WordPress/Gutenberg Compatible: It integrates naturally into standard web layouts and custom CMS setups.

What's Next?

Getting version 2.0.0 live on NPM and polishing up the GitHub repository feels like a massive milestone for a project that began out of sheer frustration with standard web formatting.

Check out the live documentation and demo page to see the layouts in action. If you love poetry, typography, or just clean code, feel free to dive into the GitHub Repo, star it, open an issue, or contribute!