Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

Text with same color as background but outlined (CSS)?

         

QuaterPan

9:28 am on Jun 5, 2018 (gmt 0)



For design purpose, I would like to style links so it looks like the letter are outlined.

To do so, in css, I am setting the color of the text the same as the color of the background, then I add a 2 pixels thick blue outline around the letters, using text-shadow.

My question is, since the color of the text and background are the same, will Google consider this is hidden link ? From a human point of view, the text is clearly visible, thanks to the letter outline, but Google may not "see" it.

goodroi

9:04 pm on Jun 5, 2018 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



KISS - Keep It Simple, Silly

Even if googlebot doesn't accidentally flag you as spamming today, there is no guarantee they won't make a coding change which will make googlebot accidentally flag you as spam tomorrow. For best SEO results don't push the bleeding edge of design or technology. You want to make it as easy as possible for googlebot.

tangor

9:29 pm on Jun 5, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Occasionally there are times when text as image is useful. This might be one of those times.

NickMNS

10:31 pm on Jun 5, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Find a font that is outlined.

lucy24

11:34 pm on Jun 5, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



:: detour to caniuse dot com ::

Sure, you're fine, so long as none of your users are stuck in either a single-digit MSIE (<= 9) or Opera Mini.

Oh, oops, you weren't asking about human users, you were asking about Google. Silly me.

Find a font that is outlined.
Hmm, that seems a bit of overkill for something that is only to be used in a handful of environments. And then you need to ensure that all your users' browsers support font embedding (approximately the same ones as above, plus MSIE 9), and there's the extra request, possibly to a third-party server.

tangor

6:13 am on Jun 6, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Wonder how many (like me, personally) serf in High Contrast, deny font changes/colors, and have set their own font size for readability?* Side question to this thread, of course, but those who do would wreak havoc on any "fancy stuff" a coder might try. Image on text, however, survives that just fine. Just sayin'.

Also has the benefit of avoiding the "hidden text" problem altogether.

The outline font is not a bad idea, some can be stripped to just the letters required to greatly reduce load and other happy things.

*I have more than one machine. One of them is "standard fonts/colors" so I can check to make sure what I thought I coded is what I actually did code.

QuaterPan

8:52 am on Jun 6, 2018 (gmt 0)



Just one last question, what if I "nofollow" the link with outlined text? If Google sees it as hidden text in spite of the thick outline, but with nofollow, it shouldn't consider it as an attempt of cheating, isn't it ?

Yes, I know KISS, but I am just asking.

tangor

10:07 am on Jun 6, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



As with most things g, you can try, but if slapped, it can be very painful.

Me? It isn't worth the heart burn thinking about it. :)

QuaterPan

9:29 am on Jun 7, 2018 (gmt 0)



Understood.