What is content in CSS before or after? - html

.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.

Related

Why do some strings contain " " and some " ", when my input is the same(" ")?

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.

how to display euro symbol in css after and before pseudoelements

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: '€';
}

Remove special HTML characters from labels or textfields in flex (mxml)

I'm loading data with an RSS feed into a Flex application.
Some of the data has html special characters. It can't read é,è,à,ç and other similar letters that are used in French for example. It gives a strange code instead of the letters with accents.
Now I use for reading HTML texts in Flex, but how can I remove these special characters?
Thanks!
Guillaume
use "restrict" property of the component so that it takes some specific type of string. Something like mentioned below
myTextBox.restrict = "A-Z a-z 0-9",
You can use RegExp for removing those French letters.

What is practical purpose for bidirectional override "bdo"?

Before coming here, I tried myself by googling. After I read these two links
http://www.w3schools.com/tags/tag_bdo.asp
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_bdo
I still don't understand clearly what is the practical purpose?
Thanks in advance for those who shed some light on this.
Pretty striaghtforward. If you're writing a web page using a default language, such as English, that is rendered left-to-right, and you want to include a island of text in another language, such as a quote in Hebrew, that is rendered right-to-left you can use this tag to override the base direction in which the text is written onto the page in case the bi-directional algorithm is getting it wrong. You need to make sure that the font you're using supports the appropriate character set too, of course.
http://www.w3.org/TR/html40/struct/dirlang.html
I tried the code bellow, and noticed that it is apparently obsolete for Hebrew, at least:
<!DOCTYPE html>
<html>
<body>
<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>
<p>חדשות, ידיעות מהארץ והעולם - עיתון הארץ</p>
<bdo dir="rtl">חדשות, ידיעות מהארץ והעולם - עיתון הארץ</bdo>
</body>
</html>
Both seemed to output the same line, which confused me, but prompted a search that lead me to the following article:
The bidirectional ordering of text in AbiWord is done automatically,
closely following the Unicode Bidirectional Algorithm (UBA; see the
Unicode Consortium website). The Unicode character set assigns each
character certain directional properties which are then used by the
UBA to order text. Thus, Hebrew or Arabic characters will
automatically be treated as right-to-left, and English characters as
left-to-right. There are some characters that are directionally
ambiguous, and how they are treated by the UBA depends on what
characters are found in their vicinity (this includes all white space
and punctuation characters).
http://fantasai.tripod.com/qref/HTML4/structure/bdo.html
Hope it helps

Mathematical set symbols in HTML

I wanted to put a bar over my variable such as not(x) and also some set symbols in my web page? How do I incorporate that in my html page.
For the set symbols, you ought to use unicode HTML entities.
For the line over a variable (p), I'd rather use an alternate symbol for not, such as:
¬p (¬p)
You may also, as a commenter pointed out, use the combining diacritical unicode HTML entity like so:
p̅ (p̅)
Lastly, you may use one of the CSS methods provided.
<div style="text-decoration: overline">X</div>