Feature Request: Emoji - Githubissues

matabele commented 8 years ago

There's a promising set of icons here: http://getemoji.com/ -- most of which display in my environment (Chrome/OSX.)

I thought it might be worthwhile whittling this set down to one suitable for TW5. This would require testing of the set in various environments, then removing those which commonly don't display.

I have attached a zipped json file -- which can be imported directly into a wiki to facilitate the testing process. The current file (all emoji) is only 10kB when uncompressed (5kB zipped.)

pmario commented 8 years ago

IMO the problem here is, that you can't be sure, that everyone sees them. Depending on your device, language and TW font setting, there may be ugly blocks only. ...

I prefer svg icons. see: http://caniuse.com/#search=svg They are a little bit bigger, but most of the time can be highly optimized and CSS styled.

matabele commented 8 years ago

@pmario There are several advantages of this set: 😀 easy to use (copy & paste) 😀 put them anywhere 😀 in icons (that's what I want to use them for) 😀 in fields and indexes 😀 in lists, in fields and indexes 😀 even as a title; but not sure how to reference the tiddler 🙄 😀 small (about 10kB for the lot) 😀 can be resized and positioned with css

The downsides: 😞 not as pretty as emoji one 😞 can't be re-coloured with css (as far as I can see) 😞 might not display in some environments (although well supported)

They display well in my environment -- my feeling is that we should try and reduce this to a set that works for most people. I'll try these out in whatever environments I have -- but we need to check in all user environments. I have no clue about other languages, for example.

matabele commented 8 years ago

@pmario There's the classic set as well: http://classic.getemoji.com/ -- these show in B&W on older systems.

matabele commented 8 years ago

@pmario In svg -- there's the Twitter set: https://github.com/twitter/twemoji/tree/gh-pages/svg

View here: http://emojipedia.org/twitter/twemoji-2.0/

t5a commented 8 years ago

I think I read somewhere that eventually all emoji will display in all devices so why reduce the set?

Happy Connecting. Sent from my Sprint Samsung Galaxy S® 5

-------- Original message -------- From: William Jackson notifications@github.com Date: 01/27/2016 5:08 AM (GMT-07:00) To: Jermolene/TiddlyWiki5 TiddlyWiki5@noreply.github.com Subject: Re: [TiddlyWiki5] Feature Request: Emoji (#2256)

@pmario

In svg -- there's the Twitter set: https://github.com/twitter/twemoji/tree/gh-pages/svg

— Reply to this email directly or view it on GitHub.

matabele commented 8 years ago

@Infurnoape Seems that way -- and much greater support for 2016. They can now accept modifiers -- therefore, even tinting will soon be supported on many devices: http://blog.emojipedia.org/twemoji-2-0-emoji-changelog/

Perhaps, we should insert the full set, and users can choose those that are supported on their devices.

I really like the way they handle in TW5: -- can name a tag with one, and search using the emoji - like so: [tag[🎩]] -- and title a tiddler with one and transclude - like so: {{🎩!!field-name}} -- and list a number of emoji in a field/index and access them by index -- or title a tiddler with an emoji followed by text - like so: 🎩 My Tiddler Title

Really brings the appearance of a wiki to life.

pmario commented 8 years ago

small (about 10kB for the lot)

That's not true. You'll need a font on your device, that supports unicode with emojis. Those fonts have typically have several MByte. ...

if you have a closer look, how github did it ... They actually create html code like this.

<g-emoji alias="grinning" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f600.png">
  <img alt=":grinning:" title=":grinning:" class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f600.png" align="absmiddle" width="20" height="20">
</g-emoji>

That's for a reason. So even if you used unicode characters, the server provides rendered images ... Just to be sure, that it works.

matabele commented 8 years ago

@mario Yes -- but these don't have to be included in each wiki -- only the unicode references. One font set on your device only. Seems that many newer devices will come standard with the emoji font set.

pmario commented 8 years ago

My phone, as an example shows all of your emojis as black and white. So if you'd talk about colours, I'd just respond with: "Which colours"? .. As I wrote. ... it's nice, but probably too early for general usage.

matabele commented 8 years ago

@pmario In the utility I'm currently developing, I offer two options for users to choose from: -- a dropdown with any tiddler tagged $:/tags/Image (the existing svg's) -- and a dropdown offering any tiddler tagged $:/tags/Emoji (the new emoji)

On this score -- it seems that the 'icon' field of a tag tiddler accepts only a tiddler title, and transcludes the image in the 'text' field to the tag. This might be fine for svg's -- but is very wasteful of space for emoji.

Perhaps, the core code should be modified to accept a full TextReference in the 'icon' field. This would be fully backward compatible, and will allow emoji to be contained in fields and indexes (even in lists in fields and indexes.)

tobibeer commented 8 years ago

I think I read somewhere that eventually all emoji will display in all devices so why reduce the set?

To only use those that provide a given, defined minimal support... of course not catering for ie <9 or stuff like that.

As for testing, that can be somewhat automated I think... at least the bit generating screenshots for verification.

tobibeer commented 8 years ago

My phone, as an example shows all of your emojis as black and white. So if you'd talk about colours, I'd just respond with: "Which colours"? .. As I wrote. ... it's nice, but probably too early for general usage.

They don't need multicolor by default and that's pretty much not the point, imho. The point is that the device can display them through whichever font it supports these. If they are fancy icons or b/w... is up for the device... but that does not mean that we need to provide what devices do not provide, all the while leveraging the significant opportunities without bloating TiddlyWiki... not even with font-awesome.

It's not so much that we need a nice facing website-thingy but rather a given typography to make things more recognizable than plain text, err letters, it appears.

matabele commented 8 years ago

Test emoji on your device here: http://www.unicode.org/emoji/charts/emoji-style.html

CSS escape codes here: http://apps.timwhitlock.info/emoji/tables/unicode

Good idea of the most useful here: http://www.emojitracker.com/

sukima commented 8 years ago

FYI I've used UTF-8 emoji in TiddlyWiki just fine. What I don't get is GitHub style colon shortcuts:

Colon Syntax	Colon Syntax Output	HTML Entity	HTML output
`:smile:`	:smile:	`😃`	😃

tittlywikiemoji

tobibeer commented 8 years ago

Absolutely great stuff @sukima! And pretty useful. :+1:

Now, in view-mode, a popup would be great that lists all tiddlers with the emoji you just clicked. :dancer:

twMat commented 8 years ago

@sukima - that looks like an underused concept if only used for emojis.

Did you implement this in TW or is it some external thing?

Could it be made so to insert anything, such as wikitext and, particularly, "surrounding" stuff like tags or empty macrocalls, i.e so you just fill in the parameter arguments?

BTW, it reminds me of an editor that I posted (but can't find just now) about a year or two ago, where you selected your word and the editor popped up with menu showing optionsf for bold etc to apply.

matabele commented 8 years ago

@sukima Looks like just the job -- a utility like that with a whittled down set of emoji suitable for TW5. With the facility to put a list of favourites on top.

matabele commented 8 years ago

One place they don't seem to parse -- in a wikitext definition (I use these for paragraph titles.) So this won't render:

;😂 My Term :definition

Also, some of the emoji don't display in TW5, although they do in my browser -- must be parsing problems with particular emoji (normal smiley for example.)

tobibeer commented 8 years ago

You can always do:

; 😂 My Term
: definition

Notice the space.

matabele commented 8 years ago

Duh ... just found this on my Mac: http://blog.getemoji.com/emoji-keyboard-mac

matabele commented 8 years ago

Therefore, my ideas for TW5 support for emoji:

wikitext parser for the most commonly used emoji
documentation in tw5.com to explain their usage for 'tagging' tiddler titles (and other uses)
a new 'emoji' list field in front of the title to handle the emoji (the full title includes both 'emoji' and 'title' -- but maintains backward compatibility)
the 'icon' field needs to accept a TextReference, so that a tag icon can be a reference to a field/index (currently, I seem to have to insert the title of a tiddler containing the emoji in its text field -- or directly paste the emoji into the 'icon' field -- fine for the current svg tiddler icons, but wasteful for emoji.)
smaller tag pills for tags comprising only an emoji
I'm sure I'll think of more

P.S. just discovered I can put them in folder and file names also ... obvious really, just didn't occur to me.

tobibeer commented 8 years ago

Not sure I'd want a wikitext parser for them. Anyhow, I just realized that Windows 10 gives me this onscreen keyboard from the taskbar:

emoji

matabele commented 8 years ago

Now, when I try to insert an emoji directly into the 'icon' field -- it fails. In my last test I think I must have pasted a link to a tiddler into the field (thinking it was an emoji) -- and of course this worked (my emoji tiddlers have the emoji as both title and text.)

Looks to me, therefore, that one of the main features to support, is the direct pasting of an emoji into the 'icon' field. Perhaps, it would be possible to use the 'icon' field as part of the title in this way -- but that's going to cause problems when the title of an svg tiddler is put into the 'icon' field.

So no, looks like another 'emoji' field is required that forms part of the full title -- and displays as part of the title, both at the top of the view template, and in links, such as in the sidebar. This achieves much the same thing as when an emoji is inserted in front of the 'title field -- but I think a separate field would ease handling.

Perhaps, if the 'emoji' field forms part of the full title, then, when a tiddler is used as a tag tiddler, tags would also display the emoji. In other words, there would be two entirely separate mechanisms to add an icon to a tag (or use only an icon as tag.) Would certainly ease the problems of maintaining backward compatibility -- and would mean the 'icon' field could remain as is.

matabele commented 8 years ago

P.S. Forgot to mention -- a tag with an icon can be created by combining an emoji, or using only an emoji as a tag. This isn't the same as a tag with an icon -- this is a new tag (although it appears the same -- which can be confusing.)

tobibeer commented 8 years ago

Perhaps, if the 'emoji' field forms part of the full title, then, when a tiddler is used as a tag tiddler, tags would also display the emoji. In other words, there would be two entirely separate mechanisms to add an icon to a tag (or use only an icon as tag.) Would certainly ease the problems of maintaining backward compatibility -- and would mean the 'icon' field could remain as is.

I like the approach of having a plain text icon OR an image icon, and the user can chose which one they want to use.

matabele commented 8 years ago

@tobibeer I have something that works -- sort of. Effectively, I remove a tag from all of the tiddlers in the wiki, and replace this tag with another with the old name prepended with the emoji. This mechanism can only prepend an emoji (effectively renaming the tag), and can not exchange an emoji (one must again remove all of the tags, and add a replacement tag.)

This demonstrates the necessity of adding a new 'emoji' field. If this were added, exchanging the emoji icon would be trivial.

The more I look at it, the more it looks like:

add a new 'emoji' field
forms part of the full title (prepended to the plain text title)
displays in the title of the view template
displays on links
displays in tags, when a tiddler is used as a tag tiddler
could contain one or more emoji (handled as a list when necessary)

sukima commented 8 years ago

@twMat I didn't do anything. To reproduce, on a mac (I don't know the Windows or *nix equivalents):

Open your browser to http://tiddlywiki.com
Press the + button to add a tiddler
Click the body of the new tiddler
Open the special character picker (CTRL⌘Space) or Edit | Emoji & Symbols.

That's all. JavaScript natively handles unicode in strings and in HTML markup. So you can enter these characters into textareas from your OS. Easy Peasy.

tobibeer commented 8 years ago

That's the beauty of it. It almost needs nothing at all on the TiddlyWiki end but enhances the TiddlyWiki experience enormously... if used right, of course. So, glad to see your OS's emojis be searchable, mine are not ;-)

TiddlyWiki / TiddlyWiki5

Feature Request: Emoji #2256