Coder Social home page Coder Social logo

poem-js's Introduction

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.

A sample of what Poem.js can do

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.

poem-js's People

Contributors

hamzamez avatar mohessaid avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.