Weird HTML rendering thing - Cyrillic characters... Please help.

Can anyone hit me with a clue bat on this one?

Okay, using Firefox, go here:

http://vixyandtony.com/index.html#select=Vixy
Select the "Vixy's Blog" tab if not already.

Note that portions of the lyric she posted are mis-rendered garbage characters.

Now, right click on the page, select "Save Page As..". Under "Save as type:" choose "Web page, html only." Give it a fun name like "test.html".

Now, the HTML file you just saved to your hard disk, which is, in theory, the same thing you just surfed to on the web... Open that HTML file on your hard disk in Firefox.

You'll notice that the graphics don't work but we don't care about that. Click on the "Vixy's Blog" tab, and note that the characters that were garbage on the web version are perfectly good Cyrillic on the one from your hard disk.

Why do the two things render differently? Why does the hard disk one render right and the web one render as garbage characters? What do I need to fix to make the web one look pretty like the hard disk one?

Page encoding, the text is in Unicode UTF-8 but the browsers think it is ANSI. Add a meta tag to your head element:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Ok that is odd.

I loaded the page in Chrome, the characters were broken. I forced the encoding to UTF-8 in Chrome the characters were fixed.

I then checked the source of the page and I was sure there was no content type tag. I then reloaded the page and for some reason the characters were fixed. I checked the source again and sure enough there was a correct content type tag.

Did you fix it in the meantime or am I having a pre-first-coffee moment of madness ?


Edit:

Loaded it in FF and the characters are broken with the tag there. I guess Chrome was remembering my forced selection of encoding.

Anyway, what ever is going on it is an encoding issue of some sort, something is confusing the browsers as to the encoding of the page.

You web server at vixyandtony.com is emitting the following header for index.html:

Content-Type: text/html; charset=ISO-8859-1

That is likely to be the cause, the browsers are using that rather than the utf-8 set in the meta tag.

I'm not up on Apache and charsets, but this looks like what you need:

http://www.w3.org/International/questions/qa-htaccess-charset

Yeah that UTF-8 tag should be there.

I tried adding extra ones in different spots (earlier before I made the post, so that does not explain your experience) and it never got better.

Odd that (for me at least) it comes up fine on the disk and bad in the browser, when the two things should be using the same UTF-8 tag.

Aha the web server is doing it. Okay, is there a way I can fix that by editing files in my HTML directory?

We you could save the pages as ANSI as long as all the characters in the page really are in the same ANSI codepage. But you don't really want to do that, what you really want to do is fix the server to emit the correct headers.

See the edit I made to my previous post.

Perfect. Saw the edit, will do the work to htaccess file. THANKS!!!

Anyway, the far more important question is, when are you going to release another album ?

Thirteen is one of my most played albums over the last couple of years...

Thank you so much!!

I was actually mixing one of the songs for the new album this week. The album will take quite a while but we've got two songs recorded so far. :-)

Now that your issue is fixed, Tony, is it okay if I ask about a web font rendering issue as well?

I've noticed that on several sites, Chrome displays a certain type of font poorly in a way that FF and IE do not. I've attached a screenshot of what it looks like in Chrome versus FF. The only site I could remember that does this is some Cisco pages, but I've seen it on others.

Is there a way to fix this for Chrome, my preferred browser?

I haven't solved my issue quite yet, I was going to fix it today. :-)

Is yours an issue where small-point-size fonts get rendered without antialiasing?

Or maybe it's not the point size, maybe the rendering engine can't handle that particular combination of elements and layers, and it loses the AA in the process?

Haha, sorry, I thought you weren't using this thread anymore and that I could use it for a while

I hadn't noticed, but I think you're right about the antialiasing. Why would that happen, though? Is it something I'd be able to fix on my end?

I've got no idea, all I know is that when I zoom in on that page it looks like a font where the antialiasing just failed.

I successfully fixed the web site just now, and it was funny. I made the repair to the .htaccess file to make the Cyrillic post come out correct, and that broke all the other places where I'd special-cased foreign characters (resumé, bodhrán ©, etc) and I had to fix all of those. I'd managed to find work-arounds for that stuff years ago without solving the root problem. Now that I'd solved the root problem, the other stuff stopped working.

Cisco is using cufon to do font rendering. It looks like there may be a known problem with Chrome and cufon.