Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unicode font problem #226

Open
ramesh-git opened this issue Jun 10, 2013 · 22 comments
Open

Unicode font problem #226

ramesh-git opened this issue Jun 10, 2013 · 22 comments

Comments

@ramesh-git
Copy link

@ramesh-git ramesh-git commented Jun 10, 2013

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.
screenshot-7

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
Copy link
Contributor

@brcontainer brcontainer commented Jun 26, 2013

@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
Copy link
Contributor

@brcontainer brcontainer commented Jun 29, 2013

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
Copy link

@BENYAZ BENYAZ commented Aug 16, 2014

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
Copy link
Contributor

@usmonster usmonster commented Aug 20, 2014

@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.

@niklasvh niklasvh added this to the 0.5.0 milestone Aug 29, 2014
@moxet
Copy link

@moxet moxet commented Mar 1, 2015

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

@molaie
Copy link

@molaie molaie commented Sep 2, 2015

@BENYAZ it also works for me in persian language

@azerafati
Copy link

@azerafati azerafati commented Sep 10, 2015

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

@ahmadshoaibjoya
Copy link

@ahmadshoaibjoya ahmadshoaibjoya commented Aug 22, 2017

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
Copy link

@rafiul rafiul commented Nov 28, 2017

@BENYAZ It's working in Bangla language. Thanks

@IbnAhmed
Copy link

@IbnAhmed IbnAhmed commented Dec 24, 2017

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

@rafiul
Copy link

@rafiul rafiul commented Dec 26, 2017

@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
Copy link

@IbnAhmed IbnAhmed commented Dec 26, 2017

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

@rafiul
Copy link

@rafiul rafiul commented Dec 28, 2017

@IbnAhmed
Copy link

@IbnAhmed IbnAhmed commented Dec 28, 2017

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

@hiroksarker
Copy link

@hiroksarker hiroksarker commented Mar 15, 2018

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

@hiroksarker
Copy link

@hiroksarker hiroksarker commented Mar 19, 2018

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

@IbnAhmed
Copy link

@IbnAhmed IbnAhmed commented Mar 21, 2018

@mohafouad
Copy link

@mohafouad mohafouad commented Dec 25, 2018

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

@nieshiming
Copy link

@nieshiming nieshiming commented Jan 9, 2019

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

@abowlfazl
Copy link

@abowlfazl abowlfazl commented Oct 15, 2019

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
Copy link

@rcwebd rcwebd commented Jun 5, 2020

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

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

@vishnudas707
Copy link

@vishnudas707 vishnudas707 commented May 17, 2021

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

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

This works like wonder.

@niklasvh niklasvh removed this from the 0.5.0 milestone Jul 11, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet