SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS And Coloring Or Underlining Certain Letters In A Word

    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

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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"

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I would sincerely doubt it's going to pickup up influenza - you've split the word when you put the span in there.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  5. #5
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So is it true you can't color specific letters in a word with CSS without destroying the word?

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Chris77 View Post
    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.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you add the span using JavaScript then search engines will be able to see the whole word - as will spell checkers.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Dave,
    I'm not sure what you mean by
    "Only letter you can change consistently is the first letter. "

    Consistently - so that.....?

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Chris77 View Post
    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
    This may be a typo in the first message, but there is a misspelling in the paragraph string that might be affecting things:
    Code:
    <p>The flu, from in<span cleass="somecolor">flu</span>enza, can cause other...</p>

  10. #10
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Dave,
    I'm not sure what you mean by
    "Only letter you can change consistently is the first letter. "

    Consistently - so that.....?
    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....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  11. #11
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The first-letter code will help me on another page, but I have no idea how to code css with javascript.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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:

    Code:
    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).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll have to work on that. Thanks Felgall.

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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


    Code:
    .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.

  15. #15
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Dresden,
    That simpler for me. Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •