Unicode triangle U+25BA ► appears jagged?

613 Views Asked by At

► Is there a way to apply anti-aliasing/smoothing to the edges of this unicode triangle?

1

There are 1 best solutions below

0
On

Based on my testing it looks like the best bet is to use text-shadow, depending on which direction the triangle is pointing:

text-shadow: 1px 0px 0px rgba(0, 0, 0, .45); // To the right
text-shadow: -1px 0px 0px rgba(0, 0, 0, .45); // To the left

Each browser seems to handle exactly how this turns out a little differently. In Firefox it's barely noticeable, in Safari it looks fantastic.

I gathered all the different techniques for trying to smooth web fonts into one place on JSFiddle: http://jsfiddle.net/XdP6x/

Example of Unicode Triangle with various CSS faux-anti-aliasing techniques.

While I think the text-stroke option in Webkit looks slightly better than text-shadow, it wasn't possible to easily combine both techniques to get better results than text-shadow alone.

Font-smoothing did nothing and blurring looked hideous. I also tried transform:rotate(360deg); to no effect.

I also found various unicode triangles other than 25BA. Not all devices and browsers seem to support 25C0 and 25B6, I suggest using 25BA and 25C4.

--

Alternatively try using an SVG as a CSS background: http://jsfiddle.net/z6hw281a/