Problem: grey shadow in CSS vertical text

[Marfola]

I'm trying to implement bottom-to-top vertical text using CSS attributes in IE :
writing-mode: tb-rl;
filter: flipv fliph;

But I have encountered the following: the text is displayed with a grey shadow (instead of anti-alias).

It seems that the problem is caused by the "filter:flip" attribute. Does anyone have a work around? (If I write the same text without the "filter" attribute, the grey shadow disappears but my text is written top-to-bottom!)

Here's my stylesheet:

.verticaltext{
  font-family: Arial;
  font-size: 13px;
  font-weight:bold;
  color:#FF9100;
  position:absolute; top:1px; height:90px;
  width: 16px;
  writing-mode: tb-rl;
  filter: flipv fliph;
}

and here's the HTML:

<div class="verticaltext">Vertical Text</div>

I have also tried to use other CSS3 attributes like:
block-progression: ttb;
direction : rtl;

but they don't seem to work in IE.

Does someone know how to remove the grey shadow or know of another way to implement the bottom-to-top vertical text?

[sgietz]

Do you have to use text, or can you get away with using an image?

[Marfola]

I want to use text.

[swa66]

Actually, you should look for a fall-back solution for those not willing/able to use MSIE (e.g. Linux, Mac users).

[Marfola]

Thanks, but how can I get my code works correctly on IE? As I mentioned above, I got a grey shadow around the text.