Comments on: text-shadow hack for firefox

By: Richard

Richard — Mon, 13 Aug 2007 12:04:01 +0000

Ah, I forgot to add last time, but CSS3 will be included in Opera 9.5. And since opera users are more tech-aware then IE users, they’ll update to the new version quicker.

So that will be 3 of the 4 main rendering engines all supporting text-shadow (which will be something like 8 of the top 9 browsers!)

By: Richard

Richard — Mon, 13 Aug 2007 11:41:04 +0000

I recently found this Firefox plugin:

http://piro.sakura.ne.jp/xul/_textshadow.html.en

It’s only a matter of time before this is incorporated into nightlies by defailt.

By: Kae Verens

Kae Verens — Wed, 01 Aug 2007 08:14:23 +0000

It’s a fair cop. As mentioned in the title, this script is just a hack, and should not be considered as absolutely correct. It was done to demonstrate that it is possible to do text-shadow in Firefox even if Firefox does not yet do it natively.

To be fair, though, screen readers should probably not be running JavaScript anyway, so this script should be safe in that case.

(I’m also on the mailinglist for the Firefox bug entry for this, btw)

If you liked this hack, please also see my border-radius hack.

By: Piro

Piro — Wed, 01 Aug 2007 05:38:00 +0000

FYI, the add-on includes a solution of the problem:
> This technique seems to have another issue that I didn’t see mentioned: it duplicates the text multiple times, which is bad for text selection; un?semantic; and, I would imagine, poor for assistive technologies such as screen readers.

By: Piro

Piro — Wed, 01 Aug 2007 05:34:07 +0000

I’ve made an add-on version for Firefox users.
http://piro.sakura.ne.jp/xul/_textshadow.html.en
(I discovered this entry after I published the addon…)

By: Patrick Garies

Patrick Garies — Tue, 31 Jul 2007 22:55:03 +0000

This technique seems to have another issue that I didn’t see mentioned: it duplicates the text multiple times, which is bad for text selection; un?semantic; and, I would imagine, poor for assistive technologies such as screen readers.

Quote (Mardeg): I’ve found out that the reason for this is Opera strictly adhere’s to the W3C spec of .addEventListener only being applicable to nodes, and since it doesn’t consider window. a real node, then window.addEventListener() doesn’t exist in Opera.

The correct code is document.defaultView.addEventListener anyway.

Quote (Mardeg): (document.addEventListener)document.addEventListener(”DOMContentLoaded”, textShadows, null);

I don’t believe that DOMContentLoaded is supported by Safari. The easiest way to get this effect is to call the script as it’s loaded by calling it at the end of the body element instead of within the head element. In this case, the call to the (on)load and/or DOMContentLoaded events becomes unnecessary.

By: Mardeg

Mardeg — Fri, 23 Jun 2006 20:01:40 +0000

Oops, the document.write line for the IE hack disappeared from the above post. Use this line and replace the [ ] with normal angle brackets for tags:

document.write(”[script id=__ie_onload defer src=javascript:void(0)][\/script]“);

By: Mardeg

Mardeg — Fri, 23 Jun 2006 19:54:13 +0000

This is best initiated as soon as the text appears on the page instead of after all the binary content is loaded, so at the beginning of the file replace:

if(window.addEventListener)window.addEventListener(’load’,textShadows,false);
else if(window.attachEvent)window.attachEvent(’onload’,textShadows);

with:

if (document.addEventListener)document.addEventListener(”DOMContentLoaded”, textShadows, null);
/*@cc_on @*/
/*@if (@_win32)
document.write(”");
var script = document.getElementById(”__ie_onload”);
script.onreadystatechange = function() {
if (this.readyState == “complete”) {
textShadows(); // call the onload handler
}
};
/*@end @*/

and to stop textShadows() from being called by more than one onload event, insert the following lines at the very beginning of the textShadows() function:

if (arguments.callee.done) return;
arguments.callee.done = true;

Btw, this still doesn’t work in Opera 9, and still messes up when the browser is resized.

I’m wondering if anyone has tried this as a greasemonkey script (the Firefox extension that lets you insert javascript into any page)?

By: » multiple text-shadows « klog

» multiple text-shadows « klog — Sat, 03 Jun 2006 11:58:34 +0000

[...] I took that as a challenge, and have upgraded my old text-shadow hack to handle multiple shadows. [...]

By: Rick

Rick — Thu, 23 Feb 2006 19:42:29 +0000

Excellent javascript! However, it doesn’t seam to work with Opera 8.5.