Rendering colored symbols

[Mark Salib]

Hello, I have many wikis with playing card symbols:

♥♣♠♦

weird thing is the heart and diamond do not render as red on my computer (all are black) however they do as black/red on my phone. Both are using the latest version of TiddlyWiki linked to google drive and both are accessed with google chrome. Any idea how I can render these colored symbols properly on my laptop?

Sorry if this topic has come up before!

Thanks and what a cool software product!!

Mark

[Mat]

Hi Mark. It depends on what the format is of those symbols (i.e are they actual UTF-8 characters or are they svg icons, or perhaps something else). And it also depends on in what context they are, i.e if they are wrapped in some "div" etc. If you could attach a tiddler with such a symbol it would probably be easier to help you. You can for example click the tiddlers more button and click Export and choose "as HTML", and then attatch it here in the message.

<:-)

[R²]

Hi Mark,

If as Mark mentioned, these are indeed UTF-8 symbols, TW is very good at leveraging CSS for these kinds of ends. Use your browser's inspect function to see whether you have some unique CSS wrapping you can put to use.

For instance, there's a really neat (French) TW at https://silvyn.github.io/tw-n0d1/ that prettifies many types of links, adding a PDF icon when linking to a PDF, a Github icon before a link to Github, etc. I probably didn't extract that functionality properly as it's not properly packed as a distinct plugin and all my icons were appearing in black and white. I easily corrected the issue adding some bits of code to my personal stylesheet along the lines of:

a[href$=".pdf"].tc-tiddlylink-external:before {

    color: #da251c !important;

}

(This example applying to links including a .pdf extension).

I add any CSS tweaks to a personal stylesheet, which is simply a tiddly with a "$:/tags/Stylesheet" tag filed away under a special title "$:/plugins/[foo]/stylesheet/compacttweaks.css" (which makes it a system tiddler rather than a standard tiddler, thus hiding it away from basic search for instance).

Best,

R²

[R²]

I forgot to mention that the !important property in that code could you particular promise in your case. I only dabble in CSS but could very well imagine your TW having different stylesheets for your phone and your computer. Having some some of universal stylesheet patch could make sure that the red colour applies on both terminals...

[Mark Salib]

Hi guys, thanks for the responses. I have attached a sample below. On my laptop all card symbols are black :)

Thanks again!

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/DeGpRCy59lE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e578e903-5e30-4856-a30c-a3316fb14e3an%40googlegroups.com.

[TW Tones]

Mark,

Has your computer got a unicode aware font? When displaying unicode characters you must have a local font that defines them visually, if not a webfont or browser font. some have enhanced a range of symbols to be larger and coloured etc...

Regards

Tones

[Mat]

Mark,

after inspecting the code in your file, I'd say Tones suggestion is your best bet if you want to type the symbols directly like you're doing. I.e in the code it reads

<td align="center">2♥</td>

(which you might have typed as |2♥| to create a table cell )

AFAIK, it is not possible to only color some symbols red inside that. 

So, either the browser has to show certain symbols in special ways or you need to use something more accessible like a macro or a transclusion. I would suggest using macros instead and you could then type club/heart/spade/diamond like so:

<<c>><<h>><<s>><<d>> it could also be <<♥>> etc.

and these can be made to show the symbol in any color. 

If this syntax is good enough for you, but you need help to implement it, just say so.

<:-)

[Mark Salib]

Thank you I will give it a try and revert with any follow ups. Cheers!

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/55d12567-c0f5-44ce-9a26-f7e22b4ee69fn%40googlegroups.com.

[Mark Salib]

Hi Matt, the syntax is perfect:

<<c>><<h>><<s>><<d>>

with <<h>> & <<d>> red  and  <<c>> and  <<s>> black on the suit symbol.

If you could direct me where I need to define those shortcuts that would be great!

Thank you

Mark

Virus-free. www.avg.com

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/55d12567-c0f5-44ce-9a26-f7e22b4ee69fn%40googlegroups.com.

[Mat]

\define c()<span style="color:red">♥</span>

2<<c>>

<:-)

[Mat]

DOH! Should obviously be "h" for heart!

<:-)

[Mark Salib]

Cool! Thanks I'm totally new to this world thanks for the help

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1b40bd76-ca1b-4206-b090-11e1edf5972an%40googlegroups.com.

[Mat]

Oh, I just realized should clarify I little more:

Create a new tiddler titled anything but with the tag $:/tags/Macro and the text

\define c()♥

\define h()<span style="color:red">♥</span>

\define s()♥

\define d()<span style="color:red">♥</span>

...but with correct symbols (I was too lazy to find them). The club and spades don't need coloring so it is enough with only the symbols.

You can now use these everywhere in you TW by calling <<c>> etc

<:-)

[Mark Salib]

I planned to do some leg work this weekend to figure it out. Thanks for this!!

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/71fb497b-5081-4fc5-b124-35dd9823de8an%40googlegroups.com.

[Brian Radspinner]

Here are the macros I have for card suite colors, in a tiddler tagged with "$:/tags/Macro"

\define club() @@color:black; &#9827;@@
\define diamond() @@color:red; &#9830;@@
\define heart() @@color:red; &#9829;@@
\define spade() @@color:black; &#9824;@@

<!-- EXAMPLES -->

<<club>>&nbsp;&nbsp;`<<club>>`
<<diamond>>&nbsp;&nbsp;`<<diamond>>`
<<heart>>&nbsp;&nbsp;`<<heart>>`
<<spade>>&nbsp;&nbsp;`<<spade>>`

[Mat]

Looks good. If there is always a space needed after a symbol, you can, instead of the nbsp, add it in the styling e.g like so

\define spade() @@color:black;margin-right:1em; &#9824;@@

<:-)

[Mark Salib]

Worked! brilliant thank you all for the help!

Virus-free. www.avg.com

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/6913e8dd-f9da-4395-9a54-286c4797629fn%40googlegroups.com.