It is possible to add emojis to the wordcloud?

[MariPop]

Hello!

First, thank you so much for the job!

I'd need to make a wordcloud with emojis or mixing words and emojis. The emojis size would depend of its weight (same behavior as words).

So I was wondering if your library have something done for this needs. I have a twitter emoji id, a src url or an img dom element.

Thank you!! Best! María

[Timothy Guan-tin Chien]

The library currently does not accept images. If Emoji are @font-face web font it should be able to render without problems.

[MariPop]

Ok, thank you!!

[Eugen]

@maripop what is possible is to replace the innerText from span elements (if you don't select a canvas, span elements will be created).

You just need to calculate some widths properly but you can listen on the wordcloudstop event and replace the content of the spans. In the library there is a check if the data is an array or an object with
word, weight and attributes. These attributes can for example have your content you want to place (emojis) as data-attribute.

...
this.element = document.getElementById('some_id');
this.element.addEventListener('wordcloudstop', replaceHTML.bind(this));
WordCloud(this.element, {list: [
  {attributes: { 'data-html' : '<i class="fab fa-php"></i>'}, weight: 3, word: "php" },
  {attributes: { 'data-html' : '<i class="fab fa-js"></i>'}, weight: 10, word:  "js"},
  {attributes: { 'data-html' : '<i class="fab fa-docker"></i>'}, weight: 8, word:  "docker"},
]};

...
replaceHTML() {
  let spans = this.element.children;
  for (let span of spans) {
    span.innerHTML = span.getAttribute("data-html");
  }
}

It is just an approach, where i replaced the words with any HTML content. The width calculation of each element is still done by the given word and the other font options but i hope you can start with that.

[MariPop]

Old issue handled by workarround