li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

Question

After proudly coloring my liststyle bullet without any image url or span tags, via:

ul{ list-style: none; padding:0;  margin:0;  }
li{ padding-left: 1em; text-indent: -1em;    }
li:before { content: "■"; padding-right:7px; }

Although these stylesheets work perfectly down to the rounded borders and other css3 stuff, and although the recipient of the email (for instance, Eudora OSE 1) renders all css styles correctly, just like in a browser, there is one problem: the bullets like • or ■ become converted into &#adabacadabra;

Appearing finally like so in emails:

How do I proceed from here?

Gnosticism

Why not use list-style-type: square; for the ul element (and remove your li:before)? – Aldwin

@Gnosticism list-style-* properties apply to LI elements. Therefore, it is best to declare them inside the li { } rule. – Melon

@Gnosticism Does this happen in other e-mail clients too? Like Gmail, Outlook, ... – Melon

@Šime Vidas: I see them used on ul often: alistapart.com/articles/taminglists – Aldwin

@Aldwin Yes, it is convenient to define list-style on the UL. However, in the above code, both the ul { } and li { } rules are present, and it makes more sense to define the property on the element on which it applies (which is LI). But it's fine either way. – Melon

@Benjamin, will using the list-style-type: square; guarantee mee a colored bullit ( while not coloring the rest of the LI items? Because that is really the premises of my previous as well as this question! – Gnosticism

+1 for &#adabacadabra;. – Eldrida

Answer 1

Never faced this problem before (not worked much on email, I avoid it like the plague) but you could try declaring the bullet with the unicode code point (different notation for CSS than for HTML): content: '\2022'. (you need to use the hex number, not the 8226 decimal one)

Then, in case you use something that picks up those characters and HTML-encodes them into entities (which won't work for CSS strings), I guess it will ignore that.

Aciniform

@Lea you are incredible! that is the correct answer I was looking for. this worked both previwing html as well as in email with Eudora OSE1. I guesse then it will work with all modern email clients that my clients user which support html viewing?? (my clients are not only non-programmers they have no idea how to disable html and just like to see nicely layouted emails which I would like to use to beautify my little writings) – Gnosticism

I can't answer that, as I said I've hardly ever worked with email. I'm terrified of it, judging on what I've heard from other devs, it looks like the worst thing that can happen to you :p It was just a suggestion based on what I thought might be happening, and I'm glad it looks like it worked. :) – Aciniform

@Lea thanks. Final mini question that rounds up this mystery: since it now works, which website do you recommend for looking up the correct hexnumbers like \2022 for • or ■ thank You very much. – Gnosticism

I've written a small script for my personal needs, but beware, it's very rough around the edges (slow, bad UI), since I only wrote it for my personal use: leaverou.me/scripts/unicode.html Also, if you're on a Mac, you can use the Character viewer. Win also has a Character Map, and I think it shows the hex number too. – Aciniform

@Lea thats a very beautifyl script/site you made, very handy: Much appreciated for sharing! EDIT: but how can we see the hex numbers? Currently • says You cicked on: 0095 but I need \2022 or other html supported encodings e.g. → Wouldn't that be awesome in your script to have? If that would be possible with your script, then i'm in for a 10$ donation the moment your nice overview supports hex+html output. I have bookmarked various w3c-aike character map sites but none of them is as cool as yours! (The other ones are terrible, incomplete, have too many disturbing ads etc) – Gnosticism

The 0095 is the hex number, you just have to add the slash in front ;) As for the few named entities, there are much better websites for that, like entitycode.com – Aciniform

The reason it says 0095 instead of 2022 is because there are multiple bullets in the unicode table. Better use the 0095. – Aciniform

Oh, there's also copypastecharacter.com that I frequently use for the most common symbols. – Aciniform

I always use to following site to find hex numbers (among other things) to use in the content tag for css: evotech.net/blog/2007/08/css-javascript-character-entities – Baggy

Correct link to Lea Verou's site should be lea.verou.me/scripts/unicode.html – Oswald

Answer 2

You ca try this:

ul { list-style: none;}

li { position: relative;}

li:before {
    position: absolute;  
    top: 8px;  
    margin: 8px 0 0 -12px;    
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #ccc;
    content: "";
}

It worked for me, thanks to this post.

Klemm

Answer 3

You are facing a double-encoding issue.

■ and • are absolutely equivalent to each other. Both refer to the Unicode character 'BULLET' (U+2022) and can exist side-by-side in HTML source code.

However, if that source-code is HTML-encoded again at some point, it will contain ■ and •. The former is rendered unchanged, the latter will come out as "•" on the screen.

This is correct behavior under these circumstances. You need to find the point where the superfluous second HTML-encoding occurs and get rid of it.

Hydrophone

Answer 4

Lea's converter is no longer available. I just used this converter

Steps:

1. Enter the Unicode decimal version such as 8226 in the tool's green input field.
2. Press Dec code points
3. See the result in the box Unicode U+hex notation (eg U+2022)
4. Use it in your CSS. Eg content: '\2022'

ps. I have no connection with the web site.

Sommersommers

Answer 5

You shouldn't use LIs in email. They are unpredictable across email clients. Instead you have to code each bullet point like this:

<table width="100%" cellspacing="0" border="0" cellpadding="0">
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the first bullet point</td>
    </tr>
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the second bullet point</td>
    </tr>
</table>

This will ensure that your bullets work in every email client.

Powel

This is an abuse of tables for a list of data. If you cannot override the list bullet using CSS, then live with that. Using lists properly also have the advantage of easier conversion to text for mail clients where HTML gets disabled. – Tokyo

LIs cause rendering problems across browsers. There are too many native styles applied to LIs by the browser that you have to anticipate and reset in you inline css. This is not something I would ever recommend for web. However, we are talking email here. You have to code like its 1999 – Powel

In particular, LI:before will not work in email as outlook does not support css pseudo selectors, so using LIs gives you no control over the bullet format. If you want any consistent control (as the question asks for) you have to use tables. – Powel

It's 2018, and I still have to code lists and line-items like this if I want to control how they render across all email clients/user agents, especially since I have clients and customers who do not understand why the same unordered list renders differently even when the email app/webmail client is made by the same company (I'm looking at you, Microsoft!). If you're going for semantic HTML in email, you're going to go mad. – Irreproachable

Answer 6

This website could be helpful,

http://character-code.com

here you can copy it and put directly on css html

Evulsion

This website is not helpful, as it does not list the character described in the OP – Virginavirginal