Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Placing Unicode character in CSS content value [duplicate]

I have a problem. I have found the HTML code for the downwards arrow, ↓ (↓)

Cool. Now I need to use it in CSS like so:

nav a:hover {content:"&darr";} 

That obviously won't work since ↓ is an HTML symbol. There seems to be less info about these "escaped unicode" symbols that are used in css. There are other symbols like \2020 that I found but no arrows. What are the arrow codes?

like image 537
davecave Avatar asked May 01 '12 04:05

davecave


People also ask

How do I add a Unicode character in CSS?

The general format for a Unicode character inside a string is \000000 to \FFFFFF – a backslash followed by six hexadecimal digits. You can leave out leading 0 digits when the Unicode character is the last character in the string or when you add a space after the Unicode character.

How do I use code points in CSS?

You can use a character's hexadecimal Unicode code point value in the CSS content property by escaping it (i.e. using a backslash followed by the character's hexadecimal numeric sequence).

How do I add a Unicode character in HTML?

You can enter any Unicode character in an HTML file by taking its decimal numeric character reference and adding an ampersand and a hash at the front and a semi-colon at the end, for example — should display as an em dash (—). This is the method used in the Unicode test pages.

What is a Unicode character stored in?

Unicode uses two encoding forms: 8-bit and 16-bit, based on the data type of the data that is being that is being encoded. The default encoding form is 16-bit, where each character is 16 bits (2 bytes) wide. Sixteen-bit encoding form is usually shown as U+hhhh, where hhhh is the hexadecimal code point of the character.


1 Answers

Why don't you just save/serve the CSS file as UTF-8?

nav a:hover:after {     content: "↓"; } 

If that's not good enough, and you want to keep it all-ASCII:

nav a:hover:after {     content: "\2193"; } 

The general format for a Unicode character inside a string is \000000 to \FFFFFF – a backslash followed by six hexadecimal digits. You can leave out leading 0 digits when the Unicode character is the last character in the string or when you add a space after the Unicode character. See the spec below for full details.


Relevant part of the CSS2 spec:

Third, backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:

  1. with a space (or other white space character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.
  2. by providing exactly 6 hexadecimal digits: "\000026B" ("&B")

In fact, these two methods may be combined. Only one white space character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must be doubled.

If the number is outside the range allowed by Unicode (e.g., "\110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5).

  • Note: Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not).
    The identifier "te\st" is exactly the same identifier as "test".

Comprehensive list: Unicode Character 'DOWNWARDS ARROW' (U+2193).

like image 186
Matt Ball Avatar answered Nov 23 '22 21:11

Matt Ball