Arabic Encoding with html2canvas

Question

I am using html2canvas to take an image of a div, the content is from the same page, same domain, but it shows the Arabic letters disconnected, it seems that html2canvas doesn't support Arabic.

While I am reading the available details about it on its webpage, I didn't find any useful information.

Here is the simple code I used:

$("#import").click(function(){
    // send the contents of the email :)
    html2canvas(document.body, {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
        },
        letterRendering:true
    });
});

any clue?

Answer 1

i thought of trying some code manipulation & It unblivably worked. The answer is to replace :

textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing")))

with:

textList = (!options.letterRendering || /^(left|right|justify|auto)$/.test(textAlign) || noLetterSpacing(getCSS(el, "letterSpacing")))

notice at (&&) sign which is replaced by (||).

Answer 2

I found the answer eventually, three steps are needed:

1. You need to make sure that your html2convas js file is supporting right to left languages like Persian or Arabic or Hebrew, yeah you can't beleive that there are two different files, maybe one is older and the other has been updated, so for instance if you use https://files.codepedia.info/files/uploads/iScripts/html2canvas.js it won't work fine for right to left languages while https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js works perfectly.

2. Now that you have chosen true version of html2canvas.js ,you need to use text-align: right; for your elements.(NB: Not all elements need it, you probably just need to set it for the parent of elements).

3. You probably will need to add <meta http-equiv="content-type" content="text/html; charset=UTF8"> at the head of your html file.

Now everything will work like a charm! Thanks to answers that lead me to the most complete answer.