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
