Sitepoint Members,
In the code: <p>The flu, from in<span cleass=“somecolor”>flu</span>enza, can cause other…</p>
does google see “influenza”, because my web spellchecker doesn’t. If not, is this a flaw or inability in css? If not how would you code it?
Thanks,
Chris77
Interesting question chris,
My guess is that Google would see the word and the tag wouldn’t affect it however I could be wrong. There is a tool you can use to see your site as googlebot,
http://www.evolvedwebsites.com.au/googlebot/
Maybe that will give you a better idea of how it is used,
Hope that helps,
Shawn
The site wouild be a big help but it looks like my webhost won’t allow it:
“We could not load the website address…is it correct?”
“We are having trouble getting the content from…please try again”
I would sincerely doubt it’s going to pickup up influenza - you’ve split the word when you put the span in there.
So is it true you can’t color specific letters in a word with CSS without destroying the word?
Only letter you can change consistently is the first letter. But if you want it to be readable by google, you’d probably want to do it using javascript.
If you add the span using JavaScript then search engines will be able to see the whole word - as will spell checkers.
Dave,
I’m not sure what you mean by
"Only letter you can change consistently is the first letter. "
Consistently - so that…?
This may be a typo in the first message, but there is a misspelling in the paragraph string that might be affecting things:
<p>The flu, from in<span [color=red]cleass[/color]="somecolor">flu</span>enza, can cause other...</p>
You can do something like
.highlight :first-letter {color: red; font-weight: bold; }
and the html is <span class=“highlight”>influenza</span>
Which would display as influenza
But I said earlier (and felgall reinforced) - if you add the span via javascript, you’ll get the same effect, without affecting the search engines…
The first-letter code will help me on another page, but I have no idea how to code css with javascript.
The HTML contains influenza which you need to convert using JavaScript to in<span>flu</span>enza and then apply CSS to the span - the easiest way to do that the way you were doing it in the HTML - by giving it a class.
The following JavaScript will do exactly that:
search = function(str,cl) {nodewalk = function(node, str, cl) {var re, m, s, r, frag, sp; for (var i = 0; i < node.length; i++) {if (node[i].hasChildNodes() && 'SCRIPT' !== node[i].nodeName) nodewalk(node[i].childNodes,str); re = new RegExp(str,'ig'); if (3 === node[i].nodeType) {m = node[i].nodeValue.match(re); s = node[i].nodeValue.split(re); frag = document.createDocumentFragment(); if (m !== null) {frag.appendChild(document.createTextNode(s[0])); for (var j = 0, jj = m.length; j < jj; j++) {sp = document.createElement('span'); sp.appendChild(document.createTextNode(m[j])); sp.className = cl; frag.appendChild(sp);frag.appendChild(document.createTextNode(s[j+1]));} node[i].parentNode.replaceChild(frag,node[i]);i+=jj*2;}}}}; nodewalk(document.getElementsByTagName('body')[0].childNodes, str, cl);};
search('flu','somecolor');
Note that I wrote the search function ages ago - it is really only the last line that I had to add to it to be able to answer this question. It simply searches the entire content of the body of the page node by node ignoring any that are not text or which are scripts and then with any of the text nodes where it finds the search term (in this case ‘flu’) it wraps it in a span and applies the specified class (I did actually add the class as an extra parameter as my original script had the class name hard coded).
I’ll have to work on that. Thanks Felgall.
I would sincerely doubt it’s going to pickup up influenza
Google is contagion proof?
Spans have NO semantic meaning so , it SHOULD NOT affect SEO. However , I have learned that in the web SHOULD doesn’t always equate with DOES. So Google , specifically Google, interprets spans as word breaks… subject to change of course. Go figure.
As Dave pointed out there is a CSS property that lets you target the first letter. However, it will not work here as it targets the first letter in BLOCK element ( span is an inline element by default… so you would want to change that to display:block; or , since we wanted to still remain somewhat inline display:inline-block)
Tho the .js is the CLEANEST solution , a little typography , math and CSS will save the day and avoid .js 
.flu{position: relative; }
.flu:before{content:"flu"; position: absolute; color:red; left:.78em; }
I may be off by .01-.015 ems, which may seem like a slight shadow at small point sizes, and should virtually disappear at large type ( margin of err => 0/ as pt. size => Infinity);
anyway , hope that helps.
Dresden,
That simpler for me. Thanks!