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.
Related
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.
.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.
I'm a bit stuck. I have scraped a website and would now like to convert it into markdown. My html looks like this:
Some text more text, and more text. Some text more text, and more text.
Once in a while <span class="bold">something is bold</span>.
Then some more text. And <span class="bold">more bold stuff</span>.
There are html to markdown modules available, however, they would only work if the text <b> looked like this </b>.
How could I go through the html, and everytime I find a span which is supposed to bold something, turn this piece of the html into bold markdown, that is, make it **look like this**
Try this one https://github.com/domchristie/to-markdown, an HTML to Markdown converter written in JavaScript.
It can be extended by passing in an array of converters to the options object:
toMarkdown(stringOfHTML, { converters: [converter1, converter2, …] });
In your case, the converter can be
{
filter: 'span',
replacement: function(content) {
return '**' + content + '**';
}
}
Refer to its readme for more details.
Notepad++ is an open-source editor that supports regex. This picture shows the basic idea.
You know how to use an editor to find and replace strings. In an editor like Notepad++ you can look for string patterns and replace parts of the patterns and keep what's left. In your case, you want to find strings that are framed by HTML markup. Here the regex in the 'Find what' edit box displays that, with the special notation ([^<]*) meaning save zero or more of any character other than the '<' for use in a replacement string. The 'Replace with' edit box says used what was saved (as \1) in the expression **\1** which gives you what you prefer to have in the text file. It remains to click on 'Replace all'.
To be able to do this you need to install Notepad++ and learn some basic Perl regex. To get this dialogue box click on Ctl-H. Of course, if you get it wrong there's always Ctl-Z.
If I write in a HTML file the browser automatically translates it to its corresponding character, in this case a space.
How can I escape from this phase? I mean, if I would like to print just the code (i.e. ) how can I prevent the browser from doing that?
You can't stop the browser from treating HTML as HTML.
If you want to include a & as data instead of as the start of a character reference, then use the character reference for it:
For this you will need JQuery.
Try .text() method. http://api.jquery.com/text/
Get the body content an then replace it with text.
Means: $('body').text($('body').html());.
This will give you an output of your html in plain Text. Actually you can do this with other Elements as well. Replace the Word body with the element, class or id you need.
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: '€';
}