Rotate TEXT vertically in Email

Question

I m in a situation where i need to set some text in vertical order in email body, like this

enter image description here

using following css i can set text vertically in HTML but not able to set same in GMAIL Email body.

Code from my Gmail Body:

<div style=" width:50px; float:left; position:relative;padding-top:80px;transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg);"> 
    <h1 id="Header" style="direction: rtl;font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; color: #434242; white-space: nowrap; position:relative; height:auto; "> newsletter 1 </h1> 
</div>

Can you show us the full vertical-text code from the email body? — Luke Shaheen, Mar 28 '13 at 12:24
Is Gmail the only email client you need to support? If you manage to get this working with Gmail I can imagine other email clients (such as Outlook) will have problems with this. — MrWhite, Mar 28 '13 at 12:35

Mostafa Shahverdy · Accepted Answer · 2013-03-28T12:40:06.037

4

You can only use inline CSS with Gmail. try style="" on your elements

Edit: And of course you can not use all CSS attributes in Gmail. Here is a list that might be useful.

edited Mar 28 '13 at 12:40

answered Mar 28 '13 at 12:27

Mostafa Shahverdy

2,687
2
30
51

Edited answer, take a look – Mostafa Shahverdy Mar 28 '13 at 12:40
any alternate you suggest? – Anil D Mar 28 '13 at 12:43
3

Not really. Remember that newsletter design is very different to website design. You need to ignore all usual standards, you need to use tables, inline styles, img tags etc. (from http://stackoverflow.com/a/8015670/655316) – Mostafa Shahverdy Mar 28 '13 at 12:50

score 1 · Answer 2 · answered Mar 28 '13 at 12:27

1

gmail doesnt support the style tag in body . Do you have used style tag in body section ?

answered Mar 28 '13 at 12:27

Mehul Kaklotar

365
1
19

Actually it does but filters out most of the selectors and some unless you start them with *. The same thing about attributes - some of them are removed. – mateusza Jul 21 '15 at 19:15

Rotate TEXT vertically in Email

newsletter 1

2 Answers2