phantomjs not rendering emoji characters correctly #12461

sth519 · 2014-08-16T12:45:48Z

I'm trying to render a page that includes emoji characters into a PNG file.
However, the emoji characters (multibyte utf-8) are not displayed correctly.

I'm using phantomjs 1.9.7 (from homebrew) on OS X 10.9.
The page renders correctly in normal browsers.

monkeycraps · 2016-06-22T10:48:18Z

it display at web brow correctly, at mac os, with AppleColorEmoji
©😊(^__^) 嘻嘻……🐦🌰বাংলা bn হিলিয়ামΩ

but when render pdf, it dose't contain the emoji, i've install the ttf font , at my computer, set it by font-face

@font-face {
    font-family: 'AppleColorEmoji';
    font-style: normal;
    font-weight: normal;
    src: url('font/emojione-apple.ttf');
}
body {
    font-family: 'FZCHYJW', 'fzltxh', 'AppleColorEmoji', 'Georgia', 'arial', 'sans-serif';
}

<span>©😊(*^__^*) 嘻嘻……🐦🌰বাংলা bn হিলিয়ামΩ</span>

CoryDanielson · 2017-07-17T20:16:06Z

Did either of you find a solution to this? A specific set of fonts that solved it?

monkeycraps · 2017-07-22T04:26:52Z

no 囧

ashwinrathod78 · 2017-10-27T04:17:25Z

Hello,

I am trying to add emoji in html file in div and span tag. phantomjs is not rendering emoji characters .

I am using below mentioned html code:

<html>
	<head>
		<meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
		<title></title>
	</head>
	<body>
                   I am 🐧 one
		  <br/>
		 <div>
			<span>I am second🐺🐗and again 🐧Third</span>
		 </div>
	</body>
</html>

I am getting [] (square symbol) at the place of emoji as shown below.

Your help is really appriciate.

thanks

CoryDanielson · 2017-10-27T12:15:39Z

I used twemoji to fix it for me. Twemoji replaces emoji characters with images of the emojis.

https://github.com/twitter/twemoji

My code looks like this (it uses jQuery and Lodash which are optional)

// Looks through all text nodes of elements passed in, and replaces the emoji characters with an <span><img class='emoji'.../></span>
// See https://github.com/twitter/twemoji
// If you'd like to size the emoji according to the surrounding text, you can add the following CSS to your stylesheet:
// img.emoji {
//    height: 1em;
//    width: 1em;
//    margin: 0 .05em 0 .1em;
//    vertical-align: -0.1em;
// }
export const replaceEmojisWithImagesInElements = (elements: HTMLElement[]) => {
        // Don't call elements.forEach, phantomjs doesn't like that for some reason
        // if not using _.forEach, maybe do for loop (i = 0; i < elements.length; i++)
	_.forEach(elements, element => twemoji.parse(element));
};

I call that function like this

replaceEmojisWithImagesInElements($('.TextWithEmojis'));

stale · 2019-12-29T07:51:02Z

Due to our very limited maintenance capacity, we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed (see #15395 for more details). In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!

marcbachmann mentioned this issue Mar 23, 2015

Unicode chars aren't rendered on pdf marcbachmann/node-html-pdf#20

Open

stale bot added the stale label Dec 26, 2019

stale bot closed this as completed Dec 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

phantomjs not rendering emoji characters correctly #12461

phantomjs not rendering emoji characters correctly #12461

sth519 commented Aug 16, 2014

monkeycraps commented Jun 22, 2016

CoryDanielson commented Jul 17, 2017

monkeycraps commented Jul 22, 2017

ashwinrathod78 commented Oct 27, 2017 •

edited

Loading

CoryDanielson commented Oct 27, 2017 •

edited

Loading

stale bot commented Dec 29, 2019

phantomjs not rendering emoji characters correctly #12461

phantomjs not rendering emoji characters correctly #12461

Comments

sth519 commented Aug 16, 2014

monkeycraps commented Jun 22, 2016

CoryDanielson commented Jul 17, 2017

monkeycraps commented Jul 22, 2017

ashwinrathod78 commented Oct 27, 2017 • edited Loading

CoryDanielson commented Oct 27, 2017 • edited Loading

stale bot commented Dec 29, 2019

ashwinrathod78 commented Oct 27, 2017 •

edited

Loading

CoryDanielson commented Oct 27, 2017 •

edited

Loading