Wednesday, February 19, 2014

TIP #44 - When copy and pasting text from Photoshop for HTML... Beware!

If you have ever copy and pasted text from Photoshop for use in a website or EDM, you need to be aware of a potential problem.

Dreamweaver or WYSIWYG editors are not going to show up this problem either, you'll need to use a code editor such as Sublime Text.

Pasting the copy into Sublime Text you may see an "EXT" character if a soft return has been used in a Photoshop text element. (SHIFT and ENTER). Hard returns will paste correctly as a <br />.



The reason this is an issue is that it will cause the space to close up when rendered in a browser or email client. So instead of a space or a new line, you will see no space or return!

Pasting this copy into a text editor like note pad would normally save you from unwanted code from Microsoft Word... but not from this sucker!

There are also other characters that can throw HTML rendering related to languages.

So my tip for any designers who are starting to code more HTML, while Dreamweaver gives you the visual display, it's editing is not the best. Move to something more powerful and don't rely on the visual cues. This will speed up your coding skills as well!

More on Sublime Text and other editors later...