I can't figure out how to let CSS display the Euro symbol (€) in :before and :after pseudoelements.
.my-span:after {
content: '€';
}
Tried with the symbol €, u20AC and %u20AC. Nothing seems to work.
Thanks in advance.
Using the character “€” as such works provided that the declared character encoding of the CSS file (or, if the style sheet appears inside an HTML file, of the HTML file) coincides with the actual encoding.
Since servers normally do not specify character encoding for CSS files, it should suffice to save the file as UTF-8 encoded with BOM. The BOM lets browsers auto-recognize the encoding.
If this is not feasible, use the method mentioned by #Alohci: '\20AC'. This is a CSS escape that works independently of character encodings, but it’s not particularly readable.
You should just be able to use the symbol - http://jsfiddle.net/8Wz9B/
.my-span:after {
content: '€';
}
Related
I'm using an icon set that has to be used through an element like this:
<i class="icons-recycle"></i>
This generates an element with the following CSS:
.icons-recycle::before {
content: "\e67f";
}
What I need is to copy/paste the Unicode glyph that's generated via "\e67f" so I can use it in Photoshop to do some designs with that icon (I already have the .ttf file installed).
For example, "\u00C6" gives me Æ, according to this online converter.
However, I am unable to find what that character is, and I cannot select it on the HTML page! How can I convert this "\e67f" to a text character to paste into Photoshop?
MDN says the content attribute, when used like this, is in a Unicode escape sequence.
Easiest way I found was to use the content string to convert to an HTML character entity:
Instead of \e67f, type <div></div> (replace the \ with &#x) and the browser will display the individual glyph .
You can then copy/paste into Photoshop, it should display as expected if you have the proper font installed.
My problem occurs when I try to use some data/strings in a p-element.
I start of with data like this:
data: function() {
return {
reportText: {
text1: "This is some subject text",
text2: "This is the conclusion",
}
}
}
I use this data as follows in my (vue-)html:
<p> {{ reportText.text1 }} </p>
<p> {{ reportText.text2 }} </p>
In my browser, when I inspect my elements I get to see the following results:
<p>This is some subject text</p>
<p>This is the conclusion</p>
As you can see, there is suddenly a difference, one p element uses and the other , even though I started of with both strings only using . I know and technically represent the same thingm, but the problem with the string is that it gets treated as a string with 1 large word instead of multiple separate words. This screws up my layout and I can't solve this by using certain css properties (word-wrap etc.)
Other things I have tried:
Tried sanitizing the strings by using .replace( , ), but that doesn't do anything. I assume this is because it basically is the same, so there is nothing to really replace. Same reason why I have to use blockcode on stackoverflow to make the destinction between and .
Logged the data from vue to see if there is any noticeable difference, but I can't see any. If I log the data/reportText I again only see string with 's
So I have the following questions:
Why does this happen? I can't seem to find any logical explanation why it sometimes uses 's and sometimes uses 's, it seems random, but I am sure I am missing something.
Any other things I could try to follow the path my string takes, so I can see where the transformation from to happens?
Per the comments, the solution devised ended up being a simple unicode character replacement targeting the \u00A0 unicode code point (i.e. replacing unicode non-breaking spaces with ordinary spaces):
str.replace(/[\\u00A0]/g, ' ')
Explanation:
JavaScript typically allows the use of unicode characters in two ways: you can input the rendered character directly, or you can use a unicode code point (i.e. in the case of JavaScript, a hexadecimal code prefixed with \u like \u00A0). It has no concept of an HTML entity (i.e. a character sequence between a & and ; like ).
The inspector tool for some browsers, however, utilizes the HTML concept of the HTML entity and will often display unicode characters using their corresponding HTML entities where applicable. If you check the same source code in Chrome's inspector vs. Firefox's inspector (as of writing this answer, anyway), you will see that Chrome uses HTML entities while Firefox uses the rendered character result. While it's a handy feature to be able to see non-printable unicode characters in the inspector, Chrome's use of HTML entities is only a convenience feature, not a reflection of the actual contents of your source code.
With that in mind, we can infer that your source code contains unicode characters in their fully rendered form. Regardless of the form of your unicode character, the fix is identical: you need to target these unicode space characters explicitly and replace them with ordinary spaces.
In HTML files, if I want the browser to show a special symbol, such as >, I can use the special escape character sequence > and the browser will automatically transform it to >.
But what if I don't want it to be transferred into >? What if I happen to want the character sequence to be shown in plain text?
In order to have a character sequence not automatically rendered as a symbol, you can escape out the ampersand. This method is commonly used by instructional pages with lists of HTML symbols.
Source: >
Result: >
Source: >
Result: >
Thanks to Ry-♦ for stating the obvious. I was so concerned about using raw string, I didn't realize what I was using is adequate already. Use .textContent property to render text as is. If you use something like .innerHTML, it will parse your text as HTML and apply escape sequences.
Demo
var str = ">"
document.querySelector('body').textContent = str;
.icon-a:before { content: '\e803'; }
.icon-b:before { content: '\e96f'; }
Okay I know content can be used to render URL or quotes but what is happening in the above code?
I came across this code and it is confusing, I tried googling I can't find any.
Any help would be appreciated.
Thanks.
Quoting papiro as suggested here
Put simply, they're Unicode references. The "\e601", for example, is the hex code 0xe601. If you go here: http://unicodelookup.com/#0xe601/1 you'll see that the entry for that character is totally blank. It's in a part of the Unicode character set reserved for "private" use. Meaning icon libraries and the like can place whatever they want in those spots and not have to worry about overriding common characters like those of any of the alphabets of the world or a Chinese character, for instance.
In your case \e803 reffers to unicode character this
Hope this helps
It depends on font you are corrently using in parent element. This code is Unicode character code, which can display �. After \ code of character is entered.
Relevant codepen: http://codepen.io/anon/pen/ocptF/
EDIT: The codepen uses Jade, and thus messes a few things up. I was not aware of this when starting this question.
Essentially, I thought CSS attr() would copy over an HTML attribute literally, but that is not the case.
I'd like to use the CSS attr function to fill in the content for some pseudoelements. However, it prints out 004 when the HTML attribute is set to \f004, and 08fa when \f08fa.
Relevant lines:
HTML:
<div class="zoomfade" data-fill='\f004' data-unfill='\f08a'></div>
CSS:
.zoomfade:before {
content: attr(data-unfill);
position: absolute;
}
.zoomfade:before {
content: attr(data-fill);
position: absolute;
}
Thanks!
Escape sequences in CSS are only treated specially in CSS syntax. When you specify it in an HTML attribute value then use that value in CSS attr(), it is taken literally. From the CSS2.1 spec:
attr(X)
This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. [...]
Since you're specifying character codes in HTML attribute values, you can either use HTML character references, entity references or the Unicode characters themselves. It's worth noting that the two character codes you have do not appear to be valid, however, so they may not work at all.
EDIT: [...] Essentially, I thought CSS attr() would copy over an HTML attribute literally, but that is not the case.
It copies the attribute value according to the DOM, which may be different from how it is represented in the source, e.g. the source markup, or the script that is generating the element.
For example, if the source is represented in raw HTML markup, then as I mention above, you will need to use HTML character escapes, because HTML is parsed by an HTML parser. If the elements are generated using a JS-based template engine such as Jade, then the character escapes take the form of \u followed by the hexadecimal code-points. In both cases, the respective parsers will translate the escape sequences into their representative characters, and the characters themselves are what is stored in the DOM as part of the attribute value.
Of course, again there's always the alternative of just using the Unicode characters directly. If your source files are all encoded as UTF-8, you should have no problem using the characters directly.