Use of Emojis in Text

Text blocks in CE.SDK support the use of emojis. A default emoji font is used to render these independently from the target platform. This guide shows how to change the default font and use emojis in text blocks.

Explore a full code sample on Stackblitz or view the code on Github.

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

Change the Default Emoji Font#

The default font URI can be changed when another emoji font should be used or when the font should be served from another website, a content delivery network (CDN), or a file path.

The preset is to use the NotoColorEmoji font loaded from our CDN. This font file supports a wide variety of Emojis and is licensed under the Open Font License. The file is relatively small with 9.9 MB but has the emojis stored as PNG images.

As an alternative for higher quality emojis, e.g., this NotoColorEmoji font can be used. This font file supports also a wide variety of Emojis and is licensed under the SIL Open Font License, Version 1.1. The file is significantly larger with 24.3 MB but has the emojis stored as vector graphics.

In order to change the emoji font URI, call the setSettingString(keypath: string, value: string) Editor API with 'defaultEmojiFontFileUri' as keypath and the new URI as value.

Add a Text Block with an Emoji#

To add a text block with an emoji, add a text block and set the emoji as text content.


import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.50.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.50.0/assets'
};

CreativeEngine.init(config).then(async (engine) => {
  document.getElementById('cesdk_container').append(engine.element);

  let uri = engine.editor.getSettingString('ubq://defaultEmojiFontFileUri');
  // From a bundle
  engine.editor.setSettingString(
    'ubq://defaultEmojiFontFileUri',
    'bundle://ly.img.cesdk/fonts/NotoColorEmoji.ttf'
  );
  // From a URL
  engine.editor.setSettingString(
    'ubq://defaultEmojiFontFileUri',
    'https://cdn.img.ly/assets/v2/emoji/NotoColorEmoji.ttf'
  );

  const scene = engine.scene.create();

  const page = engine.block.create('page');
  engine.block.setWidth(page, 800);
  engine.block.setHeight(page, 600);
  engine.block.appendChild(scene, page);

  engine.scene.zoomToBlock(page, 40, 40, 40, 40);

  const text = engine.block.create('text');
  engine.block.setString(text, 'text/text', 'Text with an emoji 🧐');
  engine.block.setWidthMode(text, 'Auto');
  engine.block.setHeightMode(text, 'Auto');
  engine.block.appendChild(page, text);
});