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

css list character-encoding special-characters

195,203

Solution 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.

Solution 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.

Solution 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 &#8226;. 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.

Solution 4

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

Steps:

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

ps. I have no connection with the web site.

Solution 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.

View more solutions

195,203

Author by

Sam

Hello, I an architect from The Netherlands. I love drawing, cooking, fire and playing around discovering new stuff. My knowledge of programming is limited to the interaction that we as humans undergo in this rapidly digitalising world. I recently found out that programming techniques are also helpful in realworld architecture/urbanism. Like designing a public park that interact with her human users! Sammie

Updated on July 05, 2022

Comments

Sam almost 2 years
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?
Sam about 13 years

@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)
Lea Verou about 13 years

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. :)
Sam about 13 years

@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.
Lea Verou about 13 years

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.
Sam about 13 years

@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)
Lea Verou about 13 years

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
Lea Verou about 13 years

The reason it says 0095 instead of 2022 is because there are multiple bullets in the unicode table. Better use the 0095.
Lea Verou about 13 years

Oh, there's also copypastecharacter.com that I frequently use for the most common symbols.
Lekensteyn almost 10 years

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.
Sander Koedood almost 10 years

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
DoubleA almost 10 years

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
DoubleA almost 10 years

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.
Gabe Hiemstra almost 7 years

This website is not helpful, as it does not list the character described in the OP
josh1978 almost 6 years

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.
Ashitaka over 5 years

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