Browsers read resources as Asian characters

While editing a local HTML file, Safari and Firefox refused to load the CSS and JS files.

• Both Safari’s inspector and Firebug in FF6 showed Asian characters for CSS and JS files, even though they looked fine in code editors.
• I looked for gremlins in BBEdit, but found nothing bad.
• I loaded the CSS and JS files directly in Safari and Firefox. They read correctly.

Solution

Using BBEdit, I converted the CSS and JS files from UTF-8 to UTF-16.

Explanation

Not every character in a file may belong to the Roman alphabet. Unicode Transformation Forat (UTF)-based files use 16, 24 or 32 bytes (ones and zeros) to represent each character. In addition to the content itself, each file contains a Byte Order Mark (BOM), which tells computers what kind of data to expect. If the BOM says one thing (like “This file uses UTF-8 characters”) but the characters themselves use a different number of bytes, the result is gibberish.

Reference

• Characters vs. Bytes by Tim Bray
• General questions, relating to UTF or Encoding Form at unicode.org.