mohessaid / poem-js

A JavaScipt script to render Arabic poems correctly in webpages.

Poem.js

This project was originaly a script written by @hamzamez to render Arabic poems correctly in the dom.

What does this project do?

Provide a lightweight JS library to handle Arabic poems and render them in their Vertical style.

Why is this project useful?

Believe me! Writing Arabic poems inside your web pages, mobile apps is indeed a frustrating job. Then you have to style it properly to give your readers or users a full experience as they used to with books. This process is very annoying espicially for webmasters who have little experience with HTML or CSS.

How to use it

It is very simple. You put the poem inside a table, and every half-verse in a inside a cell. like so. and include the script in your page as it is. You can see an example in this link : https://codepen.io/mohessaid/pen/dwZZYm

<h1>القصيدة العمرية</h1>
  <table cellspacing="20" class="poem" dir="rtl">
    <tbody>
      <tr>
        <td><span>إنــى تـذكـرتُ ـ والذكـرى مُـؤَرِّقـةٌ</span></td>
        <td><span>مــجداً تــليــدا بــأيــديــنـا أضـعناه</span></td>
      </tr>
      <tr>
        <td><span>ويـحَ العـروبة ! كان الكونُ مسرحها </span></td>
        <td><span>فــأصــبَحــت تــتوارى فــي زوايـاه</span></td>
      </tr>
      <tr>
        <td><span>أنَّى اتــجهــت إلى الإسـلام فـي بـلد</span></td>
        <td><span>تـجدْهُ ـ كـالطـير ـ مـقصـوصاً جناحاه</span></td>
      </tr>
      <tr>
        <td><span>كــم صــرفَــتْنَــا يــدٌ كــنّا نــصرِّفــها</span></td>
        <td><span>وبـــات يـــمــلكـــنا شـــعبٌ ملكــناه</span></td>
      </tr>
      <tr>
        <td><span>هـل كـان دِيْـن ابـنِ عـدنانٍ سوى فلق</span></td>
        <td><span>شـق الوجـود، وليـلُ الجـهل يـغشـاه ؟</span></td>
      </tr>
      <tr>
        <td><span>هـــي الحـــنيــفةُ عــينُ اللـه تــكلؤهــا</span></td>
        <td><span>فــكلمــا حــاولوا تــشويــههــا شــاهـوا</span></td>
      </tr>
    </tbody>
  </table>

How do I get started?

coming . . .

Where can I get more help, if I need it?

coming . . .

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Hamza MEZERREG - Initial work - hamzamez
• Mohammed Essaid MEZERREG - Renewal & Update - mohessaid

You want to be part of this ☝️ list 😏 . All pull requests are welcome as long as they resepect our contributing guidelines.