20

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.

Charles
  • 48,924
  • 13
  • 96
  • 136
jcolebrand
  • 15,923
  • 10
  • 71
  • 117
  • 3
    Avoiding images is a great goal, but lots of people end up browsing with a browser that doesn't do unicode right anyway; they'll see boxes. I'd personally recommend an image. FWIW I didn't see anything like this scanning http://en.wikipedia.org/wiki/List_of_Unicode_characters – Ben Brocka Nov 14 '11 at 17:12
  • 1
    I don't know of chevron, but it has the circumflex: `^` / accented circumflex: `ˆ` – Smamatti Nov 14 '11 at 17:51

4 Answers4

31

May be this site will help you http://shapecatcher.com/ , very useful!

fliptheweb
  • 1,058
  • 1
  • 6
  • 13
  • 3
    Thanks, that's a cool site. Won't win you an accept checkmark, but it'll get you a +1 from me. Found some interesting substitutes for the up double chevron, but nothing for the down double chevron. – jcolebrand Nov 14 '11 at 18:16
  • 3
    I wish I had known about this before. – jagill May 01 '13 at 22:18
17

︽ U+FE3D PRESENTATION FORM FOR VERTICAL LEFT DOUBLE ANGLE BRACKET

︾ U+FE3E PRESENTATION FORM FOR VERTICAL RIGHT DOUBLE ANGLE BRACKET

These require a Chinese or Japanese font though.

Ignacio Vazquez-Abrams
  • 699,552
  • 132
  • 1,235
  • 1,283
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).

David says reinstate Monica
  • 230,743
  • 47
  • 350
  • 385
  • Very ingenious! Bet it doesn't work in IE does it? :-\ (edit: IE8 and under no) – jcolebrand Nov 14 '11 at 18:07
  • 1
    No, I was going to leave a snarky comment adjacent to the `-ms-rotate` saying something along the lines of 'just from a sense of optimism...', but I felt it just made the code noisier... – David says reinstate Monica Nov 14 '11 at 18:16
  • 2
    How about ie filters for rotation? Check this article (element rotation chapter) http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ – fliptheweb Nov 14 '11 at 18:41
  • It's entirely possible, but not having IE (I'm a hobbyist, not pro) to test with I can't verify that they work. If you're able to try them out, I'd be more than happy for you to edit them into the answer. Or post them as a separate answer, obviously. – David says reinstate Monica Nov 14 '11 at 18:43
  • Accepting because this is probably how I would go once IE10 is mainstream (thus meaning IE8 is the bastard child of no-support) but for now I already had a double vertical chevron in an image sprite, so I continue onwards with images. – jcolebrand Nov 15 '11 at 15:53
  • @fliptheweb: thanks! It took me some to recall this answer; but using `filter` worked (at least for IE7/XP) perfectly. Other versions/platforms I'm unable to test at this time, sadly. – David says reinstate Monica Jun 21 '12 at 11:33
1

There's a problem with rotation. If you apply rotation(90deg) and rotation(-90deg) to two separate » you'll see that their position changes. A hacky way to fix it is to apply direction: rtl like this:

http://codepen.io/tomasz86/pen/lmCaL

tomasz86
  • 803
  • 10
  • 9