Re: Upside Down Fu character

From: Otto Stolz <Otto.Stolz_at_uni-konstanz.de>

> Hello,
>
> I have tested the textUpsideDown definition from
> <http://www.codeproject.com/Tips/166266/Making-Text-Upside-down-u>
> with three browsers:
> Firefox 8.0.1,
> Opera 10.52;
> Internet Explorer 8.0.6001.187702
> The latter asks for the user’s consent to interpret scripts,
> before it applies the .txtUpsideDown class definition.
> Cf. attached source file, and attached screen shot for the results.
>
> As <vanisaac_at_boil.afraid.org> already has observed,
> the upside-down text either appears below the current line,
> or overlaps other text in the current line. My test case
> shows, that in the former case, the upside-down text will
> overlap the following line (in this test a horizontal ruler).
>
> Best wishes,
> Otto Stolz

I think I may have it figured out, at least part way. The code

<style type="text/css">
.txtUpsideDown
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE8 */
-moz-transform: rotate(-180deg); /* FF3.5+ */
-o-transform: rotate(-180deg); /* Opera 10.5 */
-webkit-transform: rotate(-180deg); /* Safari 3.1+, Chrome */
position: relative;
}
</style>
福<span class="txtUpsideDown">福</span>福

seems to work - setting "position: relative" instead of absolute and using <span> instead of <div>. It works in Firefox, although when I run it on IE8, it doesn't work for some reason. I'm still trying to work out the bugs.

-Van
Received on Thu Jan 05 2012 - 01:06:52 CST