CODEWITHSUNDEEP
javascriptunicodeemoji
Ben Aston
Ben Aston

Reputation: 55769

How do I apply a skin tone to an emoji in JavaScript?

Given this emoji, how can I programmatically apply a skin tone in JavaScript?

Grinning face is 0x1F600.

Dark Skin Tone is 0x1F3FF.

Do I simply concatenate the values together?

The following code, based on the algorithm here, merely prints two characters out.

function units(codepoint) {
    const tmp = codepoint - 0x10000
    const padded = tmp.toString(2).padStart(20, '0')
    const unit1 = Number.parseInt(padded.substr(0, 10), 2) + 0xD800;
    const unit2 = Number.parseInt(padded.substr(10), 2) + 0xDC00;
    return [unit1, unit2]
}

const face = units(0x1F600)
const tone = units(0x1F3FF)
const ch = String.fromCharCode(...face, ...tone) 
console.log(ch) // 😀🏿

Upvotes: 2

Views: 1441

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167220

There are only few emojis that actually take up Skin Tones. For example, faces - man and women facepalming:

function units(codepoint) {
    const tmp = codepoint - 0x10000
    const padded = tmp.toString(2).padStart(20, '0')
    const unit1 = Number.parseInt(padded.substr(0, 10), 2) + 0xD800;
    const unit2 = Number.parseInt(padded.substr(10), 2) + 0xDC00;
    return [unit1, unit2]
}

const face = units(0x1F926)
const tone = units(0x1F3FF)
const ch = String.fromCharCode(...face, ...tone) 
console.log(ch)

It's not possible with others that do not support colour variants. Here, in Every Emoji by Codepoint, you can find those support the Emoji Modifier Fitzpatrick.

No Modifier Support

nomod

Modifier Supported

yesmod

Upvotes: 4

Related Questions