Genii Weblog


Civility in critiquing the ideas of others is no vice. Rudeness in defending your own ideas is no virtue.


Wed 10 Jun 2009, 02:52 PM
A couple of people have written to ask if I know why the images got shifted in my post, You might want to change your Outlook: Shifty images, and why other images coming from Outlook do not get shifted.  The reason appears to have do with the browser wars.  Normally, an image to be displayed would looks something like this in HTML:

<img src="/images/GeniiLogo_RGB.jpg" width="245" height="94" alt="Genii Software">
In a MIME message, this would be more like:

<img src=cid:_1_000000000382852575090066C475 width="245" height="94" alt="Genii Software" border="0">

where the cid:_1_000000000382852575090066C475 is a separate MIME part for the image.  In the case where text should be to the right of the image, and thus the image should be aligned left, we would simply make the HTML:

<img src=cid:_1_000000000382852575090066C475 width="245" height="94" alt="Genii Software" border="0" align="left">

But this standard way of representing images is not good enough for Microsoft.  No, they instead have the following code (and I kid you not, as this is straight from the source sent out by the message I showed):

<v:shapetype id="_x0000_t75" coordsize="21600,21600"
   o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"
   stroked="f">
   <v:stroke joinstyle="miter" />
   <v:formulas>
    <v:f eqn="if lineDrawn pixelLineWidth 0" />
    <v:f eqn="sum @0 1 0" />
    <v:f eqn="sum 0 0 @1" />
    <v:f eqn="prod @2 1 2" />
    <v:f eqn="prod @3 21600 pixelWidth" />
    <v:f eqn="prod @3 21600 pixelHeight" />
    <v:f eqn="sum @0 0 1" />
    <v:f eqn="prod @6 1 2" />
    <v:f eqn="prod @7 21600 pixelWidth" />
    <v:f eqn="sum @8 21600 0" />
    <v:f eqn="prod @7 21600 pixelHeight" />
    <v:f eqn="sum @10 21600 0" />
   </v:formulas>
   <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" />
   <o:lock v:ext="edit" aspectratio="t" />
</v:shapetype>
<v:shape id="_x0000_s1027" type="#_x0000_t75" style='position:absolute;
   margin-left:0;margin-top:0;width:183.75pt;height:70.5pt;z-index:1;
   mso-position-horizontal:left;mso-position-horizontal-relative:text;
   mso-position-vertical:top;mso-position-vertical-relative:line'
   o:allowoverlap="f">
   <v:imagedata src="cid:image001.jpg@01C9E9B5.20EC9DE0" o:title="geniiLogo_RGB" />
   <w:wrap type="square"/>
</v:shape>

Complicated, but is that all that is wrong with it?  No, the fundamental problem is that it is not using an img tag, but instead these various tags that are only recognized by Internet Explorer, such as v:shapetype and v:imagedata.  Since those are not standard HTML, they are not displayed by Firefox or Chrome or Safari, just by Internet Explorer.  Even Internet Explorer only recognizes them in certain contexts, so these all fail the same way in Internet Explorer when read from the iNotes, Gmail and Mail.com.  When the tags are not recognized, the image MIME parts are just considered unused images, and are displayed at the end of the message.  If this complexity were really necessary, that would be one thing, but remember, this could have been handled by the following line.  Clearly, this is just an effort to make the Internet only really compatible to Outlook itself.

<img src=cid:_1_000000000382852575090066C475 width="245" height="94" alt="Genii Software" border="0" align="left">

So, remind me again about how Outlook is standards-based and renders properly.  The real question is not why Microsoft pulls these stunts, but why we let them get away with it and don't make the truth clear to our customers/clients.

Copyright © 2009 Genii Software Ltd.

Tags:

Wed 10 Jun 2009, 11:18 AM
The third in a series showing that Outlook doesn't do a very good job of rendering emails sent to other clients.  (First: Margin Madness, second: Border Patrol)  I've said it before, and I'll say it again: The choice is not between a broken Lotus Notes email system and a working Outlook email system, it is between a somewhat deficient Lotus Notes email system that can be improved dramatically with iFidelty and a somewhat deficient Outlook email system that cannot.

Note that the garbled messages below do not simply look bad, but also confuse which phone number is a fax number and which is a phone number, since the icons are what disambiguate them.


An email (to a prospective client) created in Outlook 2003 looks like this

Original image in Outlook


When it it received by a client using Lotus iNotes 8.0.1 through Firefox 3, the images have been moved to the bottom, and the text is overlapping

Email receved in iNotes with overlapping text and images at bottom


When it it received by Gmail, the images have been moved to the bottom and the line spacing is greatly increased

Email receved in GMail with added borders, added line spacing and images at bottom


When it it received by Mail.com (a standard web mail system), the images have been moved to the bottom and the lines are shifted

Email receved in Mail.com with added borders and images at bottom


Copyright © 2009 Genii Software Ltd.

Tags: