Question

Does anybody know if there’s a double chevron symbol in unicode/HTML-space similar to the double guillemet represented by » (»)?

In other words, I’m trying to avoid using an image if I can get by with text, but I need something like this:

It’s the double chevron I can’t seem to figure out. Looks like graphics for me it is.

Answer 1

I can’t give you the character entity that you want, but it’s possible to effect an…alternative, and still not use images (though it does require that the text itself be wrapped in an element, in this case span):

<span class="shadowed">^</span>
<span class="rotated">&raquo;</span>

CSS:

span { /* this is all, pretty much, just for the aesthetics, and to be adapted */
    margin: 0 auto 1em auto;
    font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: #000;
    background-color: #ffa;
    display: block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 0.5em;
    text-align: center;
}

span.shadowed {
    text-shadow: 0 0.5em 0 #000;
}

span.rotated {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

JS Fiddle demo.

The above span.rotated section, for IE < 10 compatibility (using filters, whereas IE 10 (or possibly 9) would/should use the -ms-transform or, simply, transform CSS3), using a filter approach:

span.rotated {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    /* IE < 10 follows */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}​

JS Fiddle demo (works in IE 7/XP, other versions I’m unable to test).