️ ab in den Emoticon Mülleimer

Hannes Preishuber

Eigentlich steht hier im Blogbeitrag als erstes Zeichen ein Mülleimer ️. Weder in der Headline noch im Text ist der zu sehen. mit der [WIN] +[.] Tastenkombi kann man einen eigenen “Editor “ dazu laden und dann doch erfolgreich was einfügen.

Aber über Zwischenablage der Mülleimer- klappt nicht. Zu finden ️ Papierkorb Emoji (emojipedia.org). Liegt an der Blog Plattform.

Nun mache ich mit der Link by ppedv, dem neuen social Network, die Erfahrung, das Benutzer allerlei komische Ideen und Verhaltensweisen entwickeln. U.a nach einem Papierkorb in der Suche forschen.

Jeder kennt UTF-8 und das diese bis zu 4 Bytes benötigen. Weniger bekannt ist, das sich auch die Farbcodierung mit weiteren 3 Bytes  bemerkbar macht.

(U+1F5D1 U+FE0F) wird in UTF-8 als die Bytefolge F0 9F 97 91 EF B8 8F kodiert.
System.Net.WebUtility.UrlEncode kodiert diese Bytefolge in die prozentkodierte Darstellung %F0%9F%97%91%EF%B8%8F.

Im Detail

Der Unicode-Codepoint  ist U+1F5D1.
Der Unicode-Codepoint für das Variation Selector-16 (VS16), das zur Anzeige des Emojis in seiner farbigen Form verwendet wird, ist U+FE0F.
Diese beiden Codepoints müssen nun in UTF-8 kodiert werden:

U+1F5D1 () wird in UTF-8 in die Bytes 0xF0, 0x9F, 0x97, 0x91 kodiert.
U+FE0F (️) wird in UTF-8 in die Bytes 0xEF, 0xB8, 0x8F kodiert.
Wenn wir diese Bytes in die prozentkodierte Form umwandeln, erhalten wir:

0xF0 -> %F0
0x9F -> %9F
0x97 -> %97
0x91 -> %91
0xEF -> %EF
0xB8 -> %B8
0x8F -> %8F

Schreiten wir zum C# Code. Ein von mir präferiertes UX Pattern in Blazor ist, das eine Suche nach einem Begriff in einer List per eindeutiger Url nachvollziehbarnachvollziebar ist.

Dazu lege ich ein Form Element an, das auch per Enter Taste das Event auslöst.

   1:  @page "/m/{Eingabe}"

   2:  @inject NavigationManager NavigationManager

   3:  <form @onsubmit="UrlAnpassen">

   4:  <input @bind="Eingabe"/>

   5:  <button type="submit">submit</button>

   6:  </form>

Im C# Code wird das Event UrlAnpassen behandelt und die Url im Browser geändert.

   1:   [Parameter]

   2:   public string Eingabe { get; set; }

   3:   void UrlAnpassen()

   4:   {

   5:      NavigationManager.NavigateTo($"/m/{(Eingabe)}", false);

   6:   }

Überraschenderweise stimmt die Anzeige im Browser und wenn man das in die Zwischenablage kopiert ist es Codiert.

https://localhost:7232/m/%F0%9F%97%91

Eigentlich sollte man, laut Doku, sowas vorher durch einen Decoder jagen und da gibt's es wie so oft bei Microsoft mind sechs Möglichkeiten dafür. Drei davon werden empfohlen, aber nicht darauf hingewiesen wo der Unterschied ist,

NavigationManager.NavigateTo(
$"/m/{System.Net.WebUtility.UrlEncode(Eingabe)}", false)

NavigationManager.NavigateTo(
$"/m/{System.Web.HttpUtility.UrlEncode(Eingabe)}", false)

Quasi das gleiche Ergebnis nur mit Kleinbuchstaben https://localhost:7232/m/%f0%9f%97%91%ef%b8%8f

Dann kann man noch Escapen

NavigationManager.NavigateTo(
$"/m/{Uri.EscapeDataString(Eingabe)}", false);

Das ergibt Ergbnis #1 https://localhost:7232/m/%F0%9F%97%91%EF%B8%8F. Allerdings soll es langsamer sein.

Dann noch die spannende Frage: Kann man die Farbe entfernen? Im Debugger sieht man nur eine Zeichenkette “x”. Allerdings im Code klappt das

   1:   string papierkorb = "?"; //UTF_16

   2:   var x = System.Text.RegularExpressions.Regex.Replace
(papierkorb, @"\uFE0F", "");

Das Fragezeichen ist das Papierkorb Emoticon als Platzhalter, weil die Blogengine…

Update: Kollege ist so begeistert, das er gerade verschiedene Fälle durchprobiert. Familie wird doch glatt mit vier Personen Encodiert, Vater, Mutter, Tochter und Sohn. Das ist sowas von ewig gestrig

Edge

Auja und man kann auch im Emoji Keyboard zeitgeistig customizen, 2-4 Familienmitglieder und Hautfarbe und es wird entsprechend Codiert