Text-overflow: Ellipsis Fighting With Direction: Rtl

I like displaying emails properly, meaning not [at]. To fight the bots I reverse the text in the html and then re-reverse it with css using direction: rtl. That worked fine for ma

Solution 1:

The browser is given a string. When you tell it to shrink it and replace what doesn't fit with an ellipsis, it will always cut from the end of the string. It doesn't know your string is reversed and it trusts you when you tell it: this string should be read from right to left (direction:rtl). The end is on the left side.

Therefore, with CSS alone, the closest (and most decent) thing you can get is cutting from left side and placing the ellipsis where the cut was made:

a.direction {
  direction: rtl;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  /* proof of concept: */width: 25%;
  display: inline-block;
}

<ahref="/email.php?to=rossa"class="direction">&#x202e;ed.dlefla-znediser-krap@assoR.S</a>

You have two options now. Either

1. give up on text-overflow: ellipsis and fake it using JavaScript (works, but it's ugly) or...
2. you could reverse the string before you render it and give up on direction: rtl (which is actually a trick, it's not correct and is the source of the problem). Of course, you need to make sure you only do this for browsers, not for bots. The easiest way would be to check navigator.userAgent:

if (!/bot|crawler|spider|crawling/i.test(navigator.userAgent)) {
  var directions = document.querySelectorAll('.direction');
  for (var i = 0; i < directions.length; i++ ) {
    directions[i].textContent = directions[i].textContent.split('').reverse().join('');
  }
}

a.direction {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  max-width: 25%;
  display: inline-block;
}

<ahref="/email.php?to=rossa"class="direction">ed.dlefla-znediser-krap@assoR.S</a>

However, navigator.userAgent is not to be trusted, as malicious bots will never declare themselves as bots. So you might want to use safer methods of excluding bots, such as a link (clickable only by bots) pointing to a php script that would set a session variable for them. If the variable is set, just add an invisible element to your page and in the above JavaScript, instead of checking navigator.userAgent, check for the added element. If you want the emails correctly indexed by certain search engines, you should exclude them from this check.