Atom docs showing odd characters when opened

I’m an OSX (10.12) user and recently started having issues opening the html/doc files created to follow along with the tutorials on the site. Whenever I try opening a file as normal, it reads out in Chrome:


  • the icon beside each filename before opening is no longer the Chrome logo, but reads: exec (on a dark screen which looks similar to the Terminal icon).

  • when I use Get Info to find out more, it mentions kind: unix executable

  • within Get Info I’ve changed Open With to Google Chrome and also tried selecting Change All… with no luck

As an example, the original code that I had copied into Atom and saved as a new file was the first Getting Started step of this tutorial: Introduction to 3D in CSS which turns into the strange  symbols when opened vs. the coloured square that should be shown in the browser.

Has anyone else run into something like this before? I’m definitely new to all of this so any help is much appreciated to get back into the tutorials. Thanks!

That is really bizarre! Can you zip up one of your code files and attach it?

Also, try changing the font in Atom to something different. This might be caused by your theme’s font treating spaces, line-breaks, or any host of common things incorrectly.

Thanks @kirupa! I would if new users weren’t blocked from uploading attachments, so let’s see if this NippyZip link works which I uploaded it to:

Hope that helps!

Sorry - I didn’t realize there was a restriction on attachments! I just removed that.

I looked at your file, and I can see the weird space characters on both Mac and Windows. I think I know what the problem is. When you copy code from the site, if you double click (aka enter editing mode for the code) and then copy, this issue happens. If you just copy without double-clicking, this issue doesn’t happen.

If that is indeed the reason why you are seeing these characters, that’s a bug on the site. There isn’t anything wrong in what you did. I’ll fiddle with it shortly to fix it.

(Also, it’s generally a good idea to have HTML files have an extension of .htm or .html. It avoids other unnecessary issues with encoding and such that may crop up :stuck_out_tongue:)

Rookie moves on my part, hey! Thanks for checking this out and finding a solution @kirupa!

Great success single-clicking in the tutorial to then select and copy. Adding .html definitely made things better too :relieved:.