inverting a character...

codegoboom

10-15-2004, 02:45 AM

Is there something like the direction property for flipping text upside down?

Antoniohawk

10-15-2004, 02:50 AM

Nothing that I know of. Possibly in CSS3...

liorean

10-15-2004, 02:59 AM

Nothing any browser supports yet. <http://www.w3.org/TR/2003/CR-css3-text-20030514/#GlyphOrientation> is one place you can read about it. Fantasai wrote an article about related properties recently, <http://fantasai.inkedblade.net/style/discuss/vertical-text/#shaping>

ArcticFox

10-15-2004, 03:21 AM

Anyone try this:

style="filter:FlipV() FlipH(); width:300px;"

*Width is required, adjust as needed...

I'm thinking it's IE only, though...
*runs for cover*

liorean

10-15-2004, 03:41 AM

codegoboom

10-15-2004, 04:07 AM

Anyone try this:

style="filter:FlipV() FlipH(); width:300px;"
Yeah, did you? (doesn't seem to work...)

ArcticFox

10-15-2004, 04:08 AM

In a user oriented web, any feature that does not exist cross browsers and platforms does not exist at all - or at least, that's what you should assume if you consider or are already using one.

Using such a feature is by no means in itself wrong, but the risk is that you forget about the feature not existing elsewhere. Coding so that such a feature is required for the site to work, on the other hand, is wrong, usability and accessiblity wise.

Uh... I'll try to refrain from thinking those comments were of IE-bashing thoughts...

I do think I agree with them in some way -

1) Don't forget that not everyone will see these effects, and
2) Please don't code a site as to make it impossible to surf without a 'certain' browser or OS.

Well said, liorean! :D

Yeah, did you? (doesn't seem to work...)
What browser/OS are you using? Let's see your code. :)

gohankid77

10-15-2004, 04:25 AM

It is the IE-proprietary CSS property known as 'filter'. You can read about it at blooberry.com: http://www.blooberry.com/indexdot/css/properties/dynamic/filter.htm

codegoboom

10-15-2004, 05:07 AM

I know what it is, but "flipV" doesn't seem to work...
Here's the code:

<div style="text-align:center">
<span style="font:50px Webdings">"</span>
<div id="strand" style="margin-top:-22px;margin-bottom:-14px;width:1px;height:300px;background:black"></div>
<span style="font:50px Webdings">!</span>
</div>
now, let's flip spidey! :D
actually, this works:
<span contenteditable="true" style="font:50px Webdings;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1)">!</span>
...but the spider gets bloated (character distortion) :rolleyes:

ArcticFox

10-15-2004, 05:16 AM

...but the spider gets bloated (character distortion)

This doesn't work for you?:

<span style="font:50px Webdings; filter:FlipV() FlipH(); width:1px;">!</span>

Although I'm looking at the simplicity of the code you posted:
BasicImage(rotation=2)

Just rotate it 1, 2, 3 or 4... simple.

codegoboom

10-15-2004, 05:31 AM

doh :p yes that works... it failed with different code than above.
...still gets mangled though: do you see that?

ArcticFox

10-15-2004, 05:41 AM

I tested the code using this page:
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image

When I put the code on the left screen, the output shows on the right screen...

To me it looks fine - upsidedown spider.

When you say mangled, are you looking at the jagged edge of the spider? If so, please keep in mind that it's not an image. :confused: Looks the same way right-side up, too...

codegoboom

10-15-2004, 05:58 AM

:confused: Looks the same way right-side up, too...
Here's a screenshot of the difference:

liorean

10-15-2004, 06:03 AM

Interesting to note that font antialiasing doesn't work on the filtered spider.

ArcticFox

10-15-2004, 06:10 AM

Huh... I don't see that problem on this side. Sorry.
(WinXP, IE6.0.2800)

Now that I double-checked, I'm thinking that "antialiasing" doesn't happen on my side at all - I get the jagged edges up or down.

codegoboom

10-15-2004, 06:22 AM

Well, I guess dingbats are good for nothing on the web... :rolleyes:
This solves the antialiasing problem, btw:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>vml spider</title>
<style>
v\:*
{
behavior: url(#default#VML);
}
</style>
</head>
<body>
<v:shape id="text01"
strokecolor="gray"
coordsize="50 50"
path="m0,50l50,50e"
style="width:1px;height:1px;flip:y">
<v:path textpathok="True" />
<v:fill on="true" color="black" type="solid"/>
<v:textpath on="true" style="font:50px Webdings" string="!"/>
</v:shape>
</body>
</html>

Thanks for the input, everyone. :)

]|V|[agnus

10-15-2004, 08:10 AM

D'oh... didn't see "Webdings" part... thought you were just trying to flip an exclamation point. Heh, ne'ermind...

AaronW

10-15-2004, 01:31 PM

Am I overlooking something, or why aren't you using an image for this? :confused:

Roy Sinclair

10-15-2004, 04:56 PM

Am I overlooking something, or why aren't you using an image for this? :confused:

The whole thread is about flipping text, "spidey" just happens to be a text character and the anit-aliasing problem would happen with normal characters as well so it's actually relevant to the problem.

I would add that making "spidey" larger seems to make a lot cleaner character.

AaronW

10-15-2004, 08:19 PM

If he's flipping a graphical character, why not make it a graphic and flip it in your image editor? Are you flipping the whole text, or was spidey just an example?

codegoboom

10-15-2004, 08:50 PM

Yes, spidey was an example... unfortunately of what cannot be done reliably.

AaronW

10-15-2004, 09:44 PM

Yeah, CSS needs to control rotation. Maybe in a bunch of years CSS'll be able to rotate objects in three-space too. Then we can all wave goodbye to Flash.

codegoboom

10-16-2004, 04:04 AM

I'm thinking that "antialiasing" doesn't happen on my side at all - I get the jagged edges up or down.
You may be able to fix that by checking "ClearType" from desktop Display Properties > Appearance/Effects: [] Use the following method to smooth edges of screen fonts: ClearType
I shut it off, and everything looked just terrible! :eek:

mindlessLemming

10-16-2004, 10:14 AM

Yeah, CSS needs to control rotation. Maybe in a bunch of years CSS'll be able to rotate objects in three-space too. Then we can all wave goodbye to Flash.
...and say hello to SVG