Bohemian Blog

Being a freelance Web Designer & Developer is a good career if you are trying to work full time on Linux and open source software. However, you still have to be compatible with your clients’ source files and backups. This means using Photoshop to build layouts or at least slice up the layouts that you get in PSD file formats.

I have been using my aging G5 (boy, saying that makes me and my checkbook cry) to deal with Photoshop files. However, since I have been setting up this beast of a Dell for the Ultimate Linux Desktop I spent some time today in getting the Windows version of Photoshop CS running on top of Wine, the Windows Compatibility Layer.

Wine is so good right now that you can simply throw the Photoshop install disk in your Linux box and run the installer. I’m not kidding, but keep in mind that this is Photoshop CS, not the latest and greatest Photoshop CS3. Wine’s site has a great deal of information about a variety of Photoshop versions running on Wine.

How did I do it specifically? I installed Wine, the Microsoft TrueType Core Fonts Ubuntu: sudo apt-get install msttcorefonts, customized the Wine interface to taste via Applications/Wine/Configure Wine and then ran the Photoshop CS installer.

Hold On, Save For Web Isn’t Working!

Alright, so there is one big fat catch that, if not dealt with, pretty much makes Photoshop worthless to web professionals: The amazing Save For Web plugin doesn’t work. Damn. So close.

Solution: The Magic of Windows Back Slashes

Yeah, it can be fixed! So, the secret is in how you start Photoshop. Either you or Wine setup some kind of shortcut unless you are starting Photoshop from the command line. Here’s how my original shortcut command was written:
env WINEPREFIX="/home/jason/.wine" wine "C:/Program Files/Adobe/Photoshop CS/Photoshop.exe"

and to fix the Save For Web problem, simply replace the forward slashes that follow C: with back slashes:

env WINEPREFIX="/home/jason/.wine" wine "C:\Program Files\Adobe\Photoshop CS\Photoshop.exe"

Huh? What?

Don’t ask. I can only guess that how that particular plugin was written included Windows-directory style references within the code. Sincerely, I have no clue. Thankfully the Wine developers figured it out. On that page it mentions Photoshop 7 specifically, but CS works the same way.

I have just finished updating my HTML Character Reference Chart. Along with updating invalid numerical references 129 through 159 to the valid decimal numbers there are a few new features:

• different character sets in separate views
• complete decimal and hexadecimal references
• entity references for some characters.
• New Complete Table Section displays all references
• New Favorites Section displays only your favorites

This new version is built with XML and XSLT, making the process of updating information or creating new layouts very simple. I am learning the basics of both right now and it’s amazing how powerful and elegant these simple text files can be.

The Favorites section works with comma-separated URL values. You will have to edit your URL “manually” by adding the decimal, hexadecimal or alphabetical values to the end of the page’s URL. There is an example favorites set to help you get started.

BohemianAlps HTML Character Codes »

I have been using the IEs4Linux system for a while now to assist in developing websites. It allows you to install various versions of Internet Explorer in Linux. It’s great for testing websites against the many bugs in IE as you develop them.

Recently they have developed a version for OSX on Intel machines.

http://www.tatanka.com.br/ies4linux/news/49

You have to install Darwine and X11 on OSX to use it, but after that it seems pretty easy. I am not so fortunate as to own an Intel-based Mac, so I can’t test it for you.

Wine info
http://wiki.winehq.org

Darwine info
http://darwine.sourceforge.net/download.php

Wine on OSX info
http://wiki.winehq.org/MacOSX

From Microsoft’s Improving E-mail Deliverability into Windows Live Hotmail pdf:

Q: If my message displays properly in Hotmail, will it look the same in Outlook?

A: No, we recommend that messages be tested with both Outlook 2003 and 2007 as well as Hotmail as messages may not be rendered the same way in all e-mail clients and services. Outlook 2007 no longer support style sheets the same way previous versions of Outlook did. This means that even if HTML content looks fine in Internet Explorer and Outlook 2003, it may not in Outlook 2007.

I think they are referring to their blunder of switching to the Word rendering engine for Outlook 2007’s HTML emails. –Jason

Here are a few recommendations for improving Outlook rendering (p16):

1. Do not use background images. Background images, whether specified in the <body>, <table>, or <td> tag, cannot be used because of inconsistencies among e-mail clients, most notably Outlook 2007.
2. Do not use CSS (cascading style sheets), inline styles or JavaScript. Cascading style sheets, where the styles are defined within the Web page itself, are only fully supported in most e-mail clients. Attached style sheets are not supported at all. Additionally, Web e-mail clients such as AOL Webmail and Gmail change or comment out style tags, resulting in unpredictable formatting. As a result, we recommend that you use only basic HTML tags. (For instance, to underline text, use the <u> tag, for bold use the <b> tag.)
3. Inline style attributes are your only option. Use only the most basic style attributes to designate font size, color, and type, and use them within basic HTML tags (do not use <div> or <span> tags). Do not use styles to set table or row heights or any spacing. Do not define your style elements within the <head> tag of the document (Hotmail will entirely strip this out). JavaScript is not supported in any e-mail client. Do not include any JavaScript, including onClick=”return(false);” in your HTML. Jason says:Nothing new, but why?!…
4. Set table width to 600 pixels max. The convention for HTML e-mail is to limit a set table width to 600 pixels. Though a wider table may render fine in Outlook or on a high resolution monitor, users with older systems or who choose an 800 X 600 display setting will not be able see the entire width of the e-mail.
5. Do not use the <body> tag to set any essential attributes. Some Web e-mail clients (notably Yahoo and Hotmail) strip out the BODY tag within e-mails completely. You should not include any attributes in the BODY tag. To set values such as background color, use the BGCOLOR attribute inside the TABLE or TD tags. Jason says:Nothing new…
6. Use HTML character names. Many e-mail clients won’t display raw 8-bit characters correctly (they’ll show up as question marks or squares instead). As a result, you must use HTML codes for these characters. Use only the HTML names, not the numeric values. Jason says:Nothing new…

In other news, not much has changed. I have no understanding for the email client industry’s bias against CSS. It makes no sense and we are all now dumber for having realised this is their current stand on the issue.

Good News: Yahoo Mail supports CSS quite well.

If you are looking for a great text editor for OSX, check out SMULTRON. It is mostly developed for OSX 10.4, but there are older versions available for 10.3. It has recently been updated and is only getting better and better.