4

I'm having a problem with UTF-8 character on the page title, I want to add this on the title of the page --> ♫ <--- (the Music symbol)

The thing is, sometimes it works (on Google Chrome) and sometimes it doesn't (when it doesn't work, it appears a square that is supposed to be an error of encoding) weirdly. And in firefox, it always work when you look to the title in the top of the window (the title that appears up in your page) but the title that appears in the bar below appears the square thing again. :/ What do I do to fix this?

I'm defining the title via Javascript by a js file which I'm using PHP to define it utf-8 as well.

var title = "♫ My Music"; document.title = title;

by the way, it seems to work always on Linux, but on Windows, it does those stuff. =/

Thanks in advance.

Grego
  • 2,220
  • 9
  • 43
  • 64
  • How are you generating the HTML? PHP? Is your PHP file in UTF-8? Do you tell the browser it's UTF-8 (via the Content-Type header or a meta http-equiv in the HTML head)? (You can check the headers with Fiddler2) – Cameron Jan 14 '12 at 22:21

4 Answers4

6

This is a font problem rather than an encoding problem; a small rectangle in place of a character typically means that the character is not present in the font(s) used.

Browsers typically use some specific fonts when they render title element contents (somewhere outside the page itself). These fonts may depend on the settings in the operating systems. On Windows 7 for example, the default for them is 9pt Segoe UI, a relatively rich font, whereas older systems have more limited fonts. Anyway, that’s outside an author’s hands.

So the conclusion is that special symbols should be avoided in title elements. Their rendering is not guaranteed, and they probably have no value as far as search engines are considered.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks for the explanation, well it seems that Google Chrome at least understood when I added the style changing the font, because I think the title font might be random, Let's see if like this, it will work, yea I know it's valueless but it's made thru javascript after a condition so it doesn't matter for search engines. Thanks. – Grego Jan 15 '12 at 11:56
3

Have you added the meta tag for charset to your HTML?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Milad Naseri
  • 4,053
  • 1
  • 27
  • 39
  • 1
    This should be the accepted answer. If you're inserting utf-8 into your content, the renderer should be instructed about the encoding. – ubarbaxor Mar 30 '21 at 20:46
1

sometimes it works (on Google Chrome) and sometimes it doesn't (when it doesn't work, it appears a square that is supposed to be an error of encoding) weirdly

This is most likely down to the font used by your browser, and your Operating System. If the character is defined in the font, it will show up. If it isn't, it won't.

There isn't much you can do about this, unfortunately - both these things are outside of your control.

Somewhat related: Unicode support in Web standard fonts

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
-1

I resolve this problem (year in Spanish) with this notation:

title="A & # 241 ; o"

IMPORTANT: I insert blanks spaces between characters for adequate renderization.

Kirk
  • 16,182
  • 20
  • 80
  • 112
David
  • 11