doc/todo/smileys_should_support_Unicode_Emojis.mdwn

   1 Why are there graphic-based smileys at all, when Unicode supports most of them directly?
   2
   3 What Unicode doesn't support can be handled by FontAwesome or a little CSS.
   4
   5 Keeping font-based solutions to emojis allows them to scale naturally with the fonts. An emoji in the title becomes a different size than an emoji in paragraph, or an emoji in a subscript.
   6
   7 Here's a smileys.mdwn file that doesn't use any graphics at all:
   8
   9 <pre>
  10 This page is used to control what smileys are supported by the wiki.
  11 Just write the text of a smiley to display it.
  12
  13 * \\:)  [🙂]
  14 * \\:smile:     [🙂]
  15 * \\:-) [🙂]
  16 * \\:D  [😃]
  17 * \\:-D [😃]
  18 * \\:grin:      [😃]
  19 * \\B)  [😎]
  20 * \\B-) [😎]
  21 * \\:)) [😛]
  22 * \\:-))        [😛]
  23 * \\;)  [😉]
  24 * \\;-) [😉]
  25 * \\:\  [😕]
  26 * \\:-\ [😕]
  27 * \\:/  [😕]
  28 * \\:-/ [😕]
  29 * \\:|  [😐]
  30 * \\:-| [😐]
  31 * \\>:> [😈]
  32 * \\X-( [😡]
  33 * \\&lt;:(      [😧]
  34 * \\:(  [🙁]
  35 * \\:-( [🙁]
  36 * \\:-? [😝]
  37 * \\:-P [😝]
  38 * \\:o  [😱]
  39 * \\|)  [😪]
  40 * \\|-) [😪]
  41 * \\{OK}        [👍]
  42 * \\:+1:    [👍]
  43 * \\:-1:    [👎]
  44 * \\(/) [🚫]
  45 * \\{X} [🛑]
  46 * \\{i} [ℹ️]
  47 * \\(./)        [✔︎]
  48 * \\(!) [💡]
  49 * \\[!] [✋]
  50 * \\/!\ [⚠️]
  51 * \\(?) [❓]
  52 * \\(!?)        [⁉️]
  53 * \\{x} [☒]
  54 * \\{*} [☑︎]
  55 * \\{o} [☐]
  56 * \\{1} [<span class="priority-1">𝟙</span>]
  57 * \\{2} [<span class="priority-2">𝟚</span>]
  58 * \\{3} [<span class="priority-3">𝟛<span>]
  59
  60 For example: {x} B) {x} {3} :grin: :-1:
  61
  62 ----
  63
  64 To change the supported smileys, just edit the lists on this page.
  65 Note that the format is important; each list item should start with the
  66 text that is turned into the smiley, escaped so that users can see what
  67 produces it, followed by a [[ikiwiki/WikiLink]] to the image to display.
  68
  69 /!\ Bear in mind that the link to the image needs to be written in a way that
  70 will work if it's copied to other pages on the wiki. So be sure to include the
  71 smileys directory in the path to the file.
  72 </pre>
  73
  74 Here's the patch to smiley.pm:
  75
  76 <pre>
  77 --- smiley.pm.orig      2017-05-26 18:00:01.000000000 -0400
  78 +++ smiley.pm   2017-05-26 22:01:18.000000000 -0400
  79 @@ -33,17 +33,17 @@
  80                 return;
  81         }
  82         my $list=readfile($srcfile);
  83 -       while ($list =~ m/^\s*\*\s+\\\\([^\s]+)\s+\[\[([^]]+)\]\]/mg) {
  84 +       while ($list =~ m/^\s*\*\s+\\\\([^\s]+)\s+\[([^\]]+)\]/mg) {
  85                 my $smiley=$1;
  86 -               my $file=$2;
  87 +               my $value=$2;
  88
  89 -               $smileys{$smiley}=$file;
  90 +               $smileys{$smiley}=$value;
  91
  92                 # Add a version with < and > escaped, since they probably
  93                 # will be (by markdown) by the time the sanitize hook runs.
  94                 $smiley=~s/</&lt;/g;
  95                 $smiley=~s/>/&gt;/g;
  96 -               $smileys{$smiley}=$file;
  97 +               $smileys{$smiley}=$value;
  98         }
  99
 100         if (! %smileys) {
 101 @@ -94,10 +94,18 @@
 102                 }
 103                 else {
 104                         # Replace the smiley with its expanded value.
 105 -                       my $link=htmllink($params{page}, $params{destpage},
 106 -                                        $smileys{$smiley}, linktext => $smiley);
 107 -                       substr($_, $spos, length($smiley))=$link;
 108 -                       pos=$epos+length($link);
 109 +                       my $value = $smileys{$smiley};
 110 +                       my $replacement = "";
 111 +                       if ($value =~ /\[([^\]]*)/) {
 112 +                               $value=$1;
 113 +                               $replacement=htmllink($params{page}, $params{destpage},
 114 +                                                       $value, linktext => $smiley);
 115 +                       }
 116 +                       else {
 117 +                               $replacement=$value;
 118 +                       }
 119 +                       substr($_, $spos, length($smiley))=$replacement;
 120 +                       pos=$epos+length($replacement);
 121                 }
 122         }
 123
 124 </pre>
 125
 126 As you can see, it keeps the [] characters around the smiley. This can be useful if it renders to nothing in the browser -- particularly in the CSS-based solutions.
 127
 128 It keeps the same data structure, but images get a "[" prefix to them as a marker. Since I minimized the changes to the regex, the trailing "]" is still dropped.