Question about CSS content property

HTML & CSS
1

hello everyone,
i recently saw a few nice examples with the CSS content attribute in order to achieve nice symbols and drawings, however when searching for a complete list of the symbols available i couldn’t find any, and i wondered if anyone here knows where i can find such a list where i can see all (or some) of the symbols that i can create using this property

an example of a content is this:

content:"\\2656"

will result in a drawing of a tower

and this:

content:"\\2655"

will result in a drawing of a crown

thanks,
ulthane

2

There’s a list here that may be useful.

3

Hey paul, thanks for the link but it didnt help me, it misses alot of drawings & symbols unfortunately.

4

The usual HTML 4.01 suspects: http://www.w3.org/TR/html4/sgml/entities.html#iso-88591

This might make it easier to see: http://en.wikipedia.org/wiki/List_of_Unicode_characters

5

ya thats the one! thanks :slight_smile:

6

At your Service! :slight_smile:

7

I got another question related to this, i see many of these stuff requires font that i dont have, therefore i belive many others dont so i dont want to put such a thing in a website and take risk
point is that i want to use unicode so that the ‘image’ im going to put will be affected by fonts (which will not happen with acutall image), so i wondered if there’s any way around it to get the symbols i want?

8

If you don’t have the correct Unicode font stack and the user doesn’t have any of those fonts then the symbol probably won’t render as expected perhaps showing a place-holder. Perhaps CSS font embedding might have effect if it were normal text and you had the font licence but it’s probably overkill.

9

thank u for ur reply :slight_smile:
unfortunately i just noticed another downside with using the content attribute, its not supported from IE7 and below! that blows :frowning:
is there any alternative to the CSS content attribute?

10

You shouldn’t really be using generated content for important content so it shouldn’t really matter. Generated content should enhance the page but not reduce its function if not present.

You can fix IE with a quick expression if you want.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p:after {
	content:" Hello";
	color:red;
}
p { zoom:expression(  runtimeStyle.zoom=1,  insertAdjacentHTML('beforeEnd', '<span class="after">Hello</span>')  );
}
.after { color:red }
</style>
</head>

<body>
<p></p>
</body>
</html>

Requires Javascript of course but as I said above only supply content that isn’t critical and it won’t matter.

11

I use content in replacement of small images, like facebook / twitter logos, also using them in order to style lists better
Its critical because IE is already ugly enough when it doesnt have support for many stuff (like rounded borders / shadows), so also content, its like 2 different websites when looking through chrome / IE7 :smiley:
I dont care much for IE6 acutally, but i still want to fix it for IE7 snce its still used around (specially by XP users)
Thanks for ur solution ill try it out now :slight_smile:

edit: hmm can u explain how that expression works to me ? :stuck_out_tongue: