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.

Answer 3

Please,make sure that yo made proper "text-align: right;" in each Arabic element

text-align: right;

http://jsfiddle.net/8ypxW/2022/

Answer 4

I had same issue, I found this solutions and works greatly with me.

I fixed this problem use css 'word-wrap: normal;'

like ,<div style="word-wrap: normal;">حروفك العربية يجب ان تكون هنا</div>

Answer 5

Are you using UTF-8 encoding? If you don't have <meta http-equiv="content-type" content="text/html; charset=UTF8"> in your head it definitely wont work :) Hope this helps.

Answer 6

It is bug in html2canvas. Resolving this issue can be achieved through setting on your content CSS:

text-align: left; //or right or justify

Read more here: https://github.com/niklasvh/html2canvas/issues/226#issuecomment-20232693

Answer 7

Find this line in html2canvas.js and add center to this like this:

(!options.letterRendering && /^(left|right|justify|auto|center)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ? textNode.nodeValue.split(/(\b| )/) : textNode.nodeValue.split("");

Then set text-align:right/left/canter/justify in each box that have problem. it work for me well.

Answer 8

For a simple solution that worked for every case

Instead of the sentence in the html2canvas.js file

textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ? textNode.nodeValue.split(/(\b| )/) : textNode.nodeValue.split("");

Use:

textList = (!options.letterRendering || /^(left|right|justify|auto|center)$/.test(textAlign) || noLetterSpacing(getCSS(el, "letterSpacing"))) ? textNode.nodeValue.split(/(\b| )/) : textNode.nodeValue.split("");

The change is by adding center

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

Answer 9

you can use this package worked for arabic an persian

npm dom-2-image

Answer 10

Using version 1.0.0-alpha.12, none of the suggested solutions helped with Hebrew text. I needed a quick solution, so as a last (and dirty) resort, I changed the fillText behavior on line 3289

From:

var letterRendering = parent.style.letterSpacing !== 0;

To:

var letterRendering = true;

As @Kaiido suggested, this solution will impact performance (see comments). My usage in this plugin is limited to a very small container so it's unnoticeable - but you should take this in consideration.