compose-multiplatform icon indicating copy to clipboard operation
compose-multiplatform copied to clipboard

Emoji weirdness with compose desktop

Open zoff99 opened this issue 1 year ago • 19 comments

Describe the bug why do emoji in text work differently on macos, windows, ubuntu? and why does it work really bad on all three? look at the 3 screenshots (lower right corner the emoji popup) how to display at least the first 20 smiley emoji properly on the main OS's with compose desktop?

aaa

what is used to draw smiley "images" instead of font? how does this work under the hood in compose desktop? is this a font issue? a gtk issue? openGL issue? i dont even know


and then even more weirdness:

also can anybody explain this screenshot ? on the right in the popup the thumbup emoji is black and white font, in the text input box on the bottom then the exact same text is pasted into, it suddenly is a yellow graphic. and in the middle in the message view the exact same text is a yellow image graphic again. whats going on here? image_720

Affected platforms Select one of the platforms below:

  • Desktop

Versions

  • Kotlin version*: all
  • Compose Multiplatform version*: all
  • OS version(s)* (required for Desktop and iOS issues): Linux and others
  • OS architecture (x86 or arm64): x86
  • JDK (for desktop issues): 17 and 21

zoff99 avatar Feb 02 '24 12:02 zoff99

It's perfectly valid for emojis to look differently on different platforms. This is already the case for Android vs. iOS. See https://www.howtogeek.com/784832/that-emoji-might-not-look-the-same-on-your-friends-phone/ for example.

m-sasha avatar Feb 05 '24 14:02 m-sasha

in the screenshot you can see the exact same emoji (copy and paste) look 2 different ways on linux 2 times its a black and white font with hand pointing to the left. in the middle its a yellow image hand pointing to the right

zoff99 avatar Feb 05 '24 14:02 zoff99

Hello, @zoff99. Could you please send a minimal reproducer for that behavior? And better screenshots, if possible.

mazunin-v-jb avatar Feb 05 '24 14:02 mazunin-v-jb

in the screenshot you can see the exact same emoji (copy and paste) look 2 different ways on linux

That's likely a problem with transferring the text correctly through the clipboard.

m-sasha avatar Feb 05 '24 14:02 m-sasha

i dont think so. its the same if you write it into the textfield programmatically

zoff99 avatar Feb 05 '24 14:02 zoff99

i dont think so. its the same if you write it into the textfield programmatically

Can you post a reproducer where putting the same text (programmatically) into a textfield results in different emojis being drawn?

m-sasha avatar Feb 05 '24 14:02 m-sasha

👍

zoff99 avatar Feb 06 '24 07:02 zoff99

🫵👍

zoff99 avatar Feb 06 '24 07:02 zoff99

paste the above into a textfield in compose desktop. first paste the single emoji. then remove and paste the 2 emojis below.

zoff99 avatar Feb 06 '24 07:02 zoff99

you end up with different things like this screenshot. but emojis should render the same way.

image

zoff99 avatar Feb 06 '24 07:02 zoff99

you can also programmatically write it into the text field (i cant paste the text here, it will turn into an image, so its a screenshot)

image

and then

image

zoff99 avatar Feb 06 '24 07:02 zoff99

@m-sasha can you confirm the bug?

zoff99 avatar Feb 19 '24 08:02 zoff99

output

zoff99 avatar Feb 19 '24 08:02 zoff99

when i paste the right emoji to the start of the textfield, suddenly the middle emoji turns into a picture. when i remove the emoji from the start, the middle emoji turns back into a pumpkin ähm monochrome font item

zoff99 avatar Feb 19 '24 08:02 zoff99

and also why is the middle icon not a "yellow picture" in the first place? the picture clearly exists, otherwise how can i turn into a picture?

zoff99 avatar Feb 19 '24 08:02 zoff99

Doesn't appear to reproduce on macOS:

fun main() = singleWindowApplication {
    Column(Modifier.fillMaxSize().background(Color.DarkGray)) {
        TextField(
            value = "\uD83D\uDC4D",
            onValueChange = { }
        )
        TextField(
            value = "\uD83E\uDEF5\uD83D\uDC4D",
            onValueChange = { }
        )

        var text by remember { mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = { text = it }
        )
    }
}

https://github.com/JetBrains/compose-multiplatform/assets/5230206/3ec45292-51be-40ab-95f0-5ca6b2a0d828

m-sasha avatar Feb 19 '24 10:02 m-sasha

on ubuntu 22.04:

ub_emoji_broken

zoff99 avatar Feb 19 '24 11:02 zoff99

there must be 2 bugs here. because apart from this weirdness, why is the yellow emoji not showing in the first place? the emoji image is clearly available, otherwise it couldn't show up later.

zoff99 avatar Feb 19 '24 11:02 zoff99

also i saw the same issue on manjaro linux

zoff99 avatar Feb 19 '24 11:02 zoff99

any idea yet where that bug can be located?

zoff99 avatar Feb 20 '24 11:02 zoff99

any news on that one? what library is used under the hood to draw those emoji on linux?

zoff99 avatar Mar 07 '24 19:03 zoff99

any more information what the underlying problem is?

zoff99 avatar Mar 22 '24 16:03 zoff99