Alex Rivera | Logout

Does unicode or HTML have a vertical double guillemet (chevron)?

Asked 2011-11-14T17:07:35.613
24

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:

Example of vertical single and double chevrons

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

Edit
Report

1 Answer

12

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).

answered 2011-11-14T18:06:33.560

Your Answer