Emoji Component

Emoji, known as e (絵, “picture”) + moji (文字, “character”) from Japanese Kanji is a key feature for web content. With emoji supports, a lot of icons can be replaced easily. Bissetii does support Emoji seemlessly with an optional enabling trigger.

This component is available starting from v1.11.0.

Sass Styling Parts

Sass styling parts varies depending on the version you use.

Version v1.13.0 and above

Starting from version v1.13.0, emoji no longer requiring dedicated Sass files. It will be parts of Root Component.

By default, the emoji uses its original name “Noto Color Emoji” and will use local system-UI version if available.

Otherwise, it falls back to finding its local font hosting at /fonts/NotoColorEmoji.ttf pathing.

Version v1.12.5 and before

The Sass scripts responsible for styling emoji are located at:

assets/css/bissetii/modules/emoji/*

Bissetii is currently using external emoji font graphics like Noto Color Emoji for page rendering.

Enabling Emoji

To enable emoji, you need to supply the type of emoji styling using its Bissetii emoji code name. To disable emoji completely, simply supply false as falue. The config is:

$config-emoji: code-name

Custom Sourcing URL Paths

Bissetii also supply optional local URL and remote URL sourcing path. If URLs are specified, it will overrides the default URL. To disable them and use the default URLs, simply supply an empty array ([]). The configs are:

$config-emoji-local-url: [ "font/myEmojiFile.tff" ]
$config-emoji-remote-url: [ "site.com/emoji.tff", "site.com/emoji.woff" ]

Custom Font

To supply custom font of your own, simply supply the codename as:

$config-emoji: custom-emoji

You MUST specify both local and remote URLs for sourcing the font files. Otherwise, the compiler returns an error.

Noto Color Emoji

Noto Color Emoji is the Noto font family emoji. The graphics font is available at its Github repository. To enable this font, simple supply the codename as:

$config-emoji: noto-color-emoji

By default, this font sources the font file from the following locations:

Local URL : fonts/NotoColorEmoji.tff
Remote URL: https://gitcdn.xyz/repo/googlefonts/noto-emoji/master/fonts/NotoColorEmoji.ttf

Javascript Parts

This component does not depend on any Javascript.

HTML Parts

There are multiple aspects you need to manage for HTML part.

Import Emoji Font

Starting from version v1.13.0, you need import your emoji font using inline styling (<style>).

This applies to AMP output format where you compress the codes together into your <style amp-custom>.

The CSS is hard-coded to use the name emoji. Hence, you just need to specify the source URL list using the @font-face attribute . Here is an example:

1
2
3
4
5
6

@font-face {
	font-family: emoji;  /* keep this hard-coded */
	src: url(//localhost:8080/fonts/NotoColorEmoji.ttf),
		url(https://cdn.com/fonts/NotoColorEmoji.ttf),
		...;
}

Creating Emoji

There are many ways to create emoji. There are minimum 3 ways to do it:

1. By shortcode (HIGHLY RECOMMENDED)
2. By HTML Encoded UTF-8
3. By UTF-8 Symbols directly

You may refers to the Emoji Cheat Sheet or Emoji Manual for some guidance. Bissetii currently renders Emoji as follows: