export arabic text as images

Question

I have a bunch of lines of Arabic text in UTF-8. The device I am trying to display this one does not support arabic text being displayed. Therefore, I need to convert the text into images.

I would like to save each line of text as an image with a specific width. I need to use a specific font as well. What is the best way to do this? Does anybody know of a tool that can be helpful here?

Problems I've run into so far:

PHP + GD: Arabic letters appear seperated and not in cursive as they should. VB.net: I can dump each line of text into a richtextbox... but I don't know how to export the image of just that control. Flash: no support for right to left text.

Answer 1

As for Arabic, you need a library to reverse chars/glyphs for PHP/GD. see e.g. http://sourceforge.net/projects/ar-php/ or at http://www.ar-php.org/.

Make sure your PHP file encoding is in unicode/UTF.
e.g. > open Notepad > Save As > encoding as UTF-8:

Sample usage for Arabic typography in PHP using imagettftext:

<?php 
    // The text to draw
    require('./I18N/Arabic.php'); 
    $Arabic = new I18N_Arabic('Glyphs'); 
    $font = './DroidNaskh-Bold.ttf';
    $text = $Arabic->utf8Glyphs('لغةٌ عربيّة');

    // Create the image
    $im = imagecreatetruecolor(600, 300);

    // Create some colors
    $white = imagecolorallocate($im, 255, 255, 255);
    $grey = imagecolorallocate($im, 128, 128, 128);
    $black = imagecolorallocate($im, 0, 0, 0);
    imagefilledrectangle($im, 0, 0, 599, 299, $white);

    // Add the text
    imagettftext($im, 50, 0, 90, 90, $black, $font, $text);

    // Using imagepng() results in clearer text compared with imagejpeg()
    imagepng($im, "./output_arabic_image.png");
    echo 'open: ./output_arabic_image.png';
    imagedestroy($im); 
?>

Outputs:

Answer 2

I've heard that pango handles Arabic layout pretty well. haven't used it though.

Update:

The utility pango-view can render text in any language and output it as an image

$ pango-view input_file.txt --no-display --output=image.png

or you can supply the text as an option as well:

$ pango-view --no-display --output=image.png --text="your sentence"

You can also specify a width:

--width=50 -wrap=word

<< end of update

Alternatively, there are a few programs that use unicode characters that represent contextual Arabic letter forms and process text and make it render properly on systems that can't render Arabic text properly.

Here are the ones I know of:

• The Free Ressam, written in python, by me ^_^
• Tadween, written in C#,
• Arabic writer, written in javascript

They're all open source, so even if you don't use any of these languages, you can study the code and create a solution in your programming language of choice.

Answer 3

There are many ways; using Windows.Forms for example, I think you:

• Create an empty Image instance; I think that at this point you define the image's dimensions
• Create a Graphics instance from the Image, using the Graphics.FromImage method
• Invoke the method of the Control (the RichTextBox) which tells it to paint itself: and to that method, pass the Graphics instance associated with your image, so that it paints itself onto the image.

Answer 4

I am not sure if you still waiting for an answer but there is very clean and neat solution for your problem. You can change any text, including rtl, to image based on their css class. But let me tell you first, PHP and GD what ever, doesn't do any good for rtl text. You should try asp.net text replacement based on width.

Once I walked the same path and struggled for days. Here is what you should do.

First go to following address and see the tutorial and download the files. http://weblogs.asp.net/yaneshtyagi/archive/2008/11/07/text-to-image-convertor.aspx

Second you need an asp.net server. You can install it or you can use one of those virtual server, such as mono asp.net server, or you can use visual web developer.

The code you will get converts the text into a single line image, though you can specify width. In that case long line of text shrink and becomes illegible. What you need is to text wrap based on specified width.

Here in this link that explains how to alter the code in fontwriter.ashx to achieve text wrap. http://www.codeproject.com/Questions/189513/Dynamic-Image-Replacement-Method-with-Csharp.aspx

Third run the your page via asp.net server. Once you have the images you can save it, right click and save as, with firefox, firefox works best so far.

Now, all the text is converted into images and original text will be added to image as alt tag. Hope it helps.

I am planning to post a tutorial on the issue soon. Check www.codeproject.com later.