Reverse text with CSS (32 very special hex digits)

Sometimes you wake up and feel that big things are moving around you. You follow the news and find that people are uniting over something simple as a number. You read about people calling them rebels.

I think this is a good time to show a little CSS trick.

Let me present two properties that together reverse a string of text: direction and unicode-bidi:

0C 88 65 36 5C 65 14 8D B5 3E 47 D9 20 11 9F 90

The result, when this is posted on your blog (*hint*) is the following:


0C 88 65 36 5C 65 14 8D B5 3E 47 D9 20 11 9F 90

Am I a CSS rebel now? And are they going to sue me on the basis of my HTML or my CSS?

7 responses to “Reverse text with CSS (32 very special hex digits)

  1. Pingback: Elliot Swan | Snippit: CSS Rebel
  2. Um, the Diggers aren’t rebels. The Diggers are lawbreakers. This is the lamest thing to ever be considered a revolution. Ever. It’s an HD-DVD encryption key! Woo! Let’s see the so-called “rebels” actually make a positive difference in the world. Now that would be a revolution.

  3. Awesome – was looking for something like this to protect emails and phone numbers on a website from scrapers and bots!

    in case anyone else is interested:

    function cProtect($text)
    {
    //protect the contact info by reversing phone number and email, and then re-reverse it again via css
    $phone = get_phone($text);
    $email = get_email($text);
    $revphone = str_mirror($phone);
    $revemail = str_mirror($email);

    $text = str_replace($phone, $revphone, $text);
    $text = str_replace($email, $revemail, $text);
    return $text;
    }

    function str_mirror($string)
    {
    $res = strrev($string);
    $res = ''.$res.'';
    return $res;
    }

    function get_phone($string)
    {
    $regex = '/\(?([0-9]{2,4})\)?[-. ]?([0-9]{2,4})[-. ]?([0-9]{2,4})[-. ]?(([0-9]{2,4}))?[-. ]?([0-9]{2,4})?[-. ]?/is';
    preg_match($regex, $string, $match);
    if(isset($match[0]))
    {
    return $match[0];
    }
    return false;
    }

    function get_email($string)
    {
    $regex = "/([_a-z0-9-]+)(\.[_a-z0-9-]+)*@([a-z0-9-]+)(\.[a-z0-9-]+)*(\.[a-z]{2,4})/is";
    preg_match($regex, $string, $match);
    if(isset($match[0]))
    {
    return $match[0];
    }
    return false;
    }

    $text = "please call at 123 456 789, or email me at test@example.com";

    echo cProtect($text);

    Result:

    please call at 987 654 321, or email me at moc.elpmaxe@tset

  4. @ Metric Stormtrooper,

    That’s all well and dandy, but when someone copy and pastes the e-mail address, it will be backwards still :)

Comments are closed.