Menu
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?
960
CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”.
The color property is used to set the color of the text. The color is specified by: a color name - like "red" a HEX value - like "#ff0000"
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 colourful 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
192
You can experiment with text-shadow property (MDN doc), for instance:
text-shadow: white 0px 0px 10px; (jsFiddle)
It's supported in IE10. For IE9, you can use proprietary Internet Explorer filters as per this answer.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
