0

I would like to include some simple symbols in an HTML email - one being an unchecked checkbox, and the other being a checked checkbox.

Why not images?

This is for an Intranet email, so the user may view the email either when they are on the local network with the server, or outside. So I don't want to put images there. The client predominantly uses Outlook.

I thought I could just use unicode characters U+2610 Ballot Box and U+2611 Ballot Box with Check.

I know every vendor will customize their fonts, but when these two symbols are viewed in Outlook, they're totally screwed up.

image

Is there any simple and reliable way of having checkboxes in emails? Do I need to embed the images on every email?

Remy Lebeau
  • 555,201
  • 31
  • 458
  • 770
Paul Perrick
  • 496
  • 9
  • 22
  • 1
    "*Why not images?*" - you do realize that images can be attached to the email and displayed inline within the email body, don't you? So it won't matter if the reader is on the local network or not, the image will still work. "*Is there any simple and reliable way of having checkboxes in emails?*" - since you are already using HTML anyway, have you considered using HTML checkboxes via ``? – Remy Lebeau Nov 25 '20 at 16:50
  • Embedding images has its own issues because of the way the office mail is set up, but it will probably be my final option. – Paul Perrick Nov 25 '20 at 18:11
  • 1
    They are not "messed up". Perhaps you are unhappy about the size and horizontal adjustment, but those are things you can control if you like. The fact that Unicode glyphs will vary between fonts is an unescapable fact of life. (Not even Microsoft's fault, for once.) – tripleee Nov 25 '20 at 18:11
  • Using real checkbox inputs... You gotta see what Outlook 2019 does to them. It's like a bad joke or something. I know I will run into issues on any mail service/app, but Outlook just makes it difficult on purpose – Paul Perrick Nov 25 '20 at 18:13
  • Regarding "embedding images has its own issues", I wonder if you're thinking about embedding like base64 encoding - that has issues. However, if you upload the file somewhere publicly accessible, and then reference using the standard tag, you'll have no issues. Just setup an Outlook template (.oft file), and you'll be sweet. – Nathan Nov 25 '20 at 21:22
  • I'm sorry for the confusion. Normally I would: 1) embed the image in the email. 2) use an image on a server in the same domain. The problem with embedding it is the code for this email service that's in place. I will need to refactor some thing to include a simple image. That's why I was hoping to use a generic black and white box with an X or check in it in the email. I was hoping someone had found some symbols that Outlook doesn't totally mangle. I cannot put the image on a public server because the domain is internal. I will refactor the code so I can embed images more easily. – Paul Perrick Nov 26 '20 at 07:54
  • I feel like the proper way to solve this would be to use a Unicode Variation Selector (like `☑︎`), but this doesn't seem to work in Outlook. (See [this question for a similar problem](https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascrip/38452396#38452396).) Also, from my tests, only the box with check character is affected, and only in Outlook 2019. – HTeuMeuLeu Nov 26 '20 at 08:10
  • Yes, it's quite strange that they would choose to manipulate one character from what is obviously a set of characters. I ended up fixing the code so I could embed the images. They are c# razor templates for emails, long story. – Paul Perrick Nov 26 '20 at 19:48

0 Answers0