Colouring text in an invisible way

Webweaving
1

I have a little game for visitors on my site, find the golden comma. A golden comma gets lost somewhere in the 'museum‘ section of the site and if someone finds it, I write them a sonnet.

Back in the day, this would mean a sonnet a year at most, but I fear that now that I get some more visitors, it’ll end up happening more as it isn’t too hard to look at the source code of pages and pick out the comma. Just a <span style=”color:… type of deal.

So I was wondering about a way to colour a specific comma on a specific page, but doing it in a way that is as obscure as possible. I’ve found some better solutions already, such as defining a new, innocuous-sounding element in CSS so the actual styling is as difficult to identify as possible - but I’m curious if anyone has any other ideas.

2 Likes
2

If you’re not opposed to using Javascript, you can yoink the text directly out of the paragraph without doing much more than adding an ID to its parent element. See the JSfiddle below:

https://jsfiddle.net/9hdabnr1/

There are probably other ways to do it via JS as well, but this is the one I went with.

2 Likes
3

This would be a lot of work if you extended it to the entire museum section, but what if you went in the reverse direction? Make the default text color gold and define styles that change it to black - maybe something like all divs and spans. Then you could scatter divs and spans all over the pages in such a way that only the golden comma ends up not being inside either a div or a span, but you can nest them so people can’t just search for things like </span>,.

It would make the code in the museum section a lot less clean than it is today, but perhaps in the name of a game that’s okay.

3 Likes
4

That is quite brilliant - maybe just define some element like <main> with body > :not(main){color:#eae136;} or somesuch, wrap every page in that element and then and drop in a </main>,<main> somewhere. Couldn’t search for that as every page would contain precisely those tags.

It breaks my minimalist heart but I’m definitely going to try it out as in its own sick and twisted way, it’s quite elegant.

1 Like
5

oh that’s fun!
you could use nth-of-type in the css to throw people off a bit.

you could give every comma on a page the same span class - like <span class="comma">,</span> and color the golden comma using an nth-of-type rule. i think you’d need two rules since for example .comma:nth-of-type(2) {color:gold} would color the second comma in every paragraph gold. so you’d want for example

p:nth-of-type(2) .comma:nth-of-type(2) {color:gold}

and that would specifically make the second comma in the second paragraph gold.

to avoid people getting too much of a map, you can use color variables and add some red herring nth-of-types!

p:nth-of-type(2) .comma:nth-of-type(2) {color:var(--mystery)}
p:nth-of-type(6) .comma:nth-of-type(7) {color:var(--enigma)}

so the var colors can be black and dark grey and navy blue and off-black and etc and then One of them is gold

ive never used multiple stylesheets, but i just tested and you can define root values in one stylesheet and reference them in another, which can add extra inconvenience!

for additional additional inconvenience you could add css filters to some of the commas as well to change their colors! you could have red herring golden commas that have a gold color variable but a css grayscale/brightness/contrast/invert/etc filter applied so they aren’t really gold on the page.

at that point i think the stylesheet hunting shoulddddd be about as inconvenient as just looking at the page itself?

1 Like