Remove Text Padding/Margin inside VML Shape

Question

I'm trying to figure out how to get this text (!) to show up. Even though it's smaller than the circle it's in, it still gets cut off about 1/3 of the way in to the circle.

I would like to use this for Outlook specifically.

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:20px;v-text-anchor:middle;width:20px;" arcsize="50%" stroke="f" fillcolor="#ffcb05">
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">!</center>
</v:roundrect>

Anyone have any ideas? I've tried overflow:visible on the circle to no avail.

More information

Using a macro to get test html into Outlook.

It is most definitely some sort of margin or padding on the v:roundrect element. After importing the HTML, I can right click, go to Format Shape, then Layout & Properties, which gives me the 4 "margin" options. Setting them to zero gives me the desired effect. The issue is that I cannot then grab this HTML, and I have no idea what property this is correlating to.

Latest code:

<v:roundrect style="height:30px;width:30px;margin:0 !important;padding:0 !important; mso-margin-bottom-alt:0 !important;mso-margin-top-alt:0 !important;mso-margin-right-alt:0 !important;mso-margin-left-alt:0 !important;mso-padding-bottom-alt:0 !important;mso-padding-top-alt:0 !important;mso-padding-right-alt:0 !important;mso-padding-left-alt:0 !important;" arcsize="50%" strokeweight="2px" strokecolor="#FFFFFF" fillcolor="#ffcb05" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;margin:0 !important;padding:0 !important;mso-margin-bottom-alt:0 !important;mso-margin-top-alt:0 !important;mso-margin-right-alt:0 !important;mso-margin-left-alt:0 !important;mso-padding-bottom-alt:0 !important;mso-padding-top-alt:0 !important;mso-padding-right-alt:0 !important;mso-padding-left-alt:0 !important;">!</center>
</v:roundrect>

I've attempted using different elements (span, p, etc..) instead of center.

score 9 · Accepted Answer · answered Jun 22 '16 at 16:59

Textbox with zeroed inset is the key. I had tried it before, but without nested html. Text directly input in the v:textbox element does not appear to work, so I used a center element to encapsulate text and set styles.

<v:roundrect style="height:20px;width:20px;" arcsize="50%" strokeweight="2px" strokecolor="#FFFFFF" fillcolor="#ffcb05" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
    <v:textbox inset="0,0,0,0">
        <center style="font:300 14px/15px Impact, Sans-serif;color:#FFFFFF;mso-line-height-rule:exactly;">!</center>
    </v:textbox>
</v:roundrect>

score 1 · Answer 2 · answered Jun 22 '16 at 12:16

1

It might help to solve your problem: https://buttons.cm/

answered Jun 22 '16 at 12:16

gyula.nemeth

847
10
9

These buttons have the same issue. If there's not enough room around the text it gets clipped in outlook. – Randy Hall Jun 22 '16 at 16:03
I'm giving you the bounty because in a roundabout way this helped me come to my conclusion, and I can't give myself the bounty. – Randy Hall Jun 23 '16 at 14:06
Thank you very much :) and I'm happy that you could solve it! :) – gyula.nemeth Jun 23 '16 at 14:57

score 0 · Answer 3 · answered Jun 15 '16 at 20:10

0

You might try adding line-height: 16px; mso-line-height-rule: exactly; to the center style attributes. Outlook, particularly later versions, tends to tack on a lot of extra spacing above and below text, and won't follow your line height unless you force it.

answered Jun 15 '16 at 20:10

Michael Holland

471
3
10

No effect, sadly. But there's definitely some extra room above it. I've tried margin and padding zero everything too. – Randy Hall Jun 15 '16 at 20:26

Remove Text Padding/Margin inside VML Shape

3 Answers3

Linked