CODEWITHSUNDEEP
htmlhtml-listsspecial-charactersunordered
alex
alex

Reputation: 101

HTML special character for list type circle

I have decided to redo my unordered list as a table. However, I'd like the beginning of each row to have the same circle character as for the unordered list so that my table still looks like my other lists on the page.

I've looked at many webpages with ASCI/HTML special characters, but was unable to find this character! Is there one or is there away to have the unordered list as a table somehow (I doubt this one)?

Upvotes: 4

Views: 2937

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The default list bullet as used by browsers to render a ul element is not a character but graphic symbol. You can see this by changing the font family settings on a page: the shape of the default list bullet does not change. Moreover, the shape of the default list bullet is not defined in specifications, and it may vary by browser. Most browsers render it as a black circle, but the relative size may vary. (Browsers may actually render the list bullet by picking up a glyph from some font, but this is outside an author’s control, so for practical purposes it isn’t a character.)

So you cannot make a character match the default list bullets. To get similar bullets in different contexts, you need to use same technique: either ul or characters.

Trying to find a reasonable match, I found that the following gives that on Firefox and Chrome on Windows:

<style>
.bull { 
  font-family: Arial;
  font-size: 1.35em;
  position: relative; 
  top: 0.15em;
}
</style>
<span class=bull>&bull;</span>

However, IE uses an essentially smaller-size default list bullet, so on it, the above code produces a bullet that is considerable larger than that.

If you use character as a list bullet, the most logical choice is U+2022 BULLET “•”, representable in HTML as &bull; (or as such). It is also very safe since it is present in practically all fonts.

Upvotes: 1

Krik
Krik

Reputation: 445

How about using just an image. A circle is real easy to make and insert in the page. Also there is a way to do it using CSS3 with either a border radius or a radial gradient.

Upvotes: 0

Related Questions