Using Unicode as icons on tiddlers?

#21

Useful tip. Thank you @Yaisog

image
image877×820 36.1 KB

#22

After some more testing I have found two small issues relating to $:/core/macros/tag and tag pills:

One: The   between the icon and tag title is displayed, as the filter [[$icon$]has[title]] implies, only if the icon field is not a title of an existing tiddler, so also when it is empty. As a result the   shows also when there is no icon specified at all.

I was able to fix it (somehow) by adding the   inside a separate list widget with filter [[$icon$]!has[title]!compare:string:eq[]], see attached version of $:/core/macro/tag
It doesn’t solve the second issue however.

Two: There is a whitespace character rendered at the beginning of the tag pill if either:

  • icon field is empty
  • icon field contains unicode but not a title of existing tiddler
    If the icon field contains title of existing icon tiddler, it is rendered correctly, same as in unmodified TW, without any unnecessary whitespaces.

I was not able to solve this one. It is much more cosmetic than the first issue however, as the   sometimes stayed in a line above the tag title (as it doesn’t break), so the tag pill would take two lines with the first one empty.

Somehow it doesn’t feel right that the   is needed at all for spacing, as the default tag pill icons and title icons (also the unicode tiddler icons per your solution) do need any whitespace characters for proper spacing.

$ _core_macros_tag.json (2.2 KB)

1 Like
#23
  • Thanks for that, half the problem is identifying the problem

The cause

  • The original method was simply to transclude
    <$transclude tiddler="""$icon$"""/>
    • This was even when icon was blank but had no side effect.
  • I relied on emptyMessage when [[$icon$]has[title]] was not true, which is also the case when $icon$ is blank, ie icon field is empty.

The solution

  • Just transclude the “icon”, even when the icon is empty
    [[$icon$]has[title]] [[$icon$]is[blank]] +[limit[1]]
    The limit ensures we only attempt transclude once although the two conditions should never be true at the same time.
  • Now the emptyMessage only occurs if icon contains something that is not a tiddler title.

Updated package here and in all above
unicode-image-wikitext-icons.json (2.7 KB)

1 Like
#24

This works much better, as it now does not mess at all with tiddler icons or no icons.

There remains however the problem of the whitespace character in front of the unicode icons.
Here how it looks when using tag-pill macro (looks the same using tag macro, but then it is not possible to select text to show it):
modsel
When inspecting the unicode icon it looks like this:
insp
The icon field of the tag “Icon in unicode” contains just the “:eight_spoked_asterisk:” character, no space in front of it. Displaying of the space before the unicode icon seems to come from some properties of the html span perhaps? It is not specific to emoji, it happens for any character in the icon field.

#25

@vilc thanks for looking closely, in @@vertical-align:top;$icon$&nbsp;@@ there was a stray space before $icon$ I removed, can you do this and see if the fault still occurring if you remove that?

1 Like
#26

Yes, that was it, it displays correctly now.

As it is now, I think I will continue to use it, as it renders correctly and doesn’t break the default functionality.

But it is definitely more a hack now than something ready for including in core code. Works good for single characters (other than ") and that was the whole purpose of this, but since it is interpreted as both potential tiddler reference and html, all sorts of things happen when the icon field is set to e.g. [[]], {{}}, @@, ", color:red;X, <br>.

#27

Hi

Here is the workflow I use for unicode tiddler icons. For sake of brevity let’s say the unicode character we want to add to our tag is “:boom:”.

  1. Create a new tiddler, change its title to :boom:, its body text to :boom:, and add tag $:/tags/Image
  2. Open the tag manager, select the tag you want to add :boom: as an icon, open the dropdown list and choose :boom:
  3. That’s it.

Notes:

  • The $:/tags/Image system tag makes your new icon appear in the icons list in tag manager
  • Creating a new tiddler for the icon can feel tedious, but it’s already the case for every other icon

  • If you don’t want your unicode icon tiddlers to appear in Recent tab or standard searches, you can prefix their title with $:/myicons/ like this: $:/myicons/đŸ’„ but then they will be listed with system icons in the dropdown list of tags manager.
  • Unicode icons tiddler can also be used as icons for tiddlers, through their icon field.

Hope this helps,

Fred

#28

Fred I am sure this workflow will prove useful to some. It is however the way we currently would do it.

  • just to be clear however we made a solution that allows the icon field itself contain unicode, wiki text or named icon tiddlers. It is compatible with your instructions but adds a little more.
  • if modifying core buttons its best still to use icon tiddlers but custom buttons need not.

Thanhs for your contribution.

#29

I was just reviewing this with a view to deciding if we would ask for a core change.

  • My conclusion is no, but a plugin/json package would be good.

Extending @EricShulman and @tw-FRed ideas and taking it a bit further to make the effort of creating a new image tiddler worth while. And avoid changing the core I thought of the following;

  • Provide a tool in which you give a Unicode icon and click to create;
    • Create a tiddler with the title and body set to the Unicode icon, add a field indicating it is a Unicode icon eg object-type=unicode-icon, and/or perhaps give it a unicode tag?
  • You can now use the Unicode character as an icon because it is also a tiddler.
    • It will not come up in search without you searching for the character itself and at least two spaces (by default)
  • Now add a view template for all tiddlers object-type=unicode-icon that lists all tiddlers and fields where the icon is “mentioned”, so if you open such a tiddler you can see where it is in use.
  • perhaps a feature on the edit of the icon field, if the content is not a tiddler title eg new unicode icon, present the button to create it, or select from existing images.

This approach adds value to the effort of creating a separate tiddler. You could also provide a tooltip, description and usage guidelines.

  • The only gap from my original proposal is we can’t give wikitext as the icon without editing the unicode icon tiddler body.
#30

There are very interesting possibilities by sticking with icons in tiddlers when using emojis.

The icon tiddler can have dynamic CSS, so that the characteristics of the icon (heck, even the unicode character itself) can be different depending on the values in fields (say status field, for example.)

For example:

image
image871×824 41.2 KB

So you can have a “status” icon tiddler, and have it show a happy face for a certain value in a tiddler, or a sad face in certain circumstances, etc.

You could have just the one “icon tiddler” to handle showing the right kind of emoji icon for all of the tiddlers in a TiddlyWiki, as long as those tiddlers have that link to the “handle all icons” icon tiddler.

1 Like
#31

Thanks for this idea and the example. Basing on it, I have come to this:

image
image707×935 30.5 KB

Edit: the content of unicode in this example can be reduced to <$text text={{!!unicode-icon}} />.

I didn’t do much testing, but I think it can achieve the same what @TW_Tones’s trick with editing core tiddlers, but with more simplicity.

In my example the “unicode icon handling tiddler” (called unicode) has to be named in the icon field, and the unicode symbol specified in the unicode-icon field.

For even easier usage, the “unicode icon handling tiddler” can be referenced in the icon cascade:

image

Edit: of course, because of how cascades work, the !has[icon] is redundant, the filter can be shorter: [has[unicode-icon]then[unicode]].

So that this is possible:

image
image707×417 10.3 KB

Then you can use a unicode icon whenever you feel like it, just input it in unicode-icon field instead of icon field.

This still requires some more testing I guess (could it break in come conditions, like inside transclusion or $list?) and maybe adjustment of spacing. And better naming of the fields and tiddlers, I’m confused by them myself :sweat_smile:, but this was just a quick test.

2 Likes
#32

By the time I hit the reply button on my last post, I was way past my hit-the-pillow time.

And just as I hit the pillow, I thought: I wished I wasn’t too tired to do what I wanted (the same as what you posted.)

Then I woke up four hours later, and had that thought again and could not fall back to sleep.

So as crotchety as I am right now for lack of sleep, I look at your post and all I can think: BRAVO! Well done. Very well done.

2 Likes
#33

On the basis of recent feedback and my own experiments I have a new approach. Whilst the original solution Proposed by me also allowed wikitext in icons it did require a change to the current system.

This is my current approach, I plan to automate.

For any Unicode character you want to use do the following;

  • Create a tiddler with that character as its title and text eg :anchor:
    • You could include omore in the text field including logic or wikitext
  • Add a description field and describe it.
  • add Unicode tag to list or select them
  • Add a caption field containing the character like this
    • ⚓ {{⚓!!description}}
  • Optionally
    • Place some keywords inside a comment in the text field containing words to add to its searchability eg <!-- anchor -->
    • Add additional fields containing different encodings if desired eg html &#x2693; JSON \u2693

Notes;

  • These will not appear in searches unless you type paste the character itself
    • Or placed some keywords in a comment
    • Although not system tiddlers they will not be seen in search results
  • Since these are tiddlers you can place them in the tiddler icon field when needed
    • No changes needed
  • You could use them as actual titles [[⚓]] to link to the Unicode tiddler

Futures;

  • Add a view template for such tiddlers,
    • List tiddlers containing the title or icon
  • and a picker for in the editTool bar to insert or copy to clipboard
  • Investigate conditional icons eg: {{||🚩}} where the icon will only display given a particular condition. Perhaps through a conditional template.
    • Eg traffic lights :vertical_traffic_light: :red_circle::yellow_circle::green_circle:
    • Find a good code pattern to keep this simple and adaptable.
  • Provide a browser for Unicode symbols
  • Integrate with SVG icons
#34

Don’t know how to name a field? How about not having the field in the first place!

I have improved my solution above. It has a bit different aim to @TW_Tones’s above, namely I want to be able to assign a unicode symbol as an icon in the most straightforward way (at the cost of features such as wikitext/conditional icons) actually, wikitext icons can work as well!

The following tiddlers are needed:

"Handler" of unicode icons, a code analogous to my previous post (<$text text={{!!icon}} />) works for plain unicode, this ones works for wikitext as well:

title: handler
text: <$wikify name="wikifiedIcon" text={{!!icon}} output="html" mode="inline"><<wikifiedIcon>></$wikify>

Modification of core tiddler icon rule, the default filter is [has[icon]then{!!icon}], instead we need:

title: $:/config/TiddlerIconFilters/icon-field
tags: $:/tags/TiddlerIconFilter
text: [has[icon]get[icon]has[text]then{!!icon}]

This displays the icon in the usual way only if the icon field is a name of an existing (having a text field) icon tiddler.

And finally, additional icon cascade rule for unicode icons:

title: unicode-icon-rule
tags: $:/tags/TiddlerIconFilter
text: [has[icon]get[icon]!has[text]then[handler]]

With these three, we can simply put the unicode symbol or wikitext in the icon field and it’s done. No dedicated field or creation of an icon tiddler are needed.

image

I have yet to test if it won’t break under some conditions or interfere with the core icon mechanism, but it looks ok so far.

1 Like