CSS Text Stroke
August 28th, 2007
Text Stroke is the cool, nice-looking effect where black text characters are displayed on a white surrounding to increase readability on a non-uniform coloured background. For example text on Google Maps is displayed that way, just have a look at the place names in the banner of this page. A way to have this effect on an image is to use the Glow effect in Photoshop.
I thought it would be great to have a way to display any text on a web page that way. As a matter of fact, there seems to be a CSS stroke or text-shadow property, but it isn’t implemented yet, except maybe in some SVG implementations or in Safari. Additionally, Safari developers can have text stroking thanks to Webkit.
But for the rest of us, I’ve put together a quick javascript hack to get text stroking on any piece of text on your web page’s template. The trick is to repeat the text element several times in white color in the background, each instance being slightly moved from the original text position. I first tried with 4 instances of the text (one in each principal direction), which worked pretty well for bold fonts but looked a bit weird with thin fonts, so I’m now using 8 instances of the text.
How it works
The method is javascript based, i.e. your document is crawled on window.load and the relevant elements are dynamically stroked via DOM manipulation. So Google or any web crawler won’t see the text elements more than once.
The one big limitation is that I couldn’t get the method to work on an element that’s not absolutely positioned via CSS. It might or might not be a problem for you, depending on your design. And usually you’ll be able to tweak your layout a bit so that the relatively positioned elements that you wish to stroke are made absolute (see my wordpress example to see how I’ve done that). In any case if you see a solution to that issue please let me know.
Now let’s see in detail how the hack works: 8 CSS span element definitions are created, each one sliding the text of 1.5 pixel in one direction (up, up-right, right, down-right, and so on).
span.rawtext { position:absolute; top:0px; left:0px;}
span.stroke1 { position:absolute; color:white; top:-1px; left:-1px;}
span.stroke2 { position:absolute; color:white; top:1px; left:1px;}
span.stroke3 { position:absolute; color:white; top:-1px; left:1px;}
span.stroke4 { position:absolute; color:white; top:1px; left:-1px;}
span.stroke5 { position:absolute; color:white; top:2px; left:0px;}
span.stroke6 { position:absolute; color:white; top:-2px; left:0px;}
span.stroke7 { position:absolute; color:white; top:0px; left:2px;}
span.stroke8 { position:absolute; color:white; top:0px; left:-2px;}
A javascript file contains a function that selects the relevant text elements according to a given selector and modifies them via DOM scripting so that, to each one of them, 8 instances of the same white text are added in the background.
You can have a look at the javascript file here, the main function being:
function processElement(v){
var content=v.innerHTML;
for (j=1;j<=8;j++){
var d=document.createElement("span");
d.className = "stroke"+j;
d.innerHTML = content;
v.appendChild(d);
}
v.removeChild(v.firstChild);
var dd=document.createElement("span");
dd.className = "rawtext";
dd.innerHTML = content;
v.appendChild(dd);
}
Finally, a small piece of javascript code is added to the page where you want to apply the hack (as well as the usual links to the .js and .css file).
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
processTextStroke("div#headerimg a");
processTextStroke("div.description");
}
</script>
This last part basically just checks that your browser supports DOM scripting and process the desired text elements, given by the corresponding CSS selectors.
Download
You can download the files here. I also wrote a Wordpress plugin called WP CSS Text Stroke, feel free to download it from here.
Credits and Conclusion
I think that this hack clearly demonstrates the power of DOM scripting. I drew a lot of inspiration from the implementation of Nifty Corners and even used some of their code so thanks to them. I drew inspiration from there as well.
February 16th, 2008
Update: the Wordpress plugin finally made his way to the Wordpress extensions directory.
January 6th, 2008 at 1:00 am
hey uh is this seo friendly? or will google see 9 headings?
January 7th, 2008 at 10:32 am
I’m not sure. If the crawlers have javascript enabled (which I am not sure they do) they will see 9 headings, but if they don’t they will see the regular header.
I am not a SEO expert so I don’t know if Google apply javascripts to pages. If you know the answer to that question please comment.
January 14th, 2008 at 3:02 pm
lol and if i read properly
“The method is javascript based, i.e. your document is crawled on window.load and the relevant elements are dynamically stroked via DOM manipulation. So Google or any web crawler won’t see the text elements more than once.”
hopefully it will be fine
January 14th, 2008 at 3:04 pm
by the way (sorry for double post) this is an awesome lil script thanks for creating it, its awesomely effective
February 20th, 2008 at 9:24 am
I’m glad you got this out there since it solves the problem I was having with using a random image for the header.
I’m having some grief customizing it though. Depending on the selector I choose, the layout is broken. And when I got very specific with the selector, IE looks fine but Mozilla is bad! Crazy — it’s usually the other way around. It would be nice if someone could explain which elements have to be relative and what that does to their positioning.
I have a few suggestions for the plugin. You could put the css inline in the init function. That way you could have an option for the color and can get rid of the awful hard-coded path to the plugin directory. If you don’t do that, at least consider using
ABSPATH . PLUGINDIR . '/' . plugin_basename($file)or something a bit more flexible.Another thing is assigning the onload function without checking to see if something is already assigned. I have the Google Maps code on some pages and that needs the onload assignment also.
I added a second parameter to the javascript to control the number of strokes. On smaller text I use only 4, but on the bigger text I use 8.
February 22nd, 2008 at 2:18 pm
Thanks for the feedback.
Yeah, I know it’s a bit rough at the edges
I’ll look into implementing the changes you suggest when I have some time.
By the way, how would you add something to the onload function instead of just reassigning it?
February 22nd, 2008 at 9:13 pm
Hey, you added a really cool peel script to your page! That wasn’t there the other day, was it?
I’ve learned a lot in the last 2 days…been hard at it.
First the selectors: I knew this, but had to experiment to have it beat into my head — make the encompassing (parent) element relative. Then whatever you want absolutely positioned on top of that is a child of it because the absolute position is in reference to the parent. The relative position is in reference to where it would land in the flow of the document. So my plan is to get the text you want to stroke positioned how you want it with the relative positioning, and then add the text stroke effect and it shouldn’t move around. If so, you need to add another child element.
Second, there’s a few useful WordPress codex pages that tell you how to do options and their admin panels. It’s pretty easy. There’s also a lot of stuff in WordPress that the codex doesn’t mention. One is a class that loads scripts (and their dependencies) for you. The javascript code that you have looking for selectors doesn’t handle all cases (several of which my code wanted). Since prototype comes with WordPress now, you could use it and it has that selector stuff built in. (My WordPress 2.2 has two versions of prototype actually.)
Third, about assigning the onload function, I thought I read some code way back that treated it like a stack, always saving the old value and calling it after your own work is done. But I don’t know where or what that was. Looking at the prototype code I saw that they provide ways to set it, but I’m not sure if it hurts anything already set there.
February 23rd, 2008 at 3:21 am
I did add this page peel pretty recently
I’m preparing for the release of MapMyGlobe v2, which will be a fantastic improvement on the current one
About CSS selectors: yeah, Prototype’s selector is probably best coded than mine. By the way, a funny thing about that happened recently: I was using the $$() function from Facebook in one of my Facebook scripts, and one day it was broken (probably not from Facebook’s perspective, but from mine), so now I have to redefine my own
October 21st, 2009 at 3:51 am
Hi, I’ve a big problem. I modifed your example, but the text Blog - MapMyGlobe1, Blog - MapMyGlobe2,Blog - MapMyGlobe3 are at each other. Please help me: ** sory form me english, i’m from czech republic
window.onload=function(){
if(!NiftyCheck())
return;
processTextStroke(”div#headerimg a”);
processTextStroke(”div.description”);
}
Blog - MapMyGlobe1Blog - MapMyGlobe2Blog - MapMyGlobe3
Virtual Tourism 2.0
July 29th, 2010 at 9:47 am
i hear that SEO experts earn thousands of bucks just optimising some large high traffic websites.:–
August 31st, 2010 at 7:59 am
Hello,
I downloaded and installed the plugin, but i donf find what and where to edit.
I want to stroke the blogname and the h1 of the Category Names
thanks in advance Beta3
September 13th, 2010 at 9:49 am
Could you please provide clear tutorial on how to make the plug-in at work, I’ve uploaded on my WP site, but don’t know how to make it work, could you please help?
Thanks
September 27th, 2010 at 8:22 pm
seo experts are really modern day geniuses*-;
October 3rd, 2010 at 9:00 am
Hey blog owner! I have a small request. I was just googleing for some info on the topic you wrote and found this blog. Some really awesome stuff you got here. Can I please link to this post on my new website I am currently workin’ on? Pretty please:). I will check back again later to see what you answered. cheers, Ana Hill .
October 12th, 2010 at 3:14 am
About your peel effect.
How can i make the link in the peel open in the same window not in a new one?
October 13th, 2010 at 10:32 am
you can become an SEO Expert by just studying those tips from SEO Forums and testing the methods with yourself.;-
October 15th, 2010 at 4:20 am
Merry Meet. I actually think so too=] I have been poking around the web for some time this week, and its really hard to find anything good to read on blogs:P Maybe thats because there are too much of them around =) But your place actually keeps catching my attention. Great posts, and cool design ^__^. Ill be sure to give it more visits from now on .
October 24th, 2010 at 10:44 pm
well, everyone can be an SEO Expert themselves if we just learn and practice all those SEO stuffs that we are reading;:`
October 26th, 2010 at 2:34 pm
Very interesting post. You are bookmarked!. I am very lucky today as I have found many interesting web pages like this one and tragaperras. Keep up good work!
November 24th, 2010 at 7:12 pm
Hi, So I’m upgrading my laptop computer to Home windows 7 and I really want MS Word for homework purposes. I have a Vista House Premium and I am switching to Windows 7 Ultimate so I’m conscious that all recordsdata will delete. I backed up all the pieces important. But do not know the right way to again up my MS Word. I NEED MS Phrase ! So after I improve how will I get it again? I purchased MS Phrase Excellent- (Which I used already) and MS Word Scholar (Which I used after reformatting my pc earlier than). I purchased each of them, but how will I get my MS Phrase back when upgrading?
December 16th, 2010 at 9:10 am
There is obviously a lot to know about this. I consider you made certain good points in features also.
December 17th, 2010 at 3:46 pm
Very well written article. It will be helpful to everyone who usess it, including yours truly :). Keep up the good work - for sure i will check out more posts.
December 17th, 2010 at 4:04 pm
I keep listening to the news update talk about getting boundless online grant applications so I have been looking around for the finest site to get one. Could you tell me please, where could i find some?
December 17th, 2010 at 6:04 pm
I am always invstigating online for posts that can facilitate me. Thx!
December 18th, 2010 at 8:01 am
I have been reading out some of your stories and it’s clever stuff. I will definitely bookmark your website.
December 18th, 2010 at 8:25 am
Definitely, what a great website and educative posts, I surely will bookmark your site.Have an awsome day!
December 18th, 2010 at 9:34 am
Well I sincerely enjoyed reading it. This post provided by you is very useful for proper planning.
December 18th, 2010 at 10:21 am
You completed some good points there. I did a search on the topic and found a good number of persons will consent with your blog.
December 18th, 2010 at 6:33 pm
Good article and right to the point. I don’t know if this is truly the best place to ask but do you people have any ideea where to employ some professional writers? Thanks in advance
December 18th, 2010 at 6:53 pm
I have been examinating out many of your stories and i can state clever stuff. I will definitely bookmark your website.
December 18th, 2010 at 7:07 pm
You completed a few good points there. I did a search on the topic and found mainly people will agree with your blog.
December 18th, 2010 at 7:43 pm
I have been reading out some of your posts and i can state clever stuff. I will definitely bookmark your site.
December 18th, 2010 at 10:39 pm
How is it that some times you read something and you have to read it times to understand it? Im not sure I still get it!
December 19th, 2010 at 5:12 am
Good info and straight to the point. I am not sure if this is in fact the best place to ask but do you people have any ideea where to get some professional writers? Thank you
December 19th, 2010 at 6:41 am
You made some clear points there. I did a search on the topic and found most guys will go along with with your website.
December 19th, 2010 at 7:39 am
Very efficiently written information. It will be helpful to everyone who utilizes it, including yours truly :). Keep doing what you are doing - can’r wait to read more posts.
December 19th, 2010 at 8:54 am
I’m still learning from you, as I’m making my way to the top as well. I absolutely liked reading everything that is written on your site.Keep the aarticles coming. I liked it
December 19th, 2010 at 9:09 am
Hello.This post was extremely remarkable, particularly since I was browsing for thoughts on this matter last Friday.
December 19th, 2010 at 9:24 am
I’m still learning from you, but I’m improving myself. I absolutely liked reading all that is written on your blog.Keep the posts coming. I liked it
December 20th, 2010 at 2:12 am
It’s really expense efficient and its scalability is another plus level in its favor.
December 20th, 2010 at 7:29 am
There is noticeably a bunch to realize about this. I consider you made certain nice points in features also.
January 5th, 2011 at 2:55 am
i was starting to assume i would possibly end up being the only individual which cared about this, at least now i recognize i’m not ridiculous
i am going to make it a point to have a look at a couple of various other blogposts right after i get my morning caffeine in me, cheers 
January 12th, 2011 at 8:52 pm
Can anyone please help me? I’m new to website design on wordpress and don’t really know how to write code for css. I don’t understand the instructions for using the WP plugin. Could anyone please give me a brief step-by-step to getting text on my site highlighted with this plugin? You can contact me through my site. Thank you!
January 13th, 2011 at 4:40 pm
Wonderfull info I will inform about it my dad as he is interested in it. Best Regards Bukmacherzy Promocje.
January 20th, 2011 at 7:25 pm
This is interesting, I will use it on my directory website
January 23rd, 2011 at 4:25 pm
it doesn’t work with IE 6 or 7. and firefox 2
January 24th, 2011 at 2:36 am
Aw, this was a very nice post. In thought I would like to put in writing like this moreover – taking time and precise effort to make a very good article… but what can I say… I procrastinate alot and in no way appear to get one thing done.
February 11th, 2011 at 3:37 am
Very helpful posting. In no way considered in which it has been that easy . I have spent a great deal of this time frame hunting for people that will describe it subject clearly plus you are the only one which actually did that. Thankyou to you! Continue the good work
February 15th, 2011 at 6:31 am
Pretty nice post. I just discovered your blog and also wanted to state that I get really appreciated browsing your blog post posts. No matter the reason I’ll be opting-in to your supply and I we imagine you write once more soon!
February 17th, 2011 at 2:40 am
cool web site yo have here
April 7th, 2011 at 10:02 am
I keep playing this news update lecture about receiving boundless online grant applications therefore i are exploring the most beneficial site to get one. Could you advise me please, where could i get some?
May 16th, 2011 at 7:10 am
With havin so much written content do you ever run into any issues of plagorism or copyright infringement? My site has a lot of exclusive content I’ve either created myself or outsourced but it seems a lot of it is popping it up all over the internet without my authorization. Do you know any solutions to help stop content from being stolen? I’d really appreciate it.
May 29th, 2011 at 2:08 pm
Hey, took me a little extra time to learn precisely what were you really intending to speak about with this, however , now i’m in it. Simply day or two back I was wondering about identical subject, and additionally noticed your write-up. This is a pity that my cousin just can’t look at this right now, i actually by now post this for them in e-mail. by the way, I really like your position. Keep on posting.
June 6th, 2011 at 1:58 am
An attention-grabbing dialogue is value comment. I believe that you need to write more on this topic, it won’t be a taboo topic however typically people are not enough to talk on such topics. To the next. Cheers
June 17th, 2011 at 7:17 am
This web site doesn’t show up appropriately on my iphone - you may want to try and fix that
June 23rd, 2011 at 11:30 pm
It’s onerous to find knowledgeable folks on this subject, but you sound like you understand what you’re speaking about! Thanks
July 11th, 2011 at 10:36 am
can I link to your post?
July 20th, 2011 at 7:11 pm
Oh my gosh amazing benefits! an incredible write-up. Thanks!
July 22nd, 2011 at 10:29 am
Youre so cool! I dont suppose Ive read anything like this before. So nice to find somebody with some original thoughts on this subject.
July 22nd, 2011 at 3:46 pm
Audio began playing anytime I opened this webpage, so annoying!
July 29th, 2011 at 12:57 pm
Your webpage does not display appropriately on my android - you may wanna try and fix that
July 29th, 2011 at 7:46 pm
Thanks i love your article about CSS Text Stroke | Blog - MapMyGlobe
July 30th, 2011 at 2:45 pm
I just added this webpage to my google reader, excellent stuff. Can not get enough!
August 3rd, 2011 at 4:32 am
I agree with your CSS Text Stroke | Blog - MapMyGlobe, fantastic post.
August 3rd, 2011 at 6:09 pm
I agree with your CSS Text Stroke | Blog - MapMyGlobe, excellent post.
August 5th, 2011 at 7:41 pm
Soo sad!
August 7th, 2011 at 12:00 am
I agree with your CSS Text Stroke | Blog - MapMyGlobe, good post.
August 7th, 2011 at 4:58 pm
As long as people continue to play the roles of slaves to this system, it will continue to exploit us all. Its truly obscene that people make so much money doing absolutely nothing but manipulating money are seen as Gods one earth instead of the thieves they are, Soros included.
August 17th, 2011 at 10:42 pm
Hello! I just would love to give a big thumbs up for the good info you have here on this submit. I will probably be coming again to your weblog for extra soon.
August 18th, 2011 at 5:25 am
I intended to post you one bit of remark to be able to give many thanks once again for these unique suggestions you’ve discussed on this site. This is tremendously open-handed of people like you in giving publicly what many people could have offered as an electronic book in order to make some profit on their own, mostly now that you might have tried it if you decided. Those pointers additionally acted to be a easy way to be aware that most people have similar fervor the same as my personal own to understand many more with regards to this condition. I believe there are several more pleasant moments up front for many who look over your blog.
August 18th, 2011 at 5:30 pm
I like your way of blogging. I bookmarked it to my bookmark website list and will be checking back soon.
August 22nd, 2011 at 8:38 am
i know Ben, he is my friend … he is not gay, he is just very ‘male friendly’
August 23rd, 2011 at 7:59 pm
It’s funny how can we do jokes about ‘Victoria’s Secrets’ from the Spice Girls! HAHAHAHA xD!!!
August 24th, 2011 at 6:12 pm
How can I choose how many posts shown on my blogger homepage?
August 27th, 2011 at 3:02 am
Hello! I just would like to give a huge thumbs up for the great info you will have here on this post. I will probably be coming again to your blog for more soon.
September 5th, 2011 at 2:05 pm
nice review, thx
September 10th, 2011 at 8:44 am
I have to show some appreciation to this writer just for rescuing me from such a issue. Just after researching through the search engines and obtaining advice which were not helpful, I figured my life was done. Living minus the strategies to the problems you’ve fixed all through your entire article content is a serious case, and the kind which may have in a negative way damaged my entire career if I hadn’t noticed your site. Your main skills and kindness in taking care of every item was excellent. I am not sure what I would’ve done if I had not come upon such a stuff like this. I can also now relish my future. Thanks a lot very much for the reliable and result oriented guide. I won’t be reluctant to recommend your web site to any person who wants and needs tips on this topic.
September 10th, 2011 at 11:07 am
Youre not the average website writer, guy. You definitely have anything powerful to add on the internet. Your design is so powerful that you could virtually get away with becoming a poor writer, but youre even incredible at expressing what you’ve to express. Such a outstanding weblog. Ill be back for a great deal a lot much more.
September 11th, 2011 at 8:10 am
I precisely wanted to thank you so much all over again. I am not sure the things that I could possibly have handled without those hints shared by you about such a subject matter. Previously it was an absolute troublesome setting in my opinion, but discovering the specialised way you processed it forced me to leap with contentment. Now i’m thankful for the help and in addition hope that you realize what an amazing job you’re carrying out educating some other people using a web site. Probably you’ve never got to know any of us.
September 12th, 2011 at 2:20 pm
Identified you blog site by way of bing I have to admit I m astounded with all your articles!
September 28th, 2011 at 9:23 pm
Great post, you have pointed out some fantastic points , I besides believe this s a very good post.
October 5th, 2011 at 1:23 am
it,s simple site I love it.nice .thank,s
October 28th, 2011 at 5:30 pm
Hey, just searching about some blogs, seems a pretty good platform you’re using. I’m currently utilizing WordPress for some of my sites but looking to change 1 certain of them over to a platform comparable to yours as a trial run. Anything in particular you would recommend about it?
November 8th, 2011 at 11:22 am
Read was interesting, stay in touch……
[…]please visit the sites we follow, including this one, as it represents our picks from the web[…]……
November 27th, 2011 at 1:04 pm
Websites worth visiting…
[…]here are some links to sites that we link to because we think they are worth visiting[…]……
December 1st, 2011 at 5:41 pm
You are my aspiration, I own few web logs and infrequently run out from post :). “To die for a religion is easier than to live it absolutely.” by Jorge Luis Borges.
December 2nd, 2011 at 1:31 am
Hey very cool blog!! Man .. Excellent .. Amazing .. I will bookmark your website and take the feeds also…I’m happy to find so many useful info here in the post, we need develop more strategies in this regard, thanks for sharing. . . . . .
December 5th, 2011 at 2:12 am
Websites we think you should visit…
[…]although websites we backlink to below are considerably not related to ours, we feel they are actually worth a go through, so have a look[…]……
December 8th, 2011 at 10:17 pm
Jasa Setting Mikrotik dan Proxy Cepat
December 10th, 2011 at 11:02 am
It’s hard to seek out knowledgeable individuals on this topic, but you sound like you already know what you’re talking about! Thanks bag
December 10th, 2011 at 1:24 pm
Links…
[…]Sites of interest we have a link to[…]……
December 21st, 2011 at 5:52 pm
Sites we Like……
[…] Every once in a while we choose blogs that we read. Listed below are the latest sites that we choose […]……
January 5th, 2012 at 12:06 am
I had this page saved some time before but my PC crashed. I have since gotten a new one and it took me a while to come across this! I also in fact like the design though.
January 5th, 2012 at 12:07 am
Hey There. I found your blog using msn. This is a really well written article. I will be sure to bookmark it and return to read more of your useful info. Thanks for the post. I’ll definitely return.
January 5th, 2012 at 8:07 am
Superb website…
[…]always a big fan of linking to bloggers that I love but don’t get a lot of link love from[…]……