...

View Full Version : 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
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.

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum