Html2canvas: Unicode font problem

[ramesh-git]

Hi All,

In my HTML code some UNICODE content exists. If I try to convert from HTML to Canvas, it is generating junk characters. I used tamil UNICODE data.

find the screen shot of my HTML content.
Can you please give any solution. I needs this urgent.
Please respond anyone ASAP.

Thanks&Regards,
Ramesh

[brcontainer]

@ramesh-git It seems to be really a _BUG html2canvas_ even.

I did a test with "fillText" and had no problems, but when using the "html2canvas". There were some characters were replaced by a strange drawing (a circle to be exact).

The only quick fix that you can specify:

you must create canvas of their texts before running html2canvas and puts them overlapping to the original texts (using position: absolute; and the original texts should receive visibility: hidden; - may have to put the text within span tags and these span tags should be hidden.), when you run the callback onreaded you remove (or hide) the canvas (texts).

Note: Remember, whenever you make a question that will use code "client-side", add an example online using sites like http://html2canvas.hertzen.com/ (I've added an example to your question, so it will be easier for developers.)

fillText example:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
  background:#ccc;
}
canvas{
  background:#fff;
}
</style>
<canvas id="e" width="600" height="200"></canvas>
<h1 id="a1">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</h1>
<script>
    var canvas = document.getElementById("e");
    var a1 = document.getElementById("a1");

    var context = canvas.getContext("2d");
        context.fillStyle = "#000";
        context.font = "bold 16px Arial";
        context.fillText(a1.innerHTML, 10, 20);
</script>

bug html2cavans example:
http://jsfiddle.net/6KvLk/

[brcontainer]

I discovered the reason for the failure:
In function renderText(el, textNode, stack), to be more specific in line: 1186:
we have this: : textNode.nodeValue.split(""); (this split is for normal characters)

For the "unicode text" you need to add the property text-align (css) with one of the following values​​: left, right, and justify.

Note: and do not use the property letter-spacing:

Try:

<h1 id="a1"><span style="text-align:justify;">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</span></h1>
<script>
    var a1 = document.getElementById("a1");
    html2canvas(a1,{
        "onrendered":function(canvas){
            document.body.appendChild(canvas);
        }
    });
</script>

[BENYAZ]

very much thanks to brcontainer.
When I saw his/shes post, 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 (||).

[usmonster]

@BENYAZ For your issue (#289), wouldn't a cleaner fix be to just change left|right|justify|auto to left|right|center|justify|auto? I suspect your workaround might break or significantly slow rendering for some use cases.

[moxet]

@BENYAZ it works for me (Pashto & Urdu) languages. Thank you

[molaie]

@BENYAZ it also works for me in persian language

[azerafati]

@BENYAZ yea, I also confirm it working in Arabic and Persian.

[ahmadshoaibjoya]

It working in Dari
var textList = (!this.options.letterRendering || noLetterSpacing(container)) || !hasUnicode(container.node.data) ? getWords(characters) : characters.map(function(character)
I changed && to ||

[rafiul]

@BENYAZ It's working in Bangla language. Thanks

[IbnAhmed]

@rafiul ভাই আপনি কেমনে এই সমস্যা সলভ করলেন একটু খুলে বলেবেন? অর্থাৎ কোন ফাইলে গিয়ে লাইনগুলো বদলাতে হবে? html2canvas.js এর বেশ কয়েকটা ভার্শনে ট্রাই করেছি, কোনো জায়গাতেই রিপ্লেস হওয়া (যেগুলো রিপ্লেস করে নতুন লাইন বসাবো) লাইনগুলো পেলাম না।

[rafiul]

@IbnAhmed html2canvas.js ফাইলে নিচের লাইনটা খুজে বের করেন
textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing")))

Replace with:

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

** && এর জায়গায় ।। হবে।

[IbnAhmed]

@rafiul, ভাই আপনি আমার কথা গুলো বুঝতে পারেননি। আমার কাছে html2canvas.js নামে যে ফাইলটা আছে সেটাতে এই লাইনটাই নেই " textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing")))"
আপনার html2canvas.js ফাইলটা কষ্ট করে আপলোড করবেন?

[rafiul]

@IbnAhmed Download from here: http://3rwebtech.com/html2canvas.js

[IbnAhmed]

@rafiul, অসংখ্য ধন্যবাদ ভাই :)

[hiroksarker]

@rafiul Would you pls share html2canvas.js file. Thanks

[hiroksarker]

@rafiul Would you pls share html2canvas.js file. Previous link not working. Thanks

[IbnAhmed]

@hiroksarker download it from here, https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0

[mohafouad]

same problem with me .... any help please ?

[nieshiming]

setting css : letter-spacing: 0;
options = {letterRendering: true}

[abowlfazl]

in new version should change this line:

var wordRendering = (!this.options.letterRendering || noLetterSpacing(container)) && !hasUnicode(container.node.data);

with this:
var wordRendering = (!this.options.letterRendering || noLetterSpacing(container)) || !hasUnicode(container.node.data);

[rcwebd]

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

like ,<div style="word-wrap: normal;">Your text here</div>