Text Colour Experiment

[David75]

Hi
I am running an experiment in which we are trying to train people to be synaesthetes (they have additional experience of colour associated with numbers or letters).

I wondered if anyone has some advise about the easiest way to modify a web browser such as firefox so that just 10 letters A-J would always be displayed in a specific colour on any page they visited on the web?

Much appreciated

[lucy24]

Ooh, what fun.

What kind of software are you working with? "Modify a web browser" could mean anything. Are you looking at building a browser add-on, or are you coding specific pages?

It definitely can't be done within CSS alone. That is, you can't say anything equivalent to

{any occurrence of the letter H} {color: red}

and so on. You could make your pages php and send everything on a quick detour that applies specified styles to the text content. Make sure you don't inadvertently style the tags too!

That last sentence would seem to be a no-brainer. But I just recently found the element /pictores/ in my logs. The user had chosen an alternative spelling preference. The page code (not written by me) auto-converts all existing text, but is too stupid to distinguish between visible text and html tags. So an image tag containing the element /pictures/ was changed to /pictores/. Good thing there were no tags containing the letter sequence -ir- or -ur- or there would have been a big mess. And good thing my Rewrite happened to bypass the error.

[alt131]

Hi David75, and welcome to WebmasterWorld :),

What a very interesting question.

Am I right in that you want this applied to every page the user visits - not just pages you have created yourself?

If so, then as Lucy says it is a little beyond css sole, but my first thought is that it looks "do-able". If it is, I think it requires a combination of css, adjusting user browser settings and I wonder if the accessibility guru's will have some techniques to help as well - so I've asked the browser and accessibility guru's to drop by to make suggestions.

[David75]

Hi
Thanks for your reply
Your right, I want this fix to apply to every page on the internet, building an add on to a browser like firefox would be a possibility.
Any suggestions gratefully received

[Fotiman]

My initial thought is that this can be done but will increase the DOM significantly, because you essentially need to wrap every individual letter with another element. Each wrapper element would also need to use inline styles to ensure that it overrides the styles already used on the page.

Imagine you have the following markup:

<p>This is a sample.</p>

You'd need to parse the DOM, and for each text node (nodeType 3), examine it one letter at a time and generate a replacement string. For example, you'd want the above to turn into something like this:

<p>T<span style="color:#f00;">h</span><span style="color:#f00;">i</span>s <span style="color:#f00;">i</span>s <span style="color:#f00;">a</span> s<span style="color:#f00;">a</span>mpl<span style="color:#f00;">e</span>.</p>

For efficiency, you would want to wrap a series of letters that all fall into the same category, but that adds complexity. Essentially, you'd want something more like this:

<p>T<span style="color:#f00;">hi</span>s <span style="color:#f00;">i</span>s <span style="color:#f00;">a</span> s<span style="color:#f00;">a</span>mpl<span style="color:#f00;">e</span>.</p>

It probably wouldn't be too difficult to whip up a Chrome extension that does this (I've never created a Firefox extension though).

[alt131]

David75, thanks for the clarification. If this is a testing/learning environment, are you able to run through a proxy? I'm asking because that should allow more options for injecting this. Second, what level are the end-users and what types of sites will they usually access? I'm thinking of ways to reduce the code required on the page, but that saving might reduce robustness.

Fotiman, thanks for joining in. Is it possible to reduce that code by using an element we don't see often, combined with embedded rather than inline style? For example, <s>, with
s {
text-decoration: none !important;
color:red !important;
)
Would depend on the sites and whether the end-users would notice if the style hadn't been applied - but at least something like <s> provides immediate visual feedback. Also, in ff it is possible to add the css in usercontent.css - could the .js be added via user.js?

In terms of extensions didn't some of the Greasemonkey-type allow you to do what is desired here? After a quick browse at moz, most seem discontinued, but wasn't one specifically designed to make it easy to regex to manipulate the DOM? Can anyone else recall it - and perhaps a name (or similar for webkit/chrome etc)?

[Fotiman]

Is it possible to reduce that code by using an element we don't see often

Sure, though it's not semantic. I suppose it doesn't really matter, though, since the source content hasn't really changed.

combined with embedded rather than inline style?

That was the approach I was going to suggest originally, but I don't think that's foolproof. Even though you may use an element that we don't see often, there's still the risk of running into one, in which case we'll be overriding styles on the page that we might not have intended to. Probably not an issue for a majority of sites, but not 100%, which is why I would suggest using inline styles instead.

[lucy24]

Where is this happening? At your (physical) location, like a computer lab somewhere, or on the test subjects' personal computers which will also be used for other stuff? I'd expect people to be leery about using an add-on of unknown origin at home. Especially if other family members then have to turn it off whenever they want to go online.

Is it possible to reduce that code by using an element we don't see often, combined with embedded rather than inline style?

D'oh! That's exactly the approach I take with, for example, emphatic Roman text within italic body type:
.ital em {font-style: normal;}
You never see <s> and not much of <u> or <tt>. But a named span is safer.

If they are your own computers in your own location, pick browsers with an option for using your own stylesheet. These are used in addition to, not instead of, the document's own styles-- in the same way that a stylesheet itself is a supplement to rather than a replacement of browser defaults. So all you need is a single span name. Pick some kind of gibberish that won't show up in the real CSS, and let your add-on wrap all the requisite letters in

<span class = "xxwtf">abcde</span>

When this is happening in all documents all the time, a named style should save time over an inline description.

[alt131]

Sure, though it's not semantic. ..Even though you may use an element that we don't see often, there's still the risk of running into one
and
But a named span is safer.

Agreed - but that's why the questions about whether this is to be used in a controlled environment, the types of sites that might be accessed and competence level of end-users. Also, the selector could be made more specific to reduce the chances of conflict even more (hence using !important as a bare minimum to start).

I think the detail of that depends on the core issues of the environment and types of sites. Dealing with text-heavy sites with code that isn't that clean or has loads of .js driven whiz-bang effects clogging bandwidth, then the requirement to parse the DOM and insert multiple iterations of an inline style (or even a classed span) around every letter could slow things to the point of ceasing to be useful as a tool to achieve the priority outcome which is to improve/practise synaesthesia.

That said, no doubt are more ideal/less ideal ways to deal style once the text has been identified. I think the issue that remains open is options for identifying the text.

Luce, thought of <tt>. It has one extra letter and I know you use it. I figured that if suggested Murphy's law would immediately apply and your sites would be the first place to be visited :)

[lucy24]

Wait, it gets funnier. Over on my e-books site, one style sheets consists of a single line, which says in its entirety

tt {
 color: #c00;
}

Why? Because it's an easy way to illustrate proofreading markup and make it stand out. You can't make your own styles, because Project Comments (Technical Term) are inserted into a page that's constructed behind the scenes in php. Same mechanics as a Forums post, come to think of it. So it's either inline CSS or ::shudder:: <font> tags galore.

Needless to say we were not happy to hear that HTML 5 is doing away with <tt> ;)

[David75]

Hi All
Thanks for your helpful suggestions, the idea is to install this code on the participants home computer, so not a controlled environment, that's why a plugin to a browser is an attractive proposition. The participant would be using their computers to surf the net as usual, so no specific sites or restrictions to what they would be viewing.

Thanks again