In a email template I want to rotate a div content by 90deg.
I tried property transform: rotate(90deg) but it is not working in email template. I know the transform property not supporting in email template.
Is there another way or any trick to rotate content in email template?
Edit : I want to to rotate below div content :
...
<td>
<div><p>Some content <br> Some content</p></div>
</td>
...
Unfortunately, as you note, support for CSS transform is not good in email clients.
If the design lends itself well with the text being rotated in some email clients and not others, use CSS transform on the <div> or <p>. It's clean and easy to use live text.
If the text needs to be rotated everywhere, the best bet is to make the text an image. Not ideal or scaleable, but it's reliable everywhere. You can use a tool like Nifty Images if there are a lot of instances or versions of the text.
Related
I have to send an image by email that may not be rendered on the receiver side. Since this image is the sole purpose of the email, the alt text should be well and richly formatted in order to translate the features the image is displaying.
As far as I know there is no way to style alt text as if it were a set of nested html tags. I saw some examples of styling, but this were not sufficient, since they were styling the whole alt text.
Any workaround for this?
Maybe a little bit of JS would solve the issue but I guess I could have a similar issues with script tags not working.
I am facing a problem making a newsletter in Gmail and Outlook.
I've got a table with some TD's that contain a background-image:
<tr>
<td width="401" height="99" background="http://www.domain.com/bg_left.jpg"></td>
<td width="149" height="99" background="http://www.domain.com/bg_right.jpg"></td>
</tr>
I also tried adding the background images trough this method.
But with both ways I've got the following behaviour in Gmail and Outlook.
In both examples there is added some extra padding where the image is repeated.
Someone familiar with this problem? I couldn't find anything about this by myself.
Thanks instead.
For Gmail, you can remove the margin at the bottom of your images by changing the display property to block will prevent that.
Unfortunately, it seems that Outlook.com doesn't allow you to set the display property of images, but if you add a div (which is a block by default) with the same height as the img, as described here, you'll get the same result.
You'll need to use VML to display background images on a table in Outlook. Here is a tool in Campaign Monitor for doing exactly that.
Firstly, confirm your table cell height="" to the same as your image. Assuming it is, it looks like the cause might be your content expanding the table height past the specified height. Gmail has a habit of stretching the text line-heights, so if you have a underneath your subheader, this may be the cause. Remove that and it should fix it.
If that doesn't work, post the entire table and I'll take another look.
Currently I am working on iOS client for web-chat. Thus chat messages have HTML tags (bold, italic, underlined, font color, images (smiles), etc.). For example:
<b>bold</b> <i>italic</i> <!--smile:bird--><img style="vertical-align: middle;border: none;" alt="bird" src="http://www.site.com/engine/data/emo_chat/bird.gif" /><!--/smile--> ordinaty text
For the moment I have 2 ideas how to display messages:
Add UIWebView to tables cell. But I think that it's not an option, because we will have a lot of messages and a lot of WebViews.
Add UITextView to tables cell, parse HTML tags and make necessary changes to attributed string. But UITextView doesn't support images (if I am right).
Is there any other (better) way to display such data (styled text + images)?
Using a webview per-cell is not going to work as you suspect. Webviews take a noticeable time to render which means you will likely end up with old webview content being momentarily displayed in reused cells until the new content renders. Webview is also a pretty heavy-weight UI element and you will encounter performance issues with having many of them on the screen updating at once.
You will want to parse the HTML text you are given into an attributed string using a library like DTCoreText. From here, if you can target iOS 6 or later you can set the attributedText property on a standard UILabel. If you need to target earlier iOS versions you can again use DTCoreText, specifically the DTAttributedLabel or DTAttributedTextCell components.
The parsing and NSAttributedString rendering can all be done manually using an XML parser and CoreText, but DTCoreText will make your life much easier.
Update: You mentioned in a comment that you want support for <img/>. DTCoreText does have some basic image support, but this is a really hard problem if you are rendering text with CoreText because you have to make text flow around the image correctly, and reserve some space in the core text renderer to put your image into. If there is just a single image for each cell, I would suggest you manually extract the image path/url and lay it out with a UIImageView alongside your text.
You can get idea from RTLabel stuff. It is doing same thing which you want.
You can also convert HTML to NSAttributedString with native iOS classes. Look the following post
https://stackoverflow.com/a/18886718/1760527
I have an html email I send out. It is formatted with tables because the original designer said, those were more reliable than divs for mail clients. All styles are inline:
<td style="font-size: 12px...">
When a single email is received, everything looks great. But as soon as a thread is formed by mac mail, "See more" is inserted.
This messes up the formatting completely, moving cells out of alignment. The See More message appears to be inserted properly - within a single cell, kind of
...
<td>
My Text
See More
My Text
</td>
But there are two of See More messages. One toward the top, one toward the bottom. Weird? The first one doesn't actually hide any text - but repeats it!
Hi Kate
See More
Hi Kate
is what it looks like. The second one does in fact hide text. Has anyone had experience with this problem? Are tables a mistake? Thanks for your help!
I am not sure if this is related, but in iOS on iPhone or iPad if someone chooses to use POP the full message will be truncated.
The work around is to have 1,019+ characters before your </head>.
See: http://www.emailonacid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad
What happens if you use images in an email to replace text?
Most of the email clients do not load images by default. So... a normal user would not see anything.
But what happens when you use images this way:
<img src="notfound.jpg" alt="NOT FOUND"/>
Do they see the NOT FOUND alt if the image has not loaded? And what if it is styled similarly to the image to make it look a bit better, for example:
<img src="notfound.jpg" alt="NOT FOUND" style="font-size:24px;color:#FF00FF"/>
Are this alt texts styled accordingly?
Thanks
A whole bunch of email clients don't actually render the alt tag - they either render the title tag, and the styles don't get applied to that, or they render the filename or something else.
So it works for a few clients, but it's nothing like widespread.
Add a title tag in addition to your alt tag.
Unfortunately certain email client will ignore these tags and only show the link URL.