11 replies [Last post]
Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 6 years 21 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

Hello,
Have look at the following CSS rule:
a:link:before { content: "\00BB\0020"; }
This rule generates a right double arrow plus a blank space before a link text.
Question is: How to encode special characters in this fashion (i.e. in a way that CSS content property recognize the character)?
Are there a table whith escaped characters encoding?
For now a need to encoded √ * &#eight530; *

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

Anonymous
Anonymous's picture
Guru

Re: Escaped characters encoding for CSS content property

Maujor wrote:
Are there a table whith escaped characters encoding?
If you are asking for the charts for unicode then, yes.
http://www.unicode.org/charts/

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 6 years 21 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

Escaped characters encoding for CSS content property

Great Triumph,
The encoding I was looking for is inside this table => http://www.unicode.org/charts/PDF/U2200.pdf on the link that you pointed out.
Thanks.

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 3 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Escaped characters encoding for CSS content property

Are you wanting the radical, √, √, √, √, or a real checkmark, ✓, ✓, ✓ ?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 6 years 21 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

Escaped characters encoding for CSS content property

Hello kk5st,
Thanks
I need the checkmark, but CSS doesn't accept the encoding for *\2713* that you pointed out, so I'm using radic *\221A* that works, but missed the semantics.
The CSS rule is:

#pagebody #link a:visited:before
   {
	content: "\221A\0020";
	color:#c30;
	font-size:0.8em;
	}

You can view in action here: http://www.maujor.com/indexen.php
Click in a link at the bottom of the left column (under the Firefox logo) in order to reveals a visited link whith the radical (checkmark)

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 3 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Escaped characters encoding for CSS content property

It's not a problem with css. I had thought it was a font issue, does a given font have a particular glyph? It shakes out to be a browser issue, too.

A run through with tahoma, verdana, georgia and courier, resulted in proper rendering in Firefox and Opera on Win and Gnu/Linux. I suspect the results would have been similar in Mac browsers. IE failed every test.

Gawd! Can't IE get anything right?

Funny thing, I've only used it in cases where IE wouldn't try to render, eg.

a:visited:after {
    content: "\00a0\2713";
    }
so I never noticed. Sad

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 6 years 21 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

Escaped characters encoding for CSS content property

Hello Gary,
Thansk again.
Here the rendering results for your code under all yours pointed fonts are:
NN 7.1 - FF 1.0.7 - Mozilla 1.4 => renders a question mark;
Opera 7.54 => render a square.
IE => out
Running Win XP + SP2
Unfortunate, I think, must go with radical mark Sad

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 3 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Escaped characters encoding for CSS content property

Weird. The only possible explanation I can think of is that my editor (Emacs) is using the utf-8 character set. So is the document charset=utf-8. But, that shouldn't matter since I used the numeric entity, as per my example, rather than enter the symbol directly.

Another possibility is that your being on the other side of the equator causes the bits to become scrambled. Smile

I wonder what experiences others have had.

Some additional tests using only Emacs in utf-8, Firefox/Win and Firefox/Linux:

  • infinity, \221e renders in all;
  • approaches as a limit (an equal sign with a dot over it), \2250 renders in Emacs and Firefox/Win, but not in Firefox/Linux;
  • heavy chevron snowflake, \2746 renders in Firefox/Linux, but not in Firefox/Win nor Emacs;
  • ballot box check mark, \2611 and check mark, \2713 renders in all;
  • heavy check mark, \2714 renders in both Firefoxes, but not in Emacs.
I suspect, in Emacs's case, that the font family glyph set is the limitation. Emacs knows the entities by name and number. So, what's happening in Firefox? The same verdana or georgia font families are used for both. Are glyph sets different for the different OSes?
Why are my Firefoxes and Operas different from yours?

It is a puzzlement.

cheers,

gary

[/]

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 6 years 21 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

Escaped characters encoding for CSS content property

FF,NN,O and Mozz below equator Smile only renders infinity and equal with a dot over. Very strange!

I've coded using both HTML-Kit and DWMX and encoding both utf-8 and ISO-8889-1. And Notepad saving as AINSI.

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 6 years 21 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

Escaped characters encoding for CSS content property

Hello Gary and all,
This post has inpired me to create a PHP based page for play with character encoding for CSS rule.
Please have a look : http://www.maujor.com/tutorial/interativo/ichar.php

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 3 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Escaped characters encoding for CSS content property

Very cool. You should also add a link to the Character Name Index.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 6 years 21 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

Escaped characters encoding for CSS content property

Gary wrote:
Very cool. You should also add a link to the Character Name Index.

Link added!

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br