I'm having a few encoding issues with IE - html

In Internet Explorer, I keep coming across these strange diamond symbols whenever a certain character is on the screen. These characters are copied from Wordpress and are typically a long dash or an apostrophe.
Here is what these diamond characters look like: http://imgur.com/teheGy4
Whenever I change IE's encoding setting to 'Western European' it fixes the problem. See here: http://imgur.com/OmVTaJ0
So I changed my meta to reflect the 'Western European' setting
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Still no luck in IE, however it did fix the problem in Firefox. Any suggestions on what else can be done to fix this?

You'll have to get the corresponding ascii code and use that in place of your special characters.

Related

HTML symbol not displaying in Chrome

I want to display the following symbol : "\ud83c\uddfa\ud83c\uddf8"
This, in HTML, is supposed to display the flag of the USA. The first half displays "U", and the 2nd half displays "S". Put together, it displays a little symbol of the flag (by a mechanism I'm not sure about). Well, it does in Firefox at least. It doesn't in Chrome. In Chrome, it just shows "U S".
I wish Chrome could work as well as Firefox :D
But stats tell us a large proportion of Internet users use Chrome.
Any idea what I am missing so Chrome displays the flag symbol ?
I initially had this in the index.html head :
<meta charset=utf-8">
Another SO comment mentionned it had to be replaced with the following, but that doesn't fix the issue.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
EDIT : this link indicates there is no fix. The way would be to use images (.png/.webp/.svg) instead. This is a bit dumb. I feel like the unicode solution would be the lightest.
[...] "\ud83c\uddfa\ud83c\uddf8" This, in HTML, is supposed to display the flag of the USA.
No "\ud83c\uddfa\ud83c\uddf8" in HTML is supposed to read "\ud83c\uddfa\ud83c\uddf8".
HTML uses HTML entities, the ones for this glyph are 🇺🇸.
🇺 + 🇸 = 🇺🇸

Weird icons appearing on Safari in between words

I'm seeing strange icons on Safari, but only in one section of my site, I've tried googling/searching stack for an answer but it's hard because I can't copy the symbols and in the inspector there's just space between each word. The only way I can show the problem is with a picture:
Help me Stackoverflow, you're my only hope!
The problem is that your browser is using a different character encoding from that of the document you're viewing.
So be sure that your web page uses the UTF-8 encoding:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
It was photoshop's fault, I'd copied the text straight from the PSD and I guess it had some encoding that added those symbols, I've re-typed the quote by hand (shudder) and the symbols are gone :)

IE 10 does not load page in UTF-8

I've got simple HTML pages in Russian with a bit of js in it.
Every browser going well except IE10. Even IE9 is fine. Next code is included:
<html lang="ru">
<meta http-equiv="Cоntent-Type" content="text/html"; charset="utf-8">
Also I've added .htacess with
AddDefaultCharset UTF-8
Still IE10 loads page in Cyrillic encoding (cp-1251 I believe), the only way to display characters in a right way is to manually change it to UTF-8 inside of a browser (or chose auto-detect mode).
I don't understand why IE10 force load 1251 instead of UTF-8.
The website to check is http://btlabs.ru
What really causes the problem is that the HTTP headers sent by the server include
Content-Type: text/html; charset=windows-1251
This overrides any meta tags. You should of course fix the errors with the meta tag as pointed out in other answers, and run a markup validator to check your code, but to fix the actual problem, you need to fix the .htaccess file. Without seeing the file and other server-side issues, it is impossible to tell how to fix that (e.g., server settings might prevent the effect of a per-directory .htaccess file and apply one global file set by the server admin). Note that the file name must have two c's, not one (.htaccess, not `.htacess').
You can check what headers are e.g. using Rex Swain’s HTTP Viewer.
The reason why things work on other browsers is that they apply the modern HTML5 principle “BOM wins them all”. That is, an HTTP header wins a meta tag in specifying the character encoding, but if the actual data begins with three bytes that constitute the UTF-8 encoded form of the Byte Order Mark (BOM), then, no matter what, the data will be interpreted as UTF-8 encoded. For some unknown reason, IE 10 does not do that (and neither does IE 11).
But this won’t be a problem if you just make the server send an HTTP header that declares UTF-8.
If the server has been set to declare windows-1251 and you cannot possibly change that, then you just need to live with it. Transcode your HTML files to windows-1251 then, and declare windows-1251 in a meta tag. This means that if you need any characters outside the limited repertoire representable in windows-1251, you need to represent them using character references.
perhaps because your 'o' in 'content' is not an ascii 'o'. notice that it is not red in Stackoverflow? i then copied it to a good text editor and see that it is indeed not an o. because the 'o' is not really an ascii 'o', that whole line probably should get ignored in every web browser, which should then depend on what default charset it uses. Microsoft and IE is notorious for picking bad defaults, thus is my reason why it doesn't work in IE. ;)
but codingaround has good advice too. it's best to put quotes around your attribute values. but that should not break a web browser.
you should use a doctype at the start:
<!DOCTYPE html>
<html lang='ru'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
but the real culprit is your content and charset problem. notice my line. mine is very different. ;) that's the problem. note that mine has two ascii 'o's, one in "Content-Type" and another in 'content='.
As Shawn pointed out, copy and paste this:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
This is a really good example of how non-Ascii letters that look like English Ascii letters can really mess things up!
Maybe you forgot changing cоntent=text/html; to cоntent="text/html";
As Shawn has already pointed out, it could also be content="text/html; charset=utf-8".
But as you have tried both things out, can you confirm if the IE10 output looks like this?
I can't really help further with this, as the only thing I have here is an IE 10 online emulator.
So far the possible problems are:
Different o character
I see, that the <meta> tag is still outside of <head>, put it in place
Problems with IE handling the content and charset attributes

Html charset and support for special (national) characters

I have a website in HTML5. Most of the content there is in Czech, which has some special symbols like "ř, č, š" etc...
I searched the internet for recommended charsets and I got these answers: UTF-8, ISO 8859-2 and Windows-1250.
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-2" />
I tried UTF-8 which didnt work at all and then settled up with ISO 8859-2. I tested my website on my computer in the latest versions of Chrome, Firefox, IE and Opera. Everything worked fine but when I tested my website at http://browsershots.org/ , these characters were not displayed correctly (in the same browsers that I used for testing!).
How is that possible? How can I ensure, that all characters are displayed correctly in all web browsers. Is it possible that usage of HTML5 causes these problems (since its not fully supported by all browsers, but I am not using any advanced functions)?
Thanks for any hints and troubleshooting tips!
If you using HTML5, try this short declaration of charset:
<meta charset="UTF-8">
Additionally check you html file encoding. You can do it in Notepad++, menu Encoding -> Encode in UTF-8.
The important thing is that the actual encoding of the data coincides with the declared encoding. From the description, it seems that the actual encoding is ISO-8859-2, so you should declare it. Note that the name of the encoding has no space but hyphens. (I wonder whether you used it with a space – I would expect browsers to ignore the tag then.) The following is the simplest declaration:
<meta charset=ISO-8859-2>
I would not trust on browsershots.org getting things like this right. Testing on actual browsers is more useful.
UTF-8 is the best-supported character set for international usage. If it does not display correctly, you should ensure that your file is saved in UTF-8 format. Even Notepad has a "UTF-8" option in its save dialog.

latin characters showing in some parts of the page and not others

the page in question is Apple Amor
You can see that in the footer the spanish vowels seem to be showing properly , but in the slide down bar(header) they get messed up.
Any ideas why ?
Your page is encoded in ISO-8859-1. Wherever that header comes from, it is most likely encoded in UTF-8.
You would have to change the character set of your page to UTF-8 (that would probably have some consequences) or convert the incoming data from the header. I don't know where it's coming from, so it's hard to tell what the right method would be.
Mandatory basic reading on the issue: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
Your page source shows that you're using:
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
Note that the above tag is not well formed. Where is its closing character "/"? Content-Type should be between double quotes.
Add this tag to your page and test:
<html lang="es">
If that doesn't solve your problem try to change the charset tag to:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />