[TW5] Color of text in tag pills

[cmari]

Hello,
In an effort to improve the readability of colored tag pills, I tweaked TagTemplate and EditTemplate/Tags to allow for a "fontcolor" field in addition to the "color" field. 
But while I was searching for any other discussion of this question, I came across this Q&A last November between Dave and Jeremy (in this thread: https://groups.google.com/forum/?hl=en#!topic/tiddlywiki/69P2zrHEW2U):

Question:

4. Could there be a 'tag pill text color' field?......

Answer:

I'm against tags being able to specify both their background and foreground colours. It makes it more likely we'd get garish tags in the wild. I'd prefer to instead tackle the problem of ensuring that the tag pill text is visible regardless of the colour.

I don't want to be out of compliance (though I promise I have no garish intentions!), and I'd be happy to accept a different, more automatic adjustment for visibility.  Are there still plans for that (or did I perhaps just overlook something)?
cmari

[Ton Gerner]

Hi cmari,

A long time ago I posted some feature requests where this was one of them [1]

Jeremy's answer was then:

I'm not so sure about this one. We could introduce another field for it, but it makes the mechanism more complex, and I think that a list of tags where some are in black type and some are white type will look weird. I'm open to discussion; it's just a template change.

I even posted a link to a color chart [2]:
This is the ColorChart that was once at Eric Shulman's site, but I cannot find it anymore there. So I made a demo so you can see how it looks with black/white text.

If it could be done automatic as implied by Jeremy's answer to Dave:

I'd prefer to instead tackle the problem of ensuring that the tag pill text is visible regardless of the colour.

I can live with that ;-)

Cheers,

Ton

[1] https://groups.google.com/d/msg/tiddlywiki/nsJT0bx1eZ0/qPI1yJfENg0J
[2] file:///D:/Dropbox/Public/ColorChart.html

[Eric Shulman]

On Sunday, March 16, 2014 2:32:53 PM UTC-7, Ton Gerner wrote:

I even posted a link to a color chart [2]:
This is the ColorChart that was once at Eric Shulman's site, but I cannot find it anymore there. So I made a demo so you can see how it looks with black/white text.

http://www.TiddlyTools.com/#PaletteMaker

PaletteMaker displays a palette with checkmarks showing which colors are currently defined in the ColorPalette.  In order to ensure that the checkmark text is visible, PaletteMaker automatically selects either white or black text, based on the "brightness" of the background RGB color.  Here's the code that I wrote... 

 var rgb=bgcolor.substr(1).split(''); var long=bgcolor.length>=6;

 function h2d(h){return '0123456789ABCDEF'.indexOf(h?h.toUpperCase():'');};
 var r=h2d(rgb[0]); var g=h2d(rgb[long?2:1]); var b=h2d(rgb[long?4:2]);
 if (r<0||g<0||b<0||r+g+b>=15) return 'black'; // BAD RGB or BRIGHT COLOR
 return 'white'; // DARK COLOR

 

The background color, t, can be specified as "#RGB", "#RRGGBB", or an X11 Color Name.

Notes:

* first line chops up the color code into separate r, g, b variables.

* if a 6-digit RRGGBB value is used, only the first (most-significant) digit of R, G, and B is used to calculate overall brightness.

* next two lines convert the hexadecimal values (0-F) to decimal (0-15)

* next two lines test for "brightness" and return either black or white, accordingly.

* the "cutoff" value of r+g+b>15 to test "bright" vs. "dark" color was determined empirically by experimentation.

Note that this approach only uses black or white text.  I had experimented with calculating the "reciprocal" color, so that, for example, a background of "#ccc" (light gray) would use text color "#333" (dark gray), while a background of "#ccf" (light blue) would use "#ffc" (pale yellow) text color.  However, this lead to some poor color combinations, especially when the background color was close to the middle of the RGB palette (e.g., the reciprocal of background "#999" would be text color "#666") due to the low contrast ratio between text and background.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[Ton Gerner]

Hi Eric,

Thanks for the explanation.
You proved it could be done easily.
I think that black and white text is just perfect.

Sorry for giving a wrong link for the colorchart (the original I once downloaded from your site I think) [1]

Cheers,

Ton

[1] https://dl.dropboxusercontent.com/u/2638511/ColorChart.html

[Eric Kofoid]

Hi Ton,

I know this is an ancient thread, but I would like to pursue the subject a little further.

I have a wiki used by my lab which has a dark theme with red4 (EC2200) lettering in the title. Tab pills have a default background color black. I would like the tab text to have the same color as the wki title. The overall appearance would be quite attractive and not at all garish. I'm attaching a screen-shot of the top of the page after coloring the tab text in Intaglio to demonstrate what I'd like.

Do you have any suggestions about how I might accomplish this effect?

Cheers,

Eric 

[Mat]

Eric Kofoid wrote:

Tab pills ...

You mention taB pills and taB text, while this thread talks about taG pills. Regardless, the technique is to right click on the thing you want to investigate (i.e those letters) and select "Inspect" so you get the browser inspector tool. There you can see the name of the style that is applied. Then do a search in TW advanced mode for this style. It will probably be in the snowwhite stylesheet. Inside this stylesheet, find the style and set "color: ..." to be the desired color.

<:-)

[Eric Kofoid]

Hi Mat,

Indeed, I did mean taB pills.

Thanks for pointing me in the right direction.

Cheers,

Eric

[Eric Kofoid]

God! I can't believe it -- twice in a row! I meant taG, really, truly....

Cheers,

Eric