Delphi / Windows 7 / ColorFonts like Emoji

[KodeZwerg]

Hi there,
i could need some coding advice for this problem:
I would like to program an Application that also shows Emoji like used on this Web-Site or WhatsApps or or or, hopefully you know what i mean.

My Problem is native those Fonts are supported by Windows 8.1 or higher (Segoe UI Emoji).
Example: 😱 🤡 👨 👩 🙈 🙉 🙊 🌈 💘 💖 🔞 🇩🇪 👍 🤘

All Windows 8.1+ will display proper Emoji while Windows 7 shows empty rectangle.
If you use Firefox, those Emojis will be rendered on any Machine.

So my question is: How does FireFox render a Font while Delphi cant (or Browsers Opera/IE)

Quick'n'Dirty i solved this by implementing proper Bitmaps, my Goal would be using Unicode ColorFonts.

[ConstanceJill]

So my question is: How does FireFox render a Font while Delphi cant (or Browsers Opera/IE)

That would be because webpages can provide the font by hosting it somewhere and giving the path to download it from via .css : see https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Now there probably is a way to embed the font in your application too, as I remember there was a way to do it for graphic modes with Turbo Pascal back then.

[MilesAhead]

So my question is: How does FireFox render a Font while Delphi cant (or Browsers Opera/IE)

That would be because webpages can provide the font by hosting it somewhere and giving the path to download it from via .css : see https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Now there probably is a way to embed the font in your application too, as I remember there was a way to do it for graphic modes with Turbo Pascal back then.

I stopped coding with Delphi at version 5 Pro.  But I think it must still be possible to create a "resource only" DLL with fonts,bitmaps,strings etc. and load it when the program runs.  The OP may have to check with the font maker if it is OK to redistribute the fonts in a DLL with the program.

[KodeZwerg]

Sorry if i spelled question wrong.

I have already the Font. I am able to attach to that Font. I can show Text with that Font. What doesnt function yet is the part when i try show ColorFonts (like a smiley: yellow skin, white eyes, red lips, black outline).

When i try dispay such it end up with empty space or in bad cases with a transparent rectangle with black border.
After reading MSDN i know that its restricted to Windows 8.1 or higher.

My .exe will work on Windows 8.1, display everything like expected (Direct2d/Win2d used to do it), Windows 7 = white space
What makes me wuzzy is that FireFox can display and i am not able to do, equal how tricky i try.

I am pretty sure i can apopt Code from non-Delphi, i just mentioned it cause i use it  so if someone has an Idea, please feed me 

[wraith808]

Sorry if i spelled question wrong.

I have already the Font. I am able to attach to that Font. I can show Text with that Font. What doesnt function yet is the part when i try show ColorFonts (like a smiley: yellow skin, white eyes, red lips, black outline).

When i try dispay such it end up with empty space or in bad cases with a transparent rectangle with black border.
After reading MSDN i know that its restricted to Windows 8.1 or higher.

My .exe will work on Windows 8.1, display everything like expected (Direct2d/Win2d used to do it), Windows 7 = white space
What makes me wuzzy is that FireFox can display and i am not able to do, equal how tricky i try.

I am pretty sure i can apopt Code from non-Delphi, i just mentioned it cause i use it  so if someone has an Idea, please feed me 

Does Delphi show the font in the list of fonts in the property editor?

[KodeZwerg]

Does Delphi show the font in the list of fonts in the property editor?

In short, yes.

Some news update: I am now able to render the emojis correct but Color is missing, look:
What i found out is that Font uses Vector-Data to fill painted parts, maby i get it somehow working.

edit
More news, found out that FireFox uses own Library to render Fonts (cairo)..... I'm on it :-)

[wraith808]

Just to be clear, I wasn't asking from an I don't know what Delphi is perspective, but from the perspective of someone that worked in it for years before jumping to C#, so I was just asking if it was in the list of fonts. 

[KodeZwerg]

Just to be clear, I wasn't asking from an I don't know what Delphi is perspective, but from the perspective of someone that worked in it for years before jumping to C#, so I was just asking if it was in the list of fonts. 

I am sorry if my "In short, yes" reply was rude or did not satisfy. Please give me another chance to answer question more detailed.

Dear wraith808,
thank you for reading, your interest and try to help. Yes my Delphi show up the Emoji Font in Property Editor but cant handle its content correct.
Now i am able to do things with Font like Windows charmap.exe does. (limited/restricted to colorless mode only [black/white])

[wraith808]

No offense taken   Just thought it might be good to give the perspective from which I was asking.  Are you using a standard text control to show it?

Also, if you that's what you're doing, you might try to draw the font on a TCanvas, and see how that turns out, i.e.

Code: ( delphi)

procedure WriteTextOnImage(imgResult: TImage, strTextToOutput: string);
var
    bmpText: TBitmap;
begin
     bmpText:= TBitmap.Create;
     try
        bmpText.Canvas.Font := <FontName>
        bmpText.Canvas.TextOut(X, Y, textToOutput);
        imgResult.Picture.Assign(bmpText);
     finally
        FreeAndNil(bmpText);
     end;
 end;

(Keep in mind, it's been many moons since I touched Delphi, so forgive any errors, but the theory should work)

[KodeZwerg]

Thank you wraith808, code looks after that many moons quit good!
My bad, i should have written already what i've tried, i've used this method to do Bitmap thingy like you suggested.

Code: ( delphi)

const
   CHESS_WHITE_QUEEN = #$2654;
   CHESS_WHITE_KING = #$2655;
   CHESS_WHITE_ROOK = #$2656;
   CHESS_WHITE_BISHOP = #$2657;
   CHESS_WHITE_KNIGHT = #$2658;
   CHESS_WHITE_PAWN = #$2659;

   CHESS_BLACK_QUEEN = #$265A;
   CHESS_BLACK_KING = #$265B;
   CHESS_BLACK_ROOK = #$265C;
   CHESS_BLACK_BISHOP = #$265D;
   CHESS_BLACK_KNIGHT = #$265E;
   CHESS_BLACK_PAWN = #$265F;

function CharToBitmap(sFontName: String; c: WideChar; cBackColor, cFontColor, cOutlineColor: TColor;
  OutlineSize: Integer; bmp: TBitmap): Boolean;
var
  r: TRect;
  OtmSize: Integer;
  pTm: POutlineTextMetric;
  LogFont: TLogFont;
begin
  Result := False;

  //destination rect
  r := Rect(0, 0, bmp.Width, bmp.Height);

  //set new font
  bmp.Canvas.Font.Name := sFontName;
  bmp.Canvas.Font.Style := [fsBold];
  bmp.Canvas.Font.Size := 10;

  //fill background
  bmp.Canvas.Brush.color := cBackColor;
  bmp.Canvas.FillRect(r);

  //get font metrics
  OtmSize := GetOutlineTextMetrics(bmp.Canvas.Handle, SizeOf(TOutlineTextMetric), nil);
  if OtmSize > 0 then
  begin
    //reserve memory
    GetMem(pTm, OtmSize);
    try
      pTm^.otmSize := OtmSize; //set size

      if GetOutlineTextMetrics(bmp.Canvas.Handle, OtmSize, pTm) <> 0 then
      begin
        //fill whole height
        bmp.Canvas.Font.Height := - bmp.Height;

        BeginPath(bmp.Canvas.handle);

        SetBKMode(bmp.Canvas.Handle, TRANSPARENT);

        DrawTextW(bmp.canvas.handle, @c, 1, r, DT_SINGLELINE or
          DT_CENTER or DT_VCENTER);

        EndPath(bmp.Canvas.handle);
        bmp.Canvas.Brush.color := cFontColor;
        bmp.Canvas.pen.color := cOutlineColor;
        bmp.Canvas.pen.width := OutlineSize;
        StrokeAndFillPath(bmp.Canvas.Handle);

        Result := True;
      end;
    finally
      FreeMem(pTm);
    end;
  end;
end;

procedure TForm1.Button4Click(Sender: TObject);
var
  bmp: TBitmap;
begin
  bmp := TBitmap.create;
  try
    bmp.width := 100;
    bmp.height := 100;
    //white piece
    CharToBitmap('Chess Merida Unicode', CHESS_WHITE_BISHOP,
      clGreen,
      clBlack,
      clWhite,
      bmp.height div 80,
      bmp);
  Image1.Picture.Assign(bmp);

    //black piece
    CharToBitmap('Chess Merida Unicode', CHESS_BLACK_KING,
      clGreen,
      clBlack,
      clWhite,
      bmp.height div 80,
      bmp);

    Image2.Picture.Assign(bmp);
  finally
    bmp.Free;
  end;
end;

That code would grab a chess figure out of a font file and render it to a bitmap. Adopted to my Emoji problem it result in B/W images (if at all... somehow buggy)
I guess that what i want to do isnt that easy at all
FireFox lead my way to his cairo library wich lead to GTK+ wich lead to more sub-stuff.
For Windows 8.1 i have working code that draws everything like it should be (utilizing Direct2D) but prior Windows Version simply ignore it. MSDN writes same about ColorFonts.

[KodeZwerg]

Are you using a standard text control to show it?

I've forgot to answer that, here we go:
I try to display "colored" either as Text via Edit/Memo or as Bitmap inside Text/Memo. For Bitmap testing i am using an Image control.

I think i have found a solution = Cairo Delphi Api Wrapper
Unfortunately its Download is currently..... lets say the Website has a PHP problem :-)

edit
PHP problem is fixed, download is up again. Lets see if i get it working......

[wraith808]

  That looks like a good resource to get Cairo working if standard rendering doesn't work.  Hope it works out!

[Zidankearney]

I think Delphi at version 5 Pro is now outdated.

[wraith808]

I think Delphi at version 5 Pro is now outdated.

The concepts that Miles was talking about transcend version, so I think we're OK with that. 

Welcome to the site!