OUTSYSTEMS WEB

I try to create an email template for outlook window application and outlook on the web browser but I have some problem about

  • I can’t setting image size css include width 100% and max-width xxx px.The result in outlook app is the original width of import image file. You will see it below. The image is too large! : (

  • And this is on the outlook web browser.It looks OK.
  • I set the font in css theme like this

@font-face {

    font-family: 'Myfont';

    src: url('https://My_Environtment/module/myfont.ttf') format('truetype'),

         url('https://My_Environtment/module/myfont.eot') format('eot');

    -fs-pdf-font-embed: embed;

    -fs-pdf-font-encoding: Identity-H;

    font-weight: 300;

    font-style: normal;

}

And use it on properties but nothing happened.

Can you share a small OML that reproduces the issue?

I'm assuming you're creating an Email screen in your app with the styles you mention?

One thing to keep in mind is that CSS compatibility in email clients, including Outlook, isn't all that great. 

I just ran across https://caniuse.email/ I can't vouch for how accurate it is currently, but it should give you an idea of things that may cause issues. Specifically, many versions of Outlook desktop do not support @font-face.

So you may need to scale back your desired look and feel of your emails to ensure you're only using CSS features that any target email clients can support.

Hi, Chun. 


The behavior of images and e-mail screen can be different dependeding of the destination.


Have you tried this same screen on gmail or other on?

G. Andrew Duthie wrote:

Can you share a small OML that reproduces the issue?

I'm assuming you're creating an Email screen in your app with the styles you mention?

One thing to keep in mind is that CSS compatibility in email clients, including Outlook, isn't all that great. 

I just ran across https://caniuse.email/ I can't vouch for how accurate it is currently, but it should give you an idea of things that may cause issues. Specifically, many versions of Outlook desktop do not support @font-face.

So you may need to scale back your desired look and feel of your emails to ensure you're only using CSS features that any target email clients can support.


I'm sorry. I can't share this OML file because it's the customer's work.
But if it really needed to solve a problem, I'll create a new similar one.

Fortunately, the advice from you gave me the idea! Now I use another method to solve
untidy layout by use only tables instead of the container(div).


For the image size problem, I import image files with appropriate width and height since outlook does not read width and max-width. (Maybe it does not support image width by code on outlook)



To import my font. How can I declare them by don't use @font-face? could you please guide me more?


Lenon Manhães wrote:

Hi, Chun. 


The behavior of images and e-mail screen can be different dependeding of the destination.


Have you tried this same screen on gmail or other on?


Yes, It looks different when it on different email services.Gmail looks beautiful and tidy than Outlook.

Chunyanuch Kimpiam wrote:

G. Andrew Duthie wrote:

Can you share a small OML that reproduces the issue?

I'm assuming you're creating an Email screen in your app with the styles you mention?

One thing to keep in mind is that CSS compatibility in email clients, including Outlook, isn't all that great. 

I just ran across https://caniuse.email/ I can't vouch for how accurate it is currently, but it should give you an idea of things that may cause issues. Specifically, many versions of Outlook desktop do not support @font-face.

So you may need to scale back your desired look and feel of your emails to ensure you're only using CSS features that any target email clients can support.


I'm sorry. I can't share this OML file because it's the customer's work.
But if it really needed to solve a problem, I'll create a new similar one.

Fortunately, the advice from you gave me the idea! Now I use another method to solve
untidy layout by use only tables instead of the container(div).


For the image size problem, I import image files with appropriate width and height since outlook does not read width and max-width. (Maybe it does not support image width by code on outlook)



To import my font. How can I declare them by don't use @font-face? could you please guide me more?



Hi again!

I had several problems with HTML generation when setting images width and/or height 100%. Be careful with that.

Best regards! 

Chunyanuch Kimpiam wrote:

To import my font. How can I declare them by don't use @font-face? could you please guide me more?

Not sure, since I don't spend a lot of time with CSS for specific email providers. But for this, you might be better served checking Stack Overflow, since this is really more of a CSS and Outlook (or other email providers) question than an OutSystems-specific question:

https://stackoverflow.com/search?q=CSS+email+%40font-face