Recent

Author Topic: How to display coloured emojis on Windows?  (Read 5665 times)

Gustavo 'Gus' Carreno

  • Hero Member
  • *****
  • Posts: 1112
  • Professional amateur ;-P
How to display coloured emojis on Windows?
« on: September 24, 2021, 03:42:01 am »
Hey Y'all,

I was able to convince a couple of user over at the Discord server Unofficial Free Pascal(https://discord.gg/yQhwhfZS) to compile the attached project and they provided me with a screenshot of what it looks like under Windows 10. I'm also attaching how it looks under Ubuntu 21.04 64b.

If we go over to emojipedia.org, they use both UTF8 emojis and images to display their information.
When I was testing my project under a Windows Server 2012 VPS, I pointer Google Chrome at it and the UTF8 emojis where coloured.

So, what do I have to do to have my app tap into the coloured UTF8 emojis?

Is it a matter of font? Or something else like a codepage?

I'm lost and a complete ignorant of both how Windows renders UTF8 glyphs and the whole UTF8 thing to be honest, so any hint and/or pointer to some helpful implementation would be very welcomed!!

Cheers,
Gus

PS: I sure wish we could have a BBCode tag to include an image in the text and not only on the attachments...
Maybe I'm being spoiled by GitHub's Markdown editor or the Discord client LOL!!
« Last Edit: September 24, 2021, 03:44:46 am by Gustavo 'Gus' Carreno »
Lazarus 3.99(main) FPC 3.3.1(main) Ubuntu 23.10 64b Dark Theme
Lazarus 3.0.0(stable) FPC 3.2.2(stable) Ubuntu 23.10 64b Dark Theme
http://github.com/gcarreno

Jurassic Pork

  • Hero Member
  • *****
  • Posts: 1228
Re: How to display coloured emojis on Windows?
« Reply #1 on: September 24, 2021, 10:08:06 am »
hello,
i don't know if you can use this option in Lazarus :
Quote
D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT
In Windows 8.1 and later, text is rendered using color versions of glyphs, if defined by the font.

Friendly, J.P
Jurassic computer : Sinclair ZX81 - Zilog Z80A à 3,25 MHz - RAM 1 Ko - ROM 8 Ko

Gustavo 'Gus' Carreno

  • Hero Member
  • *****
  • Posts: 1112
  • Professional amateur ;-P
Re: How to display coloured emojis on Windows?
« Reply #2 on: September 25, 2021, 03:58:38 pm »
Hey J.P.,

i don't know if you can use this option in Lazarus :
Quote
D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT
In Windows 8.1 and later, text is rendered using color versions of glyphs, if defined by the font.

Thanks, I'll try and look this up. I hope I can suss this out even without access to a Windows machine :)

Cheer,
Gus
Lazarus 3.99(main) FPC 3.3.1(main) Ubuntu 23.10 64b Dark Theme
Lazarus 3.0.0(stable) FPC 3.2.2(stable) Ubuntu 23.10 64b Dark Theme
http://github.com/gcarreno

Martin_fr

  • Administrator
  • Hero Member
  • *
  • Posts: 9794
  • Debugger - SynEdit - and more
    • wiki
Re: How to display coloured emojis on Windows?
« Reply #3 on: September 25, 2021, 04:15:05 pm »
The "old" API does not support this according to my google searches. So functions like TextOutA / TextOutW (Afaik used by the LCL) will not do the trick.

https://stackoverflow.com/questions/46892844/gdi-can-i-use-the-new-windows-10-segoe-ui-emoji-colored-font-with-drawtext
The answer seems to lead to this: https://docs.microsoft.com/en-us/windows/win32/directwrite/direct-write-portal

Gustavo 'Gus' Carreno

  • Hero Member
  • *****
  • Posts: 1112
  • Professional amateur ;-P
Re: How to display coloured emojis on Windows?
« Reply #4 on: September 25, 2021, 04:28:31 pm »
Hey Martin,

The "old" API does not support this according to my google searches. So functions like TextOutA / TextOutW (Afaik used by the LCL) will not do the trick.

That's a bummer :(

https://stackoverflow.com/questions/46892844/gdi-can-i-use-the-new-windows-10-segoe-ui-emoji-colored-font-with-drawtext
The answer seems to lead to this: https://docs.microsoft.com/en-us/windows/win32/directwrite/direct-write-portal

This looks quite more complicated than just drop some TLabels on a TFlowPanel...

Is there anything in laz-main that I can look at that uses this new approach?

And, Martin, THANK you SOOOO very much for doing the leg work, I really appreciate it :) really I DO!!

Well, if all else fails, the place I'm extracting the data for these lists has a *.png file that illustrates an example.
So a solid plan B would be to use TImages on the TFlowPanel instead of the current TLabels when it comes to Windows.

It's a pity that Windows always has to be de odd one out :(

Cheers,
Gus
Lazarus 3.99(main) FPC 3.3.1(main) Ubuntu 23.10 64b Dark Theme
Lazarus 3.0.0(stable) FPC 3.2.2(stable) Ubuntu 23.10 64b Dark Theme
http://github.com/gcarreno

Jurassic Pork

  • Hero Member
  • *****
  • Posts: 1228
Re: How to display coloured emojis on Windows?
« Reply #5 on: September 27, 2021, 02:13:19 pm »
hello,
on windows, webbrowsers can display colored emojis, so here is two possibilities.
1 -  Generate html code to display the emojis which you want :
Code: Pascal  [Select][+][-]
  1.   s:= TStringList.Create;
  2.   htmlString := '<!DOCTYPE html><html lang="en">' +
  3.                 '<head><meta charset="UTF-8"></head>' +
  4.                 '<body><p style="font-size:32px;font-family: segoe ui emoji;">';
  5.  
  6.   For index := 0 to 79 do
  7.     htmlString += '<span id =' + inttostr(index) + '>&#' + IntToStr($1F600 + index) + ';</span>';
  8.   htmlString += '</p></body></html>';
  9.   s.add(htmlString);
  10.   s.SaveToFile('D:\temp\emojis.html');
  11.   s.Free;                            
Attention displayed code is wrong :
Quote
   '>&#38;#'  ->  '>&#'
then two possibilities  :
1 - Display the page in Lazarus with a webbrowser Activex (IE).
2 - Launch chrome with selenium in Lazarus then get all the span elements. Take a screenshot of each element. Put the bitmap in a TimageList. Then Display the imageList in a TListView.
see the result in Attachment.
Friendly, J.P
« Last Edit: September 27, 2021, 02:22:45 pm by Jurassic Pork »
Jurassic computer : Sinclair ZX81 - Zilog Z80A à 3,25 MHz - RAM 1 Ko - ROM 8 Ko

engkin

  • Hero Member
  • *****
  • Posts: 3112
Re: How to display coloured emojis on Windows?
« Reply #6 on: September 27, 2021, 04:25:49 pm »
I think the browser uses FreeType?

Gustavo 'Gus' Carreno

  • Hero Member
  • *****
  • Posts: 1112
  • Professional amateur ;-P
Re: How to display coloured emojis on Windows?
« Reply #7 on: September 27, 2021, 07:04:43 pm »
Hey J.P.,

Thank you very much for the effort in getting it to work with ActiveX Internet Explorer, it looks FAB!!

My main goal is to not have any dependencies on external stuff, including ActiveX or the bloatware of an external Browser Engine.

As I've mentioned before, the source I'm extracting from(https://unicode.org/emoji/charts/emoji-list.html) already has the images embedded in base64 PNGs.
If I can't solve this with just a font change or messing about with the TextOut(A/W) to use DirectWrite, like @Martin_fr suggested, I'll just include the samples on the data I'm extracting and use the PNGs.

Nonetheless, I thank you VERY much for the effort you made :)

Cheers,
Gus
Lazarus 3.99(main) FPC 3.3.1(main) Ubuntu 23.10 64b Dark Theme
Lazarus 3.0.0(stable) FPC 3.2.2(stable) Ubuntu 23.10 64b Dark Theme
http://github.com/gcarreno

Gustavo 'Gus' Carreno

  • Hero Member
  • *****
  • Posts: 1112
  • Professional amateur ;-P
Re: How to display coloured emojis on Windows?
« Reply #8 on: September 27, 2021, 07:08:29 pm »
Hey Engkin,

I think the browser uses FreeType?

I'm a complete noob in terms of Fonts/UTF8 and Graphics in general, so I have a noob question:

Isn't FreeType a Font Format, or a list of fonts in an accepted font format that is free and without royalties?

If so, how do I make sure I'm selecting a FreeType font on Windows?
Does Windows even have ANY FreeType font installed by default?

Thanks for the suggestion, but being a noob, it posed more questions than it solved, sorry Engkin :)

Cheers,
Gus
Lazarus 3.99(main) FPC 3.3.1(main) Ubuntu 23.10 64b Dark Theme
Lazarus 3.0.0(stable) FPC 3.2.2(stable) Ubuntu 23.10 64b Dark Theme
http://github.com/gcarreno

dsiders

  • Hero Member
  • *****
  • Posts: 1052
Re: How to display coloured emojis on Windows?
« Reply #9 on: September 27, 2021, 07:12:56 pm »
Hey Engkin,

I think the browser uses FreeType?

I'm a complete noob in terms of Fonts/UTF8 and Graphics in general, so I have a noob question:

Isn't FreeType a Font Format, or a list of fonts in an accepted font format that is free and without royalties?

If so, how do I make sure I'm selecting a FreeType font on Windows?
Does Windows even have ANY FreeType font installed by default?

Thanks for the suggestion, but being a noob, it posed more questions than it solved, sorry Engkin :)

Cheers,
Gus

What is FreeType?
https://www.freetype.org/freetype2/docs/index.html
Preview Lazarus 3.99 documentation at: https://dsiders.gitlab.io/lazdocsnext

wp

  • Hero Member
  • *****
  • Posts: 11858
Re: How to display coloured emojis on Windows?
« Reply #10 on: September 27, 2021, 07:30:36 pm »
Have a look at the demo in folder examples/lazfreetype. It shows how fonts can be rendered by a Lazarus program bypassing the system font machinery.

I had already tried to display an emoji with this program but was not successful since I am an emoji noob and don't know neither emoji codes nor complete fonts which contain emojis.

winni

  • Hero Member
  • *****
  • Posts: 3197
Re: How to display coloured emojis on Windows?
« Reply #11 on: September 27, 2021, 07:37:11 pm »

......nor complete fonts which contain emojis.

Hi!

Use the Liberation Fonts: Sans/Serif/Mono
They contain emojis.

Download here:

https://github.com/liberationfonts/liberation-fonts


Winni

Gustavo 'Gus' Carreno

  • Hero Member
  • *****
  • Posts: 1112
  • Professional amateur ;-P
Re: How to display coloured emojis on Windows?
« Reply #12 on: September 27, 2021, 08:02:15 pm »
Hey dsiders,

What is FreeType?
https://www.freetype.org/freetype2/docs/index.html

Thank you very much for the link!!
I'll have a read just to pad my knowledge of this matter, which is very lacking I must admit :(

Cheers,
Gus
Lazarus 3.99(main) FPC 3.3.1(main) Ubuntu 23.10 64b Dark Theme
Lazarus 3.0.0(stable) FPC 3.2.2(stable) Ubuntu 23.10 64b Dark Theme
http://github.com/gcarreno

Gustavo 'Gus' Carreno

  • Hero Member
  • *****
  • Posts: 1112
  • Professional amateur ;-P
Re: How to display coloured emojis on Windows?
« Reply #13 on: September 27, 2021, 08:19:28 pm »
Hey WP,

Have a look at the demo in folder examples/lazfreetype. It shows how fonts can be rendered by a Lazarus program bypassing the system font machinery.

Thank you SOOOO very much for this!!!!
I haven't had a look at the code, I just ran it to see what it can do and my head exploded on the speed of it!!!
Now I need to have a look at the code and see if I can make the coloured emojis to come out on a Windows program.
If this is the solution, as usual, WP, YOU DA MAN :hugs:

I had already tried to display an emoji with this program but was not successful since I am an emoji noob and don't know neither emoji codes nor complete fonts which contain emojis.

Welcome to the club ;)
I'm just crawling from the primordial ooze myself, LOL ;)

Cheers,
Gus
Lazarus 3.99(main) FPC 3.3.1(main) Ubuntu 23.10 64b Dark Theme
Lazarus 3.0.0(stable) FPC 3.2.2(stable) Ubuntu 23.10 64b Dark Theme
http://github.com/gcarreno

Gustavo 'Gus' Carreno

  • Hero Member
  • *****
  • Posts: 1112
  • Professional amateur ;-P
Re: How to display coloured emojis on Windows?
« Reply #14 on: September 27, 2021, 08:23:46 pm »
Hey Winni,

Use the Liberation Fonts: Sans/Serif/Mono
They contain emojis.

Download here:
https://github.com/liberationfonts/liberation-fonts


Thanks mate, I'll have a good look at those!!

This then, ofc, gets me into the how-do-I-use-a-font-without-installing-it territory of things.
Well, for the regular TextOut on the LCL, cuz if I use the code @WP suggested from the FreeType example, I just need to include the file and some kind of LICENSE file...

Nonetheless, thanks for giving me a font file that, for sure, has emojis!!

Cheers,
Gus
Lazarus 3.99(main) FPC 3.3.1(main) Ubuntu 23.10 64b Dark Theme
Lazarus 3.0.0(stable) FPC 3.2.2(stable) Ubuntu 23.10 64b Dark Theme
http://github.com/gcarreno

 

TinyPortal © 2005-2018