Anzeige farbiger Emoji (unicode Zeichen) mit Segoe UI Emoji Schrift in Delphi

[MaBuSE]

Hallo,
seit 2013 gibt es die Möglichkeit in Windows die farbigen Emoji analog iPhone und Android auch unter Windows anzuzeigen.

Das wird mit einer mehrfarbigen Schrift namens "Segoe UI Emoji" ab Win 8.1 umgesetzt. (siehe https://www.typografie.info/3/artike...dows-81-emoji/ )

Wenn die Programme das unterstützen, dann wird es farbig angezeigt, wenn nicht, dann nur schwarzweiß.

Die besagten Emoji sind im Unicode ab U+1F30x zu finden.

In meinen Delphi Programmen (VCL) hab ich das noch nicht in Farbe hinbekommen. Unterstützt das Delphi? (Embarcadero hatte ja immerhin 5 Jahre Zeit das umzusetzen)

Es geht und z.B. folgende Emoji:
😍😀😊😜☹😐😅😎❤😘😂😃💋💖😋😭😇🙄💩🙈🙉🙊🔞
(diese sind ans Text nicht als Grafik eingebunden. Die Browser können also auch mehrfarbige "Segoe UI Emoji" Schrift anzeigen.)
Interesannterweise zeigen Chrome und Firefox diese Emoji in Farbe und der MS Internet Explorer 11 nur in schwarzweiß, obwohl diese Technologie mit dem Font von MS stammt 😊


Kennt jemand einen einfachen Weg diese auch in Delphi Programmen nicht nur schwarzweiß sondern auch bunt zu verwenden?

Vielen Dank
MaBuSE

[mkinzler]

Über Umweg HTML?

[MaBuSE]

Zitat:

Zitat von mkinzler (Beitrag 1405098)

Über Umweg HTML?

Selbst TWebBrowser zeigt sie nur schwarzweiß an

Hab schon fast alle Text Controlls ausprobiert. Edit, Memo, RichtEdit, TWebBrowser, cxMemo, ...

Der Editor selbst zeigt sie ja auch nur zweifarbig an.

[Der schöne Günther]

Die Windows-Schriftarten enthalten zwar die entsprechenden Farben und alles, aber ich sehe nicht einmal bei WPF Support dafür. UWPs klar, aber wenn dafür selbst in WPF Zusatz-Komponenten bemühen muss...

[MaBuSE]

Zitat:

Zitat von Der schöne Günther (Beitrag 1405102)

Die Windows-Schriftarten enthalten zwar die entsprechenden Farben und alles, aber ich sehe nicht einmal bei WPF Support dafür. UWPs klar, aber wenn dafür selbst in WPF Zusatz-Komponenten bemühen muss...

Word 2016 kann sie auch nur einfarbig anzeigen, das neue Word 365 kann es auch farbig.

[TiGü]

Die meisten Programme nutzen dafür wahrscheinlich sowas wie die Windows-Funktion ExtTextOut.
Dann wird das halt schwarz/weiß. So als wenn du du in Delphi ein Canvas.TextOut benutzt.
Der Microsoft Browser Edge und neue Word-Versionen werden vermutlich während der Anzeige das ersetzen/übermalen mit fertigen ClipArts/SVGs.

[KodeZwerg]

Wegen Windows 7 sehe ich leider keine emoji, was passiert denn bei "Font.Color := WasAnderes;" ?

[MaBuSE]

Zitat:

Zitat von TiGü (Beitrag 1405106)

Die meisten Programme nutzen dafür wahrscheinlich sowas wie die Windows-Funktion ExtTextOut.
Dann wird das halt schwarz/weiß. So als wenn du du in Delphi ein Canvas.TextOut benutzt.
Der Microsoft Browser Edge und neue Word-Versionen werden vermutlich während der Anzeige das ersetzen/übermalen mit fertigen ClipArts/SVGs.

Genau das sollten sie nicht tun. Die einzelnen Layer und Farben sind als Vectordaten im Font hinterlegt.

Zitat:

Zitat von https://www.typografie.info/3/Schrif...ui-emoji-r154/

Der Font ist im Grunde ein herkömmlicher TrueType-basierte Font mit einfarbigen Zeichen. Er verfügt jedoch über zwei zusätzliche Tabellen (COLR/CPAL), die jedem einfarbigen Grundzeichen eine alternative Darstellung über mehrere farbige Ebenen zuweisen. Sofern das Anwendungsprogramm diese Darstellung unterstützt, kann statt der einfarbigen Darstellung des Grundzeichens auf die farbige Darstellung umgeschaltet werden. Auch die dabei zu verwendende Farbpalette ist im Font hinterlegt.

[MaBuSE]

Zitat:

Zitat von KodeZwerg (Beitrag 1405107)

Wegen Windows 7 sehe ich leider keine emoji, was passiert denn bei "Font.Color := WasAnderes;" ?

Mit

Delphi-Quellcode:

Font.Color := clRed;

kannst Du fest legen, das die ganze Schrift in Rot dargestellt wird.
Die Emoji sind aber ein Zeichen, das mit mehreren verschiedenen Farben gezeichnet wird.

Und die Schrift "Segoe UI Emoji" wird ab Win8.1 mitgeliefert.
Bzw. die Emoji Unterstützung.
Wenn ich es richtig verstanden habe, wird automatisch das Emoji aus der Segoe UI Emoj Schrift angezeigt, wenn die ausgewählte Schrift keine eigenen Emoji hat.

[EWeiss]

sorry will das mal testen wo kann man den laden ?
Den farbigen Font!

gruss

[MaBuSE]

Zitat:

Zitat von EWeiss (Beitrag 1405112)

sorry will das mal testen wo kann man den laden ?
Den farbigen Font!

gruss

Der ist ab Windows 8.1 Bestandteil von Windows ;)

Auf die Frage, wie gebe ich denn die Zeichen unter Windows 10 ein:

Rechtsklick auf die Taskbar, dann "Bildschirmtastatur anzeigen (Schaltfläche)" klicken und dann erscheint neben der Uhr eine kleine Tastatur (Icon)
Klick darauf und es geht die Bildschirmtastatur auf.
Links neben der Leertaste ist ein Smiley. -> Draufklicken ;)

Oder einfach per Copy & Paste. Ist ja normaler Text ;)

[EWeiss]

Zitat:

Der ist ab Windows 8.1 Bestandteil von Windows

Nun ich habe windows7

gruss

[MaBuSE]

Zitat:

Zitat von EWeiss (Beitrag 1405114)

Zitat:

Der ist ab Windows 8.1 Bestandteil von Windows

Nun ich habe windows7

gruss

Update auf Windows 10 ? :lol:

Hier ist noch was interesanntes zum Thema von MS.
https://msdn.microsoft.com/en-us/lib...(v=vs.85).aspx

Aber ich hatte ja die Hoffnung, das das Delphi schon kann und man es nur einschalten muss.

[KodeZwerg]

Vielleicht kann ein Umweg über ein Bild da helfen?
using fonts as images in delphi 7

Zitat:

Delphi-Quellcode:

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;

Links I look:
https://support.microsoft.com/en-us/...size-of-a-font
http://www.fontcubes.com/Chess-7.font
http://mip.noekeon.org/HTMLTTChess/c...a_unicode.html

[EWeiss]

Zitat:

Update auf Windows 10 ?

Vergiss es.. ok muss nicht sein mein Test.
Bin raus.

gruss

[Der schöne Günther]

Zitat:

Zitat von MaBuSE (Beitrag 1405113)

Auf die Frage, wie gebe ich denn die Zeichen unter Windows 10 ein:

Seit Version 1803 kann man genauso gut [Win]+[Punkt] drücken


https://imgur.com/a/S4JfjFa


Anhang 49315

[MaBuSE]

Zitat:

Zitat von KodeZwerg (Beitrag 1405117)

Vielleicht kann ein Umweg über ein Bild da helfen?
using fonts as images in delphi 7

Zitat:

Delphi-Quellcode:

...

Links I look:
https://support.microsoft.com/en-us/...size-of-a-font
http://www.fontcubes.com/Chess-7.font
http://mip.noekeon.org/HTMLTTChess/c...a_unicode.html

Aber der Code ist doch auch nur einfarbig, oder?

[MaBuSE]

Zitat:

Zitat von Der schöne Günther (Beitrag 1405119)

Zitat:

Zitat von MaBuSE (Beitrag 1405113)

Auf die Frage, wie gebe ich denn die Zeichen unter Windows 10 ein:

Seit Version 1803 kann man genauso gut [Win]+[Punkt] drücken
https://imgur.com/a/S4JfjFa
Anhang 49315

Bei mir ergibt [Win]+[.] = "."

..... nur Punkte kein Dialog oder Popup :(

Hier meine Systeminfos:

[himitsu]

TStaticText kann das auch nicht?

Das ist das "echte" Text-Control von Windows, was Delphi-TLabel "optimaler" und auch Transparent darstellen soll. (über DrawText/TextOut auf dem Canvas des Parents)



Und TWebBrowser ist auch nur ein leicht abgespeckter Internet Explorer.

[Der schöne Günther]

Ja, 2016 gab es das noch nicht, erst seit Ende 2017, Anfang 2018. Mehr Info


Aber auch in vielen anderen Bereichen wie das "Ausführen..."-Dialog, Notepad oder was auch immer - Hier sind die Emojis alle farblos.


Ich frage mich wie die Browser das machen, die sind ja keine UWPs...

[KodeZwerg]

Delphi-Quellcode:

function CharToBitmap(sFontName: String; c: WideChar; cBackColor, cFontColor, cOutlineColor: TColor;
  OutlineSize: Integer; bmp: TBitmap): Boolean;

:idea: cBackColor, cFontColor, cOutlineColor steuern die Farbe, nur eine Vermutung. Wie die Darstellung mit Deiner Font wird, einfach mal testen, was soll schon schiefgehn. In dem Example wurden Schachfiguren als Font-Zeichen hinterlegt und User brauchte diese Zeichen als Bild.

[himitsu]

Du brauchst andere APIs, um solche Fonts zu zeichnen.
DrawText/TextOut des GDI+ scheint nicht zu reichen.
https://msdn.microsoft.com/en-us/lib...(v=vs.85).aspx

Versuch es mal mit FireMonkey :stupid:

[MaBuSE]

Zitat:

Zitat von himitsu (Beitrag 1405125)

Du brauchst andere APIs, um solche Fonts zu zeichnen.
DrawText/TextOut des GDI+ scheint nicht zu reichen.
https://msdn.microsoft.com/en-us/lib...(v=vs.85).aspx

Den Link hab ich ja auch schon gepostet ;)

[himitsu]

Neeeee. Stimmt nicht. :oops:


Bildschirmtastatur: Da muß man auch aufpassen, denn seit Windows 8 gibt es zwei davon und nur die Eine kann es.

[EWeiss]

Zitat:

Zitat von himitsu (Beitrag 1405125)

Du brauchst andere APIs, um solche Fonts zu zeichnen.
DrawText/TextOut des GDI+ scheint nicht zu reichen.
https://msdn.microsoft.com/en-us/lib...(v=vs.85).aspx

Versuch es mal mit FireMonkey :stupid:

Wenn du das sagst..
Was glaubst was das hier ist? Genau Fonts mit GDI+
oops .. war ja schon raus.

gruss

[KodeZwerg]

Zitat:

Zitat von EWeiss (Beitrag 1405128)

Was glaubst was das hier ist?

Das eine ist Obama das andere weiß ich nicht:lol:

[EWeiss]

Zitat:

Zitat von KodeZwerg (Beitrag 1405129)

Zitat:

Zitat von EWeiss (Beitrag 1405128)

Was glaubst was das hier ist?

Das eine ist Obama das andere weiß ich nicht:lol:

Ja, ja du weist schon das es Fonts sind oder.. aber ich verstehe dich du Schelm.
Ich habe um den Font gebeten wenn man ihn mir nicht gibt nun dann muss er sich selber helfen.
Mit Antworten migriere zu Win10 kann ich nichts anfangen.
Das war's.

gruss

[Redeemer]

Zitat:

Zitat von EWeiss (Beitrag 1405128)

Zitat:

Zitat von himitsu (Beitrag 1405125)

Du brauchst andere APIs, um solche Fonts zu zeichnen.
DrawText/TextOut des GDI+ scheint nicht zu reichen.
https://msdn.microsoft.com/en-us/lib...(v=vs.85).aspx

Versuch es mal mit FireMonkey :stupid:

Wenn du das sagst..
Was glaubst was das hier ist?

Ein einfarbiger Font? Bitte beim Thema bleiben.

Zitat:

Zitat von EWeiss (Beitrag 1405112)

sorry will das mal testen wo kann man den laden ?
Den farbigen Font!

"Das MS Paint von Windows 10 ist ziemlich cool. Ich wollte das auf meinem Windows-95-Rechner verwenden und habe mspaint.exe kopiert, aber das geht nicht. Wieso???"

[API]

Zitat:

Zitat von EWeiss (Beitrag 1405130)

Zitat:

Zitat von KodeZwerg (Beitrag 1405129)

Zitat:

Zitat von EWeiss (Beitrag 1405128)

Was glaubst was das hier ist?

Das eine ist Obama das andere weiß ich nicht:lol:

Ich habe um den Font gebeten wenn man ihn mir nicht gibt nun dann muss er sich selber helfen.
gruss

Selbst wenn man die Schrift "Segoe UI Emoji" unter Windows 7 nachinstalliert, werden die Smileys immer noch nicht farbig angezeigt.

https://de.wikipedia.org/wiki/Unicodeblock_Smileys

[EWeiss]

Zitat:

Zitat von API (Beitrag 1405135)

Zitat:

Zitat von EWeiss (Beitrag 1405130)

Zitat:

Zitat von KodeZwerg (Beitrag 1405129)

Zitat:

Zitat von EWeiss (Beitrag 1405128)

Was glaubst was das hier ist?

Das eine ist Obama das andere weiß ich nicht:lol:

Ich habe um den Font gebeten wenn man ihn mir nicht gibt nun dann muss er sich selber helfen.
gruss

Selbst wenn man die Schrift "Segoe UI Emoji" unter Windows 7 nachinstalliert, werden die Smileys immer noch nicht farbig angezeigt.

https://de.wikipedia.org/wiki/Unicodeblock_Smileys

Müssen sie auch nicht ich kann sie selber einfärben wie du in meinem Shot ersehen kannst.
Diese Schrift ist auch nur schwarz - weiß
Darauf wollte ich hinaus.

gruss

[TiGü]

Dftt! 🤔🤗🙄

[Der schöne Günther]

Vielleicht wird das ja noch eines Tages nachgerüstet. In UWP-Anwendungen ist es trivial. Aber 3rd-Party-Browser können es ja auch, wenn auch nicht überall. Ich frage mich wie die das machen...

[Redeemer]

Zitat:

Zitat von Der schöne Günther (Beitrag 1405138)

Vielleicht wird das ja noch eines Tages nachgerüstet. In UWP-Anwendungen ist es trivial. Aber 3rd-Party-Browser können es ja auch, wenn auch nicht überall. Ich frage mich wie die das machen...

Die liefern die Smileys mit, ich denke mal als SVG. Wenn du 2623 SVG-Dateien mitliefern willst - nur zu.

[Uwe Raabe]

Zitat:

Zitat von MaBuSE (Beitrag 1405116)

Aber ich hatte ja die Hoffnung, das das Delphi schon kann und man es nur einschalten muss.

So ganz aus dem Stand noch nicht, aber wenn man die

Delphi-Quellcode:

TDirect2DCanvas

ableitet und

Delphi-Quellcode:

TextOut

geringfügig modifiziert:

[Uwe Raabe]

Hier noch der Quelltext der Form-Unit:

Delphi-Quellcode:

unit Unit299;

interface

uses
  Vcl.Forms;

type
  TForm299 = class(TForm)
    procedure FormPaint(Sender: TObject);
  public
  end;

var
  Form299: TForm299;

implementation

uses
  Winapi.D2D1,
  System.Win.ComObj,
  Vcl.Graphics, Vcl.Direct2D;

{$R *.dfm}

type
  TMyCanvas = class(TDirect2DCanvas)
  public
    procedure TextOut(X, Y: Integer; const Text: string); override;
  end;

procedure TMyCanvas.TextOut(X, Y: Integer; const Text: string);
var
  TextRange: TDwriteTextRange;
  TextLayout: IDWriteTextLayout;
  TextMetrics: TDWriteTextMetrics;
begin
  OleCheck(DWriteFactory.CreateTextLayout(PWideChar(Text), Length(Text),
    Font.Handle, 0, 0, TextLayout));
  TextRange.startPosition := 0;
  TextRange.length := Length(Text);
  if fsUnderline in Font.Style then
    TextLayout.SetUnderline(True, TextRange);

  if fsStrikeOut in Font.Style then
    TextLayout.SetStrikethrough(True, TextRange);

  TextLayout.SetWordWrapping(DWRITE_WORD_WRAPPING_NO_WRAP);

  RequiredState([csHandleValid,  csFontValid, csBrushValid]);
  if Brush.Style <> bsClear then
  begin
    TextLayout.GetMetrics(TextMetrics);
    RenderTarget.FillRectangle(D2D1RectF(X, Y,
      X+TextMetrics.widthIncludingTrailingWhitespace,
      Y+TextMetrics.height), Brush.Handle);
  end;

  RenderTarget.DrawTextLayout(D2D1PointF(x-0.5, y-0.5), TextLayout,
    Font.Brush.Handle, 4);
end;

procedure TForm299.FormPaint(Sender: TObject);
var
  FD2DCanvas: TDirect2DCanvas;
begin
  FD2DCanvas := TMyCanvas.Create(Canvas.Handle, ClientRect);
  try
    FD2DCanvas.BeginDraw;
    FD2DCanvas.TextOut(10, 10, '&#128525;&#128512;&#128522;&#128540;&#9785;&#128528;&#128517;&#128526;&#10084;&#128536;&#128514;&#128515;&#128139;&#128150;&#128523;&#128557;&#128519;&#128580;&#128169;&#128584;&#128585;&#128586;&#128286;');
    FD2DCanvas.EndDraw;
  finally
    FD2DCanvas.Free;
  end;
end;

end.

[EWeiss]

@Uwe.. Kurz und knapp :thumb::thumb::thumb: verdient.
Das musste jetzt sein.

gruss

[KodeZwerg]

Ich bekomme Uwes Code nicht zum laufen, auch forciert per Knopf nicht.
Es ensteht nur ein weißes leeres Rechteck.
Windows: 7
Delphi: Tokyo 10.2.3
Text: die Unicode zeichen hab ich mit für mich lesbaren Text ersetzt ("Hallo Welt!")
Brush.Style: solid forciert
Font.Color: black forciert
Window Hintergrund: blue (damit ich überhaupt bemerke das was gemalt wurde)

[EWeiss]

Zitat:

Zitat von KodeZwerg (Beitrag 1405161)

Ich bekomme Uwes Code nicht zum laufen, auch forciert per Knopf nicht.
Es ensteht nur ein weißes leeres Rechteck.
Windows: 7
Delphi: Tokyo 10.2.3
Text: die Unicode zeichen hab ich mit für mich lesbaren Text ersetzt ("Hallo Welt!")
Brush.Style: solid forciert
Font.Color: black forciert
Window Hintergrund: blue (damit ich überhaupt bemerke das was gemalt wurde)

Das sollte normal sein.. Oder?
Windows 7 unterstützt keine Farbigen Fonts und erzwingen kannst du da gar nichts.

Verwende W10 oder mindestens W8.1 dann geht's.

gruss

[KodeZwerg]

Und wo in Uwes Code geht hervor das eine Windows 8.1 aufwärts Font geladen und benutzt wird?
Oder bzw welcher Code-Teil ist Windows 8.1+ exclusive?
Ich habe Font Segio UI, ob die diese Zeichen hat weiß ich nicht, ich wollte es testen dazu aber generell den Code erstmal zum laufen bringen.

[EWeiss]

Zitat:

Zitat von KodeZwerg (Beitrag 1405165)

Und wo in Uwes Code geht hervor das eine Windows 8.1 aufwärts Font geladen und benutzt wird?
Oder bzw welcher Code-Teil ist Windows 8.1+ exclusive?
Ich habe Font Segio UI, ob die diese Zeichen hat weiß ich nicht, ich wollte es testen dazu aber generell den Code erstmal zum laufen bringen.

Sorry lasse dir das von anderen erklären es ist so wie ich sagte!
Win7 vergiss es.

gruss