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?

Jabber

I unfortunately have no idea how the Arabic should look, but, after taking a look at the plugin, it does not provide any extensive support for internationalization or i18n. I dug around on github for a bit for you, but unfortunately the only projects there are for dutch and mandarin. The only thing I found even remotely close, was this - unfortunately, that's a wrapper you would have to use server-side and would likely require a learning curve. best of luck. – Antipersonnel

thank you so much I am checking it now – Jabber

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 (||).

Wacke

where did you actually replace the original text? I can't find it within the lib file. – Twelvetone

@ajawadmahmoud its for release 0.4.1 ,not the latest version github.com/niklasvh/html2canvas/releases/download/0.4.1/… – Papule

Answer 2

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

text-align: right;

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

Ciaracibber

Answer 3

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.

Rattlebrain

The text direction is not correct. How to set direction for the text? (not text-align) – Supat

Do you mean direction: rtl;? – Rattlebrain

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>

Skepticism

Answer 5

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.

Unnatural

Answer 6

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.

Fraunhofer

@Jabber okay I was just making sure, any reason why you chose html2canvas? I think jCanvas might be better and easier because you may run into the problem several times. – Fraunhofer

I will check it, I have no perference, I just want a workable solution – Jabber

Answer 7

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

Kenna

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 (||).

Vent

Answer 9

you can use this package worked for arabic an persian

npm dom-2-image

Rubber

Answer 10

you need to do some css change: Add:

text-align: right;

Remove:

letter-spacing: 0.0px

Aposematic

Answer 11

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.

Marbling

By the name of the variable, I'd say it will cause a call for fillText() for each and every characters, instead of a single call per line. So it will probably have a noticeable performance impact (moreover on pages with lot of texts). – Pellicle

Thanks for clearing this up @Kaiido, I edited my answer – Marbling