timdream / wordcloud2.js

Tag cloud/Wordle presentation on 2D canvas or HTML

Home Page:https://wordcloud2-js.timdream.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Words Overlaping in Firefox

kanna99o opened this issue · comments

A week ago when I was working on browser compatibility of my app I came across an issue with with words that overlap each other, but just in Firefox. In my case, I'm using <span> elements to render the words.

So far, I have noted that the strategy selected by worldCloud2.js to make sure that the position of a word within a <span> element match perfectly the one calculated by the canvas API is not longer valid. To support this claim, I refer to the same link provided in one of the code comments. That post also contains a [link to an example] (http://jsfiddle.net/uyCCL) of the position strategy used (the #span3 element). As you can see, the word in the <span> overlays perfectly the word in the canvas just in Chrome, but not in Firefox.

As a fix for this issue, I added an optional factor to the vertical offset of the <span> element in the line 810 of the library, which results in:

'top': ((gy + info.gh / 2) * g + info.fillTextOffsetY * (typeof InstallTrigger !== 'undefined' ? 1.1 : 1)) + 'px'.

So far the wordcloud behaves pretty well in Firefox. Should I submit a pull request with this fix??