View Full Version : Text Directions

08-06-2002, 10:07 AM
This is a very general question (by this I mean that the answer doesn't have to fit like a glove):

Once, on WebFX or JSFx (I can't remember which), I saw a
string of text--not an image--that otherwise was just that,
except for the fact that it was positioned lenghtwise (think 90
degree rotation).

Needless to say, this shocked me, but it also got me thinking:
What if this could be done with images and scrolling text? What
if you could rotate it at angles under 90 degrees?
(Sounds interesting--Redundant yes--but nonetheless, interesting).

Which brings around my question:
How was it done?

I checked the source code, but there wasn't anything
unusual, because I don't actually remember a link to a
Stylesheet, and the text was highlightable......


08-06-2002, 10:22 AM
<div style="position:absolute;height:20px;width:20px;left:0;top:0">T</div>
<div style="position:absolute;height:20px;width:20px;left:0;top:25">E</div>
<div style="position:absolute;height:20px;width:20px;left:0;top:50">X</div>
<div style="position:absolute;height:20px;width:20px;left:0;top:75">T</div>

08-06-2002, 10:34 AM
Thanks, it's close, but the text actually is rotated.

If (possible)
{flip screen sideways}
{rotate head}
I meant that to be humorous *frowns*

as such:


08-06-2002, 10:36 AM
of course, i just put up an example, you could change (programmatically) the top and left properties to any coordinates

08-06-2002, 02:10 PM
This effect is done at WebFX. They used IE-only filters to accomplish the efffect. Here is the code segment from their CSS file:

#webfx-about {
position: absolute;
background: white;
top: 102px;
right: 10px;
width: 20px;
writing-mode: tb-rl;
filter: flipH() flipV() alpha(opacity=50);

There is no copyright notice on their page I can find, but I suggest you add it to your stylesheet regardless.

Hope that helps!

Happy coding! :)

08-06-2002, 02:31 PM
I must of overlooked it!


PS: I'll be sure to add a note that it came from WebFx until I
figure out the exact principle and figure out how to do it myself,
at which point I'll merely add a reference to it.