Browser support and workarounds for Turkish lira sign

Question

So Turkey recently decided to create a new sign for their lira:

Unicode 6.2 (released September 2012) added this to its repertoire as U+20BA ₺ TURKISH LIRA SIGN, and I've been asked to start using it in a web app I'm building. The problem is that nobody supports this yet (except apparently Windows 8), and it's not showing up as the usual square, question mark or block o' hex, but all sorts of other random things. The usually reliable fileformat.info thinks it's supposed to look like this:

...which is also what I get on OS X. Charbase gets it wrong too, but differently:

The practical question: Is there any sensible way to work around this? The largest complication is that the character is supposed to be allowed in arbitrary, user-editable text, so any image-based solutions are out the window.

And the theoretical question: as far as I can see, U+20BA has never had a character assigned to it, so where are those weird symbols creeping in from? I'm not getting the same issues with U+20B9 ₹ INDIAN RUPEE SIGN, which is nearly as new and badly supported, but at least fails more gracefully.

Answer 1

The best shot at present is probably to use the Google font Source Sans Pro. It contains TURKISH LIRA in its latin1-subset. So you can use e.g.

<link rel=stylesheet href=
"http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic&amp;subset=latin,latin-ext">
<style>
body { font-family: Source Sans Pro; }
</style>

However, this means that you should consider using Source Sans Pro as your overall font. There are two reasons to this. Suppose that you declare font-family: Arial, Source Sans Pro for example. First, IE 9 fails to render the TURKISH LIRA then (it is not good at using fonts, really). Second, on browsers that use fonts technically OK, an expression like “₺50” (a number preceded by TURKISH LIRA) will look odd, since the digits are much taller than the currency sign. The reason is that in Source Sans Pro, TURKISH LIRA has been designed to match the height of digits in that font, and in Arial, digits are smaller in height.

As an alternative, you could use an image of TURKISH LIRA in a relatively large size and use img element to embed it, with height property set in em units to make it scale to the font size. The reason for the largish size is that images generally scale well downwards but not that well upwards. In my Guide to using special characters in HTML, I suggest using height: 0.8em for characters embedded as images, but the exact dimensioning really depends on the design of the character and the image and how it should relate to characters in a font. The normal principle is to make currency characters like “$”, “£”, and “€” occupy the same height as digits (specifically, “lining figures”, or “uppercase digits”, which is what most fonts have by default; Source Sans Pro has “oldstyle figures” too, but they need to be selected using CSS).

To put things into perspective, TURKISH LIRA is the newest character in Unicode, added last September, and it has usually taken about ten years or more from the adoption of a character into Unicode to its general availability in fonts.

P.S. This is a font issue, not a browser issue, though some browsers (IE) still have difficulties in picking up characters from different fonts.

Answer 2

You can deliver your own font over the web via: https://developer.mozilla.org/en-US/docs/CSS/@font-face and create your own font via http://fontforge.org/

If you are using XML and your requirements don't disallow it, you could use entities to define some markup which includes image markup for the time being (and could be replaced with the Unicode character later), or do something similar in HTML via JS or CSS.