Dowemo
0 0 0 0


Question:

Assuming I have a set font color that I must maintain, and that it overlays content that can be of any color, how can I make sure the font is readable no matter what it's overlaying?

Here is a jsFiddle to demonstrate the effect I am trying to describe.http://jsfiddle.net/4AUDr/

#overlay 
{
    position: relative;
    top: -150px;
    color: #860101;
}

Meme captions utilize white text with a black outline to make it readable over any hypothetical meme image, however I don't think there is a cross-browser compatible CSS only method of achieving that, and it would potentially look quite horrible with smaller fonts.

What solutions are there to this problem?


Best Answer:


While text-shadow is nice, it doesn't actually give the result you want. A shadow is a shadow and what you need to have for most readable text is a "text border". Unfortunately. there is no such thing as text-border in css, but we can make one !

I am surprised by how much unpopular multiple shadows are. This is a case where by multiple shadows you can do miracles :

CSS

p {
    color: white;
    font-size: 20px;
    text-shadow:
        0.07em 0 black,
        0 0.07em black,
        -0.07em 0 black,
        0 -0.07em black;
}

This style will simply add a thin shadow (as thin as 7% of your actual font-size) around your text (up, down, left, right).

But are four shadows enough ? Maybe you can get a better result with eight ? It looks like the answer is yes, makes sense to me, but it could also be that we are overkilling things here. Note that in this case I also decreased each shadow's size :

CSS

p.with-eight {
    text-shadow:
        0.05em 0 black,
        0 0.05em black,
        -0.05em 0 black,
        0 -0.05em black,
        -0.05em -0.05em black,
        -0.05em 0.05em black,
        0.05em -0.05em black,
        0.05em 0.05em black;
}

Then in this markup in a white background you have a nicely readable text:

HTML

<html>
<body>
    <p>This text is readable on any background.</p>
    <p class="with-eight">This text is using eight text-shadows.</p>
</body>
</html>

JSFiddle example here




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs