Play symbol (▶) squished in document.title

Question

Adding to the question on Why does the HTML symbol for ▶ not work in document.title, when I add the play symbol to the document title using the properly escaped javascript hex value, the symbol seems squished:

JavaScript:

document.title = '\u25BA' + document.title;

Inside Page (correct)

Inside Title (not so correct)

See this fiddle for a working model. I've added /show/light so the javascript can actually access the document title on the main page, but if you take off the extension, you can see the code as well.

jsFiddle

This appears to be happening on all major browsers (Chrome, Firefox, IE).

Tested (on Win8) in:

• Chrome: version 30.0
• Firefox: version 22.0
• IE: version 10.0

When I go to YouTube, it looks fine, so I'm not positive it's a Browser Specific Issue.

Answer 1

By Pasting the symbol that YouTube uses (▶) into codepoints.net, you can see that they are actually using a different unicode version. The character returned is U+25B6 (not to be confused with 25B8 and 25BA)

This should look better:

function PrependPageTitle(player) {
    var playIcon = '\u25B6 ';
    var startsWithIcon = document.title.substring(0, playIcon.length)===playIcon;

    if (player.paused && startsWithIcon) {
        document.title = document.title.slice(playIcon.length);
    } else if (!player.paused && !startsWithIcon) {
        document.title = playIcon + document.title;
    }
}

Demo Here:

jsFiddle