Black square appears for one second before displaying emoji with typewriter effect

user_15364092 0
Viewed 25

I tried implementing a JavaScript typewriter effect with emojis.

Here's the problem: when the effect writes an emoji, for a second it displays as a black square placeholder or as the unicode U+FFFD replacement character, also known as this: �, like it needs to get loaded before displaying the emoji itself. Here's the code.

var TxtType = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};
 
TxtType.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];
 
  if (this.isDeleting) {
  this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
  this.txt = fullTxt.substring(0, this.txt.length + 1);
  }
 
  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
 
  var that = this;
  var delta = 150 - Math.random() * 100;
 
  if (this.isDeleting) { delta /= 2; }
 
  if (!this.isDeleting && this.txt === fullTxt) {
  delta = this.period;
  this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
  this.isDeleting = false;
  this.loopNum++;
  delta = 500;
  }
 
  setTimeout(function() {
  that.tick();
  }, delta);
};
 
window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i=0; i<elements.length; i++) {
      var toRotate = elements[i].getAttribute('data-type');
      var period = elements[i].getAttribute('data-period');
      if (toRotate) {
        new TxtType(elements[i], JSON.parse(toRotate), period);
      }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
  document.body.appendChild(css);
};
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>

<body>
    <div class="emoji">Emoji: <a class="typewrite" data-period="1000" data-type='[ "", "⌚️", "", "", "" ]'></a></div>

    <script src="index.js" type="text/javascript"></script>
</body>
</html>

emoji css html javascript
1 Answers

Not all characters can be represented accurately if you slice a single index from them. Emojis are a common exception - they often require surrogate pairs, for which two indicies are required together for the character to display properly. For example:

const str = "";
console.log(str[0]);
console.log(str[1]);
console.log(str.slice(0, 2));

So, don't slice individual indicies from the string. Instead of doing

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

do

  var fullTxt = [...this.toRotate[i]];
  if (this.isDeleting) {
    this.txt = fullTxt.slice(0, [...this.txt].length - 1).join('');
  } else {
    this.txt = fullTxt.slice(0, [...this.txt].length + 1).join('');
  }

because spreading strings into arrays preserves the surrogate pairs.

var TxtType = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtType.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = [...this.toRotate[i]];

  if (this.isDeleting) {
    this.txt = fullTxt.slice(0, [...this.txt].length - 1).join('');
  } else {
    this.txt = fullTxt.slice(0, [...this.txt].length + 1).join('');
  }

  this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';

  var that = this;
  var delta = 150 - Math.random() * 100;

  if (this.isDeleting) {
    delta /= 2;
  }

  if (!this.isDeleting && this.txt === fullTxt.join('')) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-type');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtType(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
  document.body.appendChild(css);
};
<div class="emoji">Emoji:
  <a class="typewrite" data-period="1000" data-type='[ "", "⌚️", "", "", "" ]'></a>
</div>

user_95152070
Related