Make single character css styled site wide?

Question

Client has asked for just the / of his site to be red... Throughout the entire site!

Do I have to add spans around each /, or is there an easier way?

I would go with the ``, if you have to parse the whole site for this tag and change it, that could be bad and slow. — Allan Kimmer Jensen, Oct 23 '12 at 11:05
Why on earth would you want that? Is there a real reason or is it just a whimsy of the client? If it's the latter, explain why it adds no real meaning and is going to take long time to do it. — Kyle, Oct 23 '12 at 11:17
This either adds markup (could be a fair bit depending on the number of characters that need adjusting) or js overhead to the site. Either way the gain isn't going to be worth the performance hit. I swear the faster the internet gets the dumber things the clients ask for... — Rick Calder, Oct 23 '12 at 11:57

score 3 · Accepted Answer · answered Oct 23 '12 at 11:22

3

Hope this sample helps. I found it in SO. You can replace the ® with the html code of slash /

$(document).ready(function() {
    $('*').each(function() {
        var n = $(this).html().replace(
            new RegExp('®','g'),
            '<sup>®</sup>'
            ).replace(
            new RegExp('&reg;','g'),
            '<sup>&reg;</sup>'
            );
        $(this).html(n);
    });
});

DEMO

answered Oct 23 '12 at 11:22

Sowmya

26,684
21
96
136

1

this replaces different character.. if you run this with slash, it will replace all the slashes (eg. in , etc.) – Michal Klouda Oct 23 '12 at 11:34
it can be done with adding space after & before the slash like /&nbsp – Sowmya Oct 23 '12 at 11:46
if all the slashes in the site match `\s\/\s` (rather than ` `) then this could work.. – Michal Klouda Oct 23 '12 at 11:50

score 2 · Answer 2 · answered Oct 23 '12 at 11:20

You could try following jQuery script:

$('body').html($('body').html()
          .replace(/\/(?=[^>]*<)/gi, '<span style="color:red">/</span>'));

It simply wraps all slashes that are not inside tags with span.

Check how fast it is for your site, I believe it could be usable.

Here is a FIDDLE to demonstrate that using the lookahead (?=[^>]*<) is important to prevent matches inside tags <> to be replaced. Try removing it and resulting HTML will be broken.

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

Can't be done with css alone. Check this Link for how to do it with javascript

edited May 23 '17 at 10:29

Community

1
1

answered Oct 23 '12 at 11:09

Anshuman Jasrotia

3,135
8
48
81

score -1 · Answer 4 · answered Oct 23 '12 at 11:05

-1

You have to wrap each occurrence of the character inside span markup or other suitable markup. (Actually, <font color=red>/</font> would work, too.) You can however do this dynamically client-side, if this sounds more suitable (you would have client-side JavaScript that traverses the document tree and does the wrapping).

Note: This won’t apply to content in elements that have plain text as declared content, such as option elements. Inside them, individual characters cannot be styled differently from other content of the element.

answered Oct 23 '12 at 11:05

Jukka K. Korpela

195,524
37
270
390

2

aren't `font` tags deprecated? If he's gonna use inline styles he should use `/` but personally I would add a class to the span - what if the client comes back and asks for all slashes to be 13px, he'd need to do it all again so atleast once it's done once it's easy to change – martincarlin87 Oct 23 '12 at 11:07
1

Various documents may declare `font` deprecated, obsolete or whatever; I was just pointing out that it works, and so does e.g. `/` with suitable CSS code. If the point is to change the visual rendering of some characters for an unspecified reason, `font` would convey the idea best, and you can always use `class` with it, too, with or without a `color` attribute. – Jukka K. Korpela Oct 23 '12 at 11:12
-1 font tags are deprecated. They also don't function properly in some cases, because they are deprecated. – Kyle Oct 23 '12 at 11:17
@KyleSevenoaks, there is no factual evidence for the claim “They also don't function properly in some cases, because they are deprecated.” They actually work a bit *more often* than CSS counterparts (namely when CSS support is disabled or your CSS is overridden). – Jukka K. Korpela Nov 05 '12 at 14:31

Make single character css styled site wide?

4 Answers4