CSS - Is it possible to add a black outline around each character in text?
CssCss Problem Overview
I would like to add a black outline around each character, so if the font id on the same color background as the foreground it is still readable.
Can this be done in CSS with or without browser specific css?
Css Solutions
Solution 1 - Css
You can simulate it with the CSS 2.1 text-shadow property:
p {
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
This is, of course, not supported in IE9 and below. See: http://www.jsfiddle.net/yijiang/UCjgg/ for a simple demo.
Solution 2 - Css
There is an explicit -webkit way to add text outline, which is with -text-stroke. This is the experimental implementation of the equivalent standards track proposal (called text-outline in the CSS3 spec docs).
Solution 3 - Css
While we wait for text-stroke to be widely supported, there's a pretty good "text-shadow hack" generator out there to generate the text-shadow property you need.
https://owumaro.github.io/text-stroke-generator/
h1 {
color:#00ff19;
text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
}
<h1>yayyy text</h1>
Solution 4 - Css
Before I start I want to clarify that Yi Jiang's answer is the correct one to your question as it is, anyway I wanted to add up a little.
If you need compatible way of doing this, the only way I can think of is using a font with outline by design.
You could even use the Google's Font API and have a very compatible solution.
Good luck!
Solution 5 - Css
Shadows can do the trick.
h1 {
color: white;
text-shadow: black 0px 0px 2px; /* color offset-x offset-y blur-radius */
}
<h1>White text with black outline</h1>