Using Emojis in markup, odd behaviour in editor

For technical support and bug reports for all editions of CSS HTML Validator, including htmlval for Linux and Mac.
Post Reply
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Using Emojis in markup, odd behaviour in editor

Post by MikeGale »

I'm looking at emoji's within X/HTML and am seeing some odd behaviour in the editor.

I have a workaround, which, with a bit of extra baggage is somewhat readable in the source.

If anybody has ideas on other ways to tackle this, I'd appreciate some information.

Issue: I see extra "blank spaces" in the editor when working on code that contains emojis. (I suspect that this is the "modifier" unicode-characters/codepoints, showing up, but not where they actually occur in the code.)

Background: The emoji set gets bigger over time. Many of them, in my view, aren't valuable but some are. The syntax of the emojis is more complex than a single visible glyph per "character". Some codepoints alter the character that precedes them, and (that I've tested) this modification can go two levels deep. For example: 1. A set of modifier codepoints change the skin colour of the "people" emojis. 2. The zero space modifier can change the form of the emoji before and after it, in some cases.

Example code to play with:

<p>Sample of markup: 3 Monkeys=<span data-emoji-name="3 Monkeys">&#x1F648;&#x1F649;&#x1F64A;</span> 3 Monkeys (as text)=<span data-emoji-name="3 Monkeys (as text)">&#x1F648;&#xFE0E;&#x1F649;&#xFE0E;&#x1F64A;&#xFE0E;</span> Man and Woman=<span data-emoji-name="Man and Woman">&#x1F468;&#x1F469;</span> Woman and Man(joined)=<span data-emoji-name="Woman and Man (joined)">&#x1F469;&#x200D;&#x1F468;</span > Woman-1 and Man-5(joined)=<span data-emoji-name="Woman-1 and Man-5 (joined)">&#x1F469;&#x1F3FB;&#x200D;&#x1F468;&#x1F3FE;</span> Woman and Man(joined as text)=<span data-emoji-name="Woman and Man (joined as text)">&#x1F469;&#xFE0E;&#x200D;&#x1F468;&#xFE0E;</span > </p>

I've pasted something akin to that (as rendered) below:

Sample of markup: 3 Monkeys=🙈🙉🙊 3 Monkeys (as text)=🙈︎🙉︎🙊︎ Man and Woman=👨👩 Woman and Man(joined)=👩‍👨 Woman-1 and Man-5(joined)=👩🏻‍👨🏾 Woman and Man(joined as text)=👩︎‍👨︎

You can see the effect by posting a copy of the rendered form in the editor. I expect you to see some extra spaces, which jump about a bit as you move the insertion point.

I've marked the "picture sections" in spans here, to make the markup somewhat readable in the source.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Using Emojis in markup, odd behaviour in editor

Post by Albert Wiersch »

Hi Mike,

Thank you for letting me know. I don't use characters/emojis like these so I never ran into this issue myself but I was able to reproduce it using your example code.

I will report this to the editor component developer and hope that they will address it in an update.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: Using Emojis in markup, odd behaviour in editor

Post by MikeGale »

Thanks Albert.

I can imagine one thing about this that would take a bit of thought. You need to parse the source for these nested modifiers, and worse some of them change the glyphs used. (It's situational so need "lookup-tables" to do the right thing.)

I've used these in non-public pages, not sure they're entirely ready for general access. I know that some user machines (there's at least one iPhone for example) can't handle some specialised Unicode characters.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Using Emojis in markup, odd behaviour in editor

Post by Albert Wiersch »

Hi Mike,

Yes, I imagine you are right. The editor developer just responded to my post regarding this and also said that it is hard to implement but that they were evaluating possible ways.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: Using Emojis in markup, odd behaviour in editor

Post by MikeGale »

Thanks for that. My "safe" technique handles the situation.

I did a little experimentation with the "modifier" code points. Without seeing the technical definitions, the design seemed pretty ad-hoc to me. Has some odd features.
Post Reply