direction: rtl not working on IE11

Question

I have setup an email obfuscation according to this question

CSS:

.e-mail:before {
    content: attr(data-website) "\0040" attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
}

HTML:

<span class="e-mail" data-user="otcatnoc" data-website="moc.shtopurg">

But it doesnt work on IE 11... any ideas on how can it be fixed or what did i make wrong?

Any help will be apreciated, thanks

I tried your code and it doesn't work on IE11. I wouldn't be surprised if this is a bug or is intentional coming from MS. I would use an image if it's IE (any version I guess) to protect your email. — Eric Martinez, May 30 '15 at 01:31

score 5 · Accepted Answer · answered May 30 '15 at 05:00

You're not doing anything wrong, so no worries there. It's just that IE, although it knows about direction:rtl, forgets to apply it to the :before as well.

One way to make it work is to make the container of the span rtl, so that the whole of the span, including its :before, gets reversed. So give an id to the p and apply the style to that.

#mailbox {
  direction: rtl;
  unicode-bidi: bidi-override;
  text-align: left;
}
.e-mail:before {
  content: attr(data-website)"\0040" attr(data-user);
}

<p id="mailbox">
  <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
  <span class="e-mail" data-user="otcatnoc" data-website="moc.shtopurg"></span>
</p>

Works in all browsers that I tested on (FF 3.6 and up, Chrome 20 and up, IE8 and up).

direction: rtl not working on IE11

1 Answers1