Question 8182 in PHP Versions Question posted in
You can find a list of all versions here.

json_encode changes the display of emojis – PHP Versions

Edit:
Sorry I’ve edited the original post, it seems that when using json_encode is when the emoji style changes, is there anything that can be done to avoid this?

Im using laravel 8.
I receive this data from a php query of a product page review, the string containing the message field includes a red heart emoji.

enter image description here

As I’m using Laravel Livewire, all variables are passed through a json_encode.

 $this->review = json_encode($this->review);

When doing json_encode, the emoji is shown with a small black character (an "ugly" version of the original emoji):

enter image description here

How can I keep the original emoji style when doing json_encode?

Tags:

2

Answers


  1. 0

    In your blade, try the following code :

    {!! html_entity_decode($this->review->message) !!}

    or echo

     <?php echo $this->review->message; ?>
    Login or Signup to reply.
  2. 0

    The displayed emoji depends on the font you are using and the operating system or platform on which it is displayed. You can see the browser console like interface where dd() dumps output is different from that of the browser html page. And even for the same font, different browsers will display the same emoji differently.

    Added to these complications, there are intricate measures a browser takes to display fonts if you do not specify a font or you specify a generic one like "serif". Hence, you can enclose your data at source (where it is entered e.g., an editor) and at the destination (after using json_encode()) in tag and specify a specific css font-family to have some consistency and a level of control over what the user sees on the browser.

    Source

    <span style="font-family: Helvetica">Me ha encantado ♥️</span>

    Destination

    <span style="font-family: Helvetica">{{ json_encode($review) }}</span>

    One other way to ensure consistency across platforms is to use an emoji font as described here – you can get more from a Google search (e.g., here), though some platforms will still be incapable of displaying certain emojis the way you’d expect or displaying them at all.

    Another option is to make your own emojis and include them as insert image option in your own custom editor. See some options here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search