It's so amazing to observe the evolution of the idea in a creative environment. This is why I love ALA discussions.
There is, I believe, an infinite number of ways for driving a nail into a board - starting from a hammer and working your way up to a microscope - and most of them get the work done. What to use - is entirely up to us.
This article introduce yet another way - great. Even better, it works! Anyone wants to port it to .NET or any other platform - go right ahead, and don't forget to share.
Waste of bandwidth? Hard to fathom without testing under real load; I would say, it might cause some issues in some cases, but this is not the point. The point is - the more ways of skinning the cat we discuss, the larger the world population of the skinned felines will grow.
Ewe.
I meant it in a positive way, actually. Hmm.
Anyway, great work, great concept, and great discussion.
Keep it up.
Sidetrack:
[LazyJim] ...Why not just have images for every letter of the alphabet and replace each letter on your page with a single-character image?...
This is yet another way. And, you don't even need PHP or any other server-side technology to implement it, you can get away with simple JavaScript: take a string of text, split it between characters, loop through the resulting array and write to the page whatever structure you wish to insert "YourArray[i].gif" image for each letter. Assuming that you have all the images pre-made and uploaded to the server.
Here is the sample.
I wasn't entirely happy with this solution, because each line of text would require numerous server trips on the first load (not only that, there was an issue with illegal characters in a file name, like " .gif", "?.gif", "..gif", etc.), so later I revised the script, using single image as a shifting background for the series of floating DIV's and a set of CSS rules to position the background:
www.gerasimenko.com
The next iteration of the script does, in fact, dynamically replace the H1, H2, etc. tags it finds on page onload. I was going to submit a tutorial on this matter to ALA for a while, and finally did earlier this week, inspired by the article we are discussing now (I wonder if this post will be considered a "previous publication" and ALA will dismiss my submission because of that).
Yet another way.
[Stewart] ...Using individual characters would not work, because 1) the kerning of characters would be destroyed and 2) the ALT attributes of each image would be rendered entirely useless, making this technique inaccessible...
The kerning will be affected, yes, but not destroyed, it's just a matter of dynamic positioning of each letter. Kerning in Photoshop is not bulletproof either, and highly typeface-dependable. The ALT attributes will make sense no more, true, but there is also TITLE you may be able to apply to the parent node element to make it up.
[Nevel] ...When using replacing images, you obviously don't think CSS is good enough to serve your needs...
True. It isn't. At least not yet. This is why Stewart developed this technique in a first place.
There is, I believe, an infinite number of ways for driving a nail into a board - starting from a hammer and working your way up to a microscope - and most of them get the work done. What to use - is entirely up to us.
This article introduce yet another way - great. Even better, it works! Anyone wants to port it to .NET or any other platform - go right ahead, and don't forget to share.
Waste of bandwidth? Hard to fathom without testing under real load; I would say, it might cause some issues in some cases, but this is not the point. The point is - the more ways of skinning the cat we discuss, the larger the world population of the skinned felines will grow.
Ewe.
I meant it in a positive way, actually. Hmm.
Anyway, great work, great concept, and great discussion.
Keep it up.
Sidetrack:
[LazyJim] ...Why not just have images for every letter of the alphabet and replace each letter on your page with a single-character image?...
This is yet another way. And, you don't even need PHP or any other server-side technology to implement it, you can get away with simple JavaScript: take a string of text, split it between characters, loop through the resulting array and write to the page whatever structure you wish to insert "YourArray[i].gif" image for each letter. Assuming that you have all the images pre-made and uploaded to the server.
Here is the sample.
I wasn't entirely happy with this solution, because each line of text would require numerous server trips on the first load (not only that, there was an issue with illegal characters in a file name, like " .gif", "?.gif", "..gif", etc.), so later I revised the script, using single image as a shifting background for the series of floating DIV's and a set of CSS rules to position the background:
www.gerasimenko.com
The next iteration of the script does, in fact, dynamically replace the H1, H2, etc. tags it finds on page onload. I was going to submit a tutorial on this matter to ALA for a while, and finally did earlier this week, inspired by the article we are discussing now (I wonder if this post will be considered a "previous publication" and ALA will dismiss my submission because of that).
Yet another way.
[Stewart] ...Using individual characters would not work, because 1) the kerning of characters would be destroyed and 2) the ALT attributes of each image would be rendered entirely useless, making this technique inaccessible...
The kerning will be affected, yes, but not destroyed, it's just a matter of dynamic positioning of each letter. Kerning in Photoshop is not bulletproof either, and highly typeface-dependable. The ALT attributes will make sense no more, true, but there is also TITLE you may be able to apply to the parent node element to make it up.
[Nevel] ...When using replacing images, you obviously don't think CSS is good enough to serve your needs...
True. It isn't. At least not yet. This is why Stewart developed this technique in a first place.