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.

Chengteh

Answer 1

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>

Chengteh

Answer 2

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

Jaynajayne

These buttons have the same issue. If there's not enough room around the text it gets clipped in outlook. – Chengteh

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. – Chengteh

Thank you very much :) and I'm happy that you could solve it! :) – Jaynajayne

Answer 3

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.

Penley

No effect, sadly. But there's definitely some extra room above it. I've tried margin and padding zero everything too. – Chengteh