Hakim Dahoune | hakim.ma The classical Arabic poems are written such that each verse is written as two halves on the same row and separated by one or more punctuation marks or spaces. This Javascript library can do that easily. 


    // Easily set the arguments to produce the poem formatting:
    <script src="poetic.js"></script>
    <script>
        poetic.columnize( "target", "color", "delimiter_character",
                    "delimiter_color", "delimiter_size", "line_height", "alternative_line_color");
    </script>
Download
Argument Definition Default
target The DOM target body
color The poem text color #000000
delimiter_character The delimiter character to use between the poem 2 columns *
delimiter_color The delimiter color null
delimiter_size The delimiter size in percentage 100%
line_height The poem lines' height normal
alternative Use alternative color for even lines false

A Poem By Al-Motanaby

وفي الجهل قبل الموت موت لأهله # فأجسامهم قبل القبور قبور وأن امرأ لم يحي بالعلم ميت # فليس له حتى النشور نشور لَولا المَشَقَةُ سادَ النّاسُ كُلُّهُمُ#الجودُ يُفقِرُ والإقدامُ قَتَّالُ إِذَا رَأَيْتَ نُيُوْبَ اللَيْثِ بَارِزَةً #فَلَا تَظُنَّنَ أَنَّ اللَيْثَ يَبْتَسِمُ لَا تَحْقَرَنَّ صَغِيْرًا فِيْ مُخَاصَمَةٍ #إِنَّ البَعُوْضَةَ تُدْمِيْ مُقْلَةَ الأَسَدِ

HTML

            
<div class="mypoem">
        وفي الجهل قبل الموت موت لأهله # فأجسامهم قبل القبور قبور            
    وأن امرأ لم يحي بالعلم ميت # فليس له حتى النشور نشور       
    لَولا المَشَقَةُ سادَ النّاسُ كُلُّهُمُ#الجودُ يُفقِرُ والإقدامُ قَتَّالُ      
    إِذَا رَأَيْتَ نُيُوْبَ اللَيْثِ بَارِزَةً #فَلَا تَظُنَّنَ أَنَّ اللَيْثَ يَبْتَسِمُ
    لَا تَحْقَرَنَّ صَغِيْرًا فِيْ مُخَاصَمَةٍ #إِنَّ البَعُوْضَةَ تُدْمِيْ مُقْلَةَ الأَسَدِ   
</div>

⚡️ Notice how the 2 halves of the poem verses are delimited with #
⚡️ The line-breaks are important for the script to identify the poem verses.
⚡️ The DOM target ".mypoem" should be the first parent of the poem verses.

JS

                
<script src="poetic.js"></script>
<script>
  poetic.columnize( ".mypoem", "#FFFB9F", "*",
                    "#FFFFFF", "150%");
</script>