Full HTML/CSS support on message view

[Rui Carneiro-2]

Hi there.

The idea of this thread is sharing some ideas on how to add full support of
HTML/CSS on IMP so it can have a good result on "email acid test" (
http://www.email-standards.org/)

>From what I saw on other webmails with good results (e.g AOL and Yahoo!)
there is 1 common solution:

First step is to embed the message on an iframe before showing the message.
This will "reset" all previous CSS conditions so we might need to set a few
like font family, size or color.
Second step is to make a parser that can change message's CSS (ids and
classes) from this

#test {
 color: red;
}

to something like this

#horde_unique_id #test {
 color: red;
}

This "#horde_unique_id" should be the id of the element (e.g. div) where the
email message will be shown. This way only the elements inside
"horde_unique_id" will be affected by message's CSS.

>From what I know this seems to be possible on horde but I would like some
expert opinion :)

Best regards,
Rui Carneiro

--
Horde developers mailing list - Join the hunt: http://horde.org/bounties/
Frequently Asked Questions: http://horde.org/faq/
To unsubscribe, mail: dev-unsubscribe@...

[Michael M Slusarz-2]

Quoting Rui Carneiro <rui.carneiro@...>:

> Hi there.
>
> The idea of this thread is sharing some ideas on how to add full support of
> HTML/CSS on IMP so it can have a good result on "email acid test" (
> http://www.email-standards.org/)
>
>> From what I saw on other webmails with good results (e.g AOL and Yahoo!)
> there is 1 common solution:

I've been playing around with this in the last two weeks or so, and  
there are some issues that need to be resolved.  See below.

> First step is to embed the message on an iframe before showing the message.
> This will "reset" all previous CSS conditions so we might need to set a few
> like font family, size or color.

Agreed.  We can simply create a stripped down-stylesheet for this  
purpose (so that it is cached by the server).  For dimp, it will be  
easiest to create a hidden iframe on load, and then clone this iframe  
as needed to view the HTML code.

> Second step is to make a parser that can change message's CSS (ids and
> classes) from this
>
> #test {
>  color: red;
> }
>
> to something like this
>
> #horde_unique_id #test {
>  color: red;
> }
>
> This "#horde_unique_id" should be the id of the element (e.g. div) where the
> email message will be shown. This way only the elements inside
> "horde_unique_id" will be affected by message's CSS.

I don't understand why we need this.  If the message part contains CSS  
definitions, it will only be applied within the iframe.  And none of  
the base Horde CSS will be applied within the iframe.

michael

--
___________________________________
Michael Slusarz [slusarz@...]


--
Horde developers mailing list - Join the hunt: http://horde.org/bounties/
Frequently Asked Questions: http://horde.org/faq/
To unsubscribe, mail: dev-unsubscribe@...

[Michael M Slusarz-2]

Quoting Michael M Slusarz <slusarz@...>:

> Quoting Rui Carneiro <rui.carneiro@...>:
>
>> Hi there.
>>
>> The idea of this thread is sharing some ideas on how to add full support of
>> HTML/CSS on IMP so it can have a good result on "email acid test" (
>> http://www.email-standards.org/)
>>
>>> From what I saw on other webmails with good results (e.g AOL and Yahoo!)
>> there is 1 common solution:
>
> I've been playing around with this in the last two weeks or so, and  
> there are some issues that need to be resolved.  See below.

Forgot to mention another issue - both image blocking and mailto links  
will not work properly unless we also inject the necessary javascript  
code into the iframe.

michael

--
___________________________________
Michael Slusarz [slusarz@...]


--
Horde developers mailing list - Join the hunt: http://horde.org/bounties/
Frequently Asked Questions: http://horde.org/faq/
To unsubscribe, mail: dev-unsubscribe@...

[Rui Carneiro-2]

On Thu, Sep 10, 2009 at 9:20 PM, Michael M Slusarz <slusarz@...>wrote:

> Quoting Rui Carneiro <rui.carneiro@...>:
>
>> First step is to embed the message on an iframe before showing the
>> message.
>> This will "reset" all previous CSS conditions so we might need to set a
>> few
>> like font family, size or color.
>>
>
> Agreed.  We can simply create a stripped down-stylesheet for this purpose
> (so that it is cached by the server).  For dimp, it will be easiest to
> create a hidden iframe on load, and then clone this iframe as needed to view
> the HTML code.
>

 So your idea is to create 1 iframe for each html part of the message?

> This "#horde_unique_id" should be the id of the element (e.g. div) where
>> the
>> email message will be shown. This way only the elements inside
>> "horde_unique_id" will be affected by message's CSS.
>>
>
> I don't understand why we need this.  If the message part contains CSS
> definitions, it will only be applied within the iframe.  And none of the
> base Horde CSS will be applied within the iframe.
>

I think AOL (Yahoo might be working on it) use this to simplify forward and
reply messages. When you click forward on a html message on this client,
they transform the body element to one div with an unique id (e.g. <div
id="horde_unique_id">). This prevent the new message's CSS from corrupting
the forwarding one.

--
Horde developers mailing list - Join the hunt: http://horde.org/bounties/
Frequently Asked Questions: http://horde.org/faq/
To unsubscribe, mail: dev-unsubscribe@...

[Michael M Slusarz-2]

Quoting Rui Carneiro <rui.carneiro@...>:

> On Thu, Sep 10, 2009 at 9:20 PM, Michael M Slusarz <slusarz@...>wrote:
>
>> Quoting Rui Carneiro <rui.carneiro@...>:
>>
>>> First step is to embed the message on an iframe before showing the
>>> message.
>>> This will "reset" all previous CSS conditions so we might need to set a
>>> few
>>> like font family, size or color.
>>>
>>
>> Agreed.  We can simply create a stripped down-stylesheet for this purpose
>> (so that it is cached by the server).  For dimp, it will be easiest to
>> create a hidden iframe on load, and then clone this iframe as needed to view
>> the HTML code.
>>
>
>  So your idea is to create 1 iframe for each html part of the message?

Yes.  There may be more than 1 HTML part viewed inline, and these  
parts may have other, non-HTML parts inbetween.

>> This "#horde_unique_id" should be the id of the element (e.g. div) where
>>> the
>>> email message will be shown. This way only the elements inside
>>> "horde_unique_id" will be affected by message's CSS.
>>>
>>
>> I don't understand why we need this.  If the message part contains CSS
>> definitions, it will only be applied within the iframe.  And none of the
>> base Horde CSS will be applied within the iframe.
>>
>
> I think AOL (Yahoo might be working on it) use this to simplify forward and
> reply messages. When you click forward on a html message on this client,
> they transform the body element to one div with an unique id (e.g. <div
> id="horde_unique_id">). This prevent the new message's CSS from corrupting
> the forwarding one.

We don't add any CSS to outgoing messages, so this is irrelevant.

michael

--
___________________________________
Michael Slusarz [slusarz@...]


--
Horde developers mailing list - Join the hunt: http://horde.org/bounties/
Frequently Asked Questions: http://horde.org/faq/
To unsubscribe, mail: dev-unsubscribe@...

[Rui Carneiro-2]

On Wed, Sep 16, 2009 at 6:30 AM, Michael M Slusarz <slusarz@...>wrote:

> Quoting Rui Carneiro <rui.carneiro@...>:
>
>  On Thu, Sep 10, 2009 at 9:20 PM, Michael M Slusarz <slusarz@...
>> >wrote:
>>  So your idea is to create 1 iframe for each html part of the message?
>>
>
> Yes.  There may be more than 1 HTML part viewed inline, and these parts may
> have other, non-HTML parts inbetween.
>

That was not my first approach but I think yours make more sense after all.



> I think AOL (Yahoo might be working on it) use this to simplify forward and
> reply messages. When you click forward on a html message on this client,
> they transform the body element to one div with an unique id (e.g. <div
> id="horde_unique_id">). This prevent the new message's CSS from corrupting
> the forwarding one.
>

We don't add any CSS to outgoing messages, so this is irrelevant.


Should it be more like an enhancement?

--
Horde developers mailing list - Join the hunt: http://horde.org/bounties/
Frequently Asked Questions: http://horde.org/faq/
To unsubscribe, mail: dev-unsubscribe@...

[Michael M Slusarz-2]

Quoting Rui Carneiro <rui.carneiro@...>:

>> I think AOL (Yahoo might be working on it) use this to simplify forward and
>> reply messages. When you click forward on a html message on this client,
>> they transform the body element to one div with an unique id (e.g. <div
>> id="horde_unique_id">). This prevent the new message's CSS from corrupting
>> the forwarding one.
>>
>
> We don't add any CSS to outgoing messages, so this is irrelevant.
>
>
> Should it be more like an enhancement?

Not sure how this could be an enhancement.  Fckeditor doesn't insert  
CSS sheets into the outputted text.  And this wouldn't be the proper  
way to create HTML messages for webmail use anyway - especially for  
what we are doing, any style information should be set per element.

michael

--
___________________________________
Michael Slusarz [slusarz@...]


--
Horde developers mailing list - Join the hunt: http://horde.org/bounties/
Frequently Asked Questions: http://horde.org/faq/
To unsubscribe, mail: dev-unsubscribe@...

[Rui Carneiro-2]

I made some progress.

I already can create iframes for all html messages and resize them for the
correct content size. The source of the iframes is a generated link to
view.php (actionID=view_attach). Unfortunately view.php is not working for
HTML parts (http://bugs.horde.org/ticket/8581) so my code is not complete
functional.

--
Horde developers mailing list - Join the hunt: http://horde.org/bounties/
Frequently Asked Questions: http://horde.org/faq/
To unsubscribe, mail: dev-unsubscribe@...

[Rui Carneiro-2]

Ticket 8592 closed: http://bugs.horde.org/ticket/8592

Great Work M Slusarz.

--
Horde developers mailing list - Join the hunt: http://horde.org/bounties/
Frequently Asked Questions: http://horde.org/faq/
To unsubscribe, mail: dev-unsubscribe@...