If I type emojis here like 🎓🦕, you'll probably see colored sprites.
If you copy and paste that into Windows Notepad / Notepad++, you'll see something like this.
If you copy-and-paste that back into another text editor, it'll present normally.
Can I achieve the rendering effect of Notepad in CSS? I would prefer not to export / load my own custom SVGs or use JS if possible, and I would like copy-and-pasting into other applications to render emojis normally, as is the case with Notepad.
The non-accepted response here How would I change the color of an emoji? remarks that one can modify an emoji with a trailing \FE0E to use Unicode Variation Selector 15 (VS15) which enables text presentation. However, adding such a character would override rendering in other applications after copy-pasting, which is undesirable.
There was a CSS draft https://github.com/w3c/csswg-drafts/issues/1144 which proposed adding font-presentation: auto | text | emoji | text-override | emoji-override to CSS but the specific issue hasn't progressed since 2017 & I'm unaware if progress has continued elsewhere.
This should become trivially possible via CSS whenever the proposed CSS Fonts Module Level 4 goes into effect. See Section 9.3 Selecting the text presentation style: The font-variant-emoji property of https://drafts.csswg.org/css-fonts-4/#font-variant-emoji-prop
In the meantime, here is a workaround that supports copy-and-pasting by exploiting the fact that CSS generated content is not captured in copy/paste operations. This is incompatible with controls like text inputs, though.
In CSS:
.emoji::after {
display: inline;
content: '\FE0E';
}
And HTML:
Lorem<span class="emoji">🎓</span>Ipsum
Lorem<span class="emoji">🦕</span>Ipsum
This renders the graduation cap correctly, but strangely enough not the dinosaur. It doesn't work for me if I copy-paste emojis directly into source; you need to specify the codepoints explicitly, not sure how that works.
Copy-and-pasting the text does not copy-and-paste the VS15 codepoint as we'd hope:
Lorem🎓Ipsum Lorem🦕︎Ipsum
Related
I am trying to create a TOC for my Markdown blog.
The methods I am finding here... : Markdown to create pages and table of contents?
....do not work for me because I am naming all of my headers # _</>_ The Setup because I am using CSS on to style the "", giving each header a nice colored Icon next to it. If I simply use ```# The Setup ```` it works great.
This causes issues whenever I try to use [The Setup](#The-Setup).
I tried a few things like [The Setup](#_</>_-The-Setup) and other things, but I can not get it to work.
If someone can point me in the right direction I would greatly appreciate it. Also, if anyone has a better way of adding custom icons next to headers, I think that would be the better way to go about it.
As always, thanks in advance.
The general solution is to examine the rendered HTML output to see what the tool is converting the special characters to, in the HTML's element ID. Every tool could handle the conversion differently (it could convert special characters to -, _, or just remove special characters). Some examples:
<h1 id="_____the-setup">The Setup</h1>
<h1 id="-the-setup">The Setup</h1>
<h1 id="the-setup">The Setup</h1>
Once you have identified the exact id that the tool is using, then you use that value as the heading link in the markdown's table of contents. For example:
[The Setup](#_____the-setup)
Now, the tricky part is that not all Markdown tools will export the rendered HTML, including VS Code. The workaround for VS Code is:
Open the markdown preview mode (which renders to html internally).
Open the VS Code Developer Tools (Help > Toggle Developer Tools).
Use DevTools to inspect the element (in this case, the heading element for "The Setup").
I see that VS Code named the id as the-setup, so in the markdown's table of contents, I write [The Setup](#the-setup). Now the table of content hyperlink works in VS Code. Caveat: it might not work in other Markdown tools if they render a different HTML element ID!
Another shortcut now available in VS Code (1.70 July 2022), is that markdown can autocomplete the header ID. So you just type #, and it will list the valid IDs:
I would like to use a regular symbol (the up-right-arrow) in a Wordpress menu. I copied the symbol character into the required field and it looks good on desktop. For some reason, the iPhone I use displays an emoji instead of the character. I already activated the Wordpress plugin "Disable Emojis" but this doesn't help. How do I force smartphones to display the simple black arrow instead of a colored arrow emoji?
The usual searches just bring up the idea with the Wordpress plugin which probably disables emojis globally but still lets smartphones override that.
Screenshots (Imgur)
You will never get the same emoji / symbol depending on os, service, browser, app, etc ... because it is interpreted.
Find below some examples :
1. On Twitter
2. On FaceBook
3. On Instagram
4. On WordPress wysiwyg as text content
5. On WordPress wysiwyg as visual content
For the text variant, use the text presentation sequence:
U+2197 U+FE0E (↗︎)
For the emoji variant, use the emoji presentation sequence:
U+2197 U+FE0F (↗️)
For the default variant, use only the character:
U+2197 (↗)
but, as already mentioned, how will it be displayed by default depends on many factors: OS, browser, etc.
See: Emoji Presentation Sequences, v11.0
I noticed on my website, http://www.cscc.org.sg/, there's this odd symbol that shows up.
It says L SEP. In the HTML Code, it display the same thing.
Can someone shows me how to remove them?
That character is U+2028 or HTML entity code 
 which is a kind of newline character. It's not actually supposed to be displayed. I'm guessing that either your server side scripts failed to translate it into a new line or you are using a font that displays it.
But, since we know the HTML and UNICODE vales for the character, we can add a few lines of jQuery that should get rid of the character. Right now, I'm just replacing it with an empty space in the code below. Just add this:
$(document).ready(function() {
$("body").children().each(function() {
$(this).html($(this).html().replace(/
/g," "));
});
});
This should work, though please note that I have not tested this and may not work as none of my browsers will display the character.
But if it doesn't, you can always try pasting your text block onto http://www.nousphere.net/cleanspecial.php which will remove any special characters.
Some fonts render LS as L SEP. Such a glyph is designed for unformatted presentations of the character, such as when viewing the raw characters of a file in a binary editor. In a formatted presentation, actual line spacing should be displayed instead of the glyph.
The problem is that neither the web server nor web browser are interpreting the LS as a newline. The web server could detect the LS and replace it with <br>. Such a feature would fit well with a web server that dynamically generates HTML anyway, but would add overhead and complexity to a web server that serves file contents without modification.
If a LS makes its way to the web browser, the web browser doesn't interpret it as formatting. Page formatting is based only on HTML tags. For example, LF and CR just affect formatting of the HTML source code, not the web page's formatting (except in <pre> sections). The browser could in principle interpret LS and PS (paragraph separator) as <br> and <p>, but the HTML standard doesn't tell browsers to do that. (It seems to me like it would be a good addition.)
To replace the raw LS character with the line separation that the content creator likely intended, you'll need to replace the LS characters with HTML markup such as <br>.
This is the solution for the 'strange symbol' issue.
$(document).ready(function () {
$("body").children().each(function() {
document.body.innerHTML = document.body.innerHTML.replace(/\u2028/g, ' ');
});
})
The jquery/js solutions here work to remove the character, but it broke my Revolution Slider. I ended up doing a search replace for the character on the wp_posts tabel with Better Search Replace plugin: https://wordpress.org/plugins/better-search-replace/
When you copy paste the character from a page to the plugin box, it is invisible, but it does work. Before doing DB replaces, always have a database (or full) backup ready! And be sure to uncheck the bottom checkbox to not do a dry run with the plugin.
I'm using PHPstorm 6.
When i try to format my code which contains french characters, i got a issue like you see on the pictures.
NB : i got this just when i put my text into a tag like :
<span>génie Informatique</span>
So before formatting i was this :
And after formatting i got this
Thanks
What kind of file is that -- HTML?
In any case: you do have light green background between the tags. This suggests that you have another language injected between those tags (Language Injection functionality), which may use completely different formatting rules (not HTML -- e.g. JavaScript or whatever you may have injected there).
Possible solution:
Place cursor somewhere between such tags, Alt+Enter (or click on light bulb icon) and use "Uninject Language" option.
Alternatively: Settings | Language Injections -- find and disable (or even delete) offending entry there (will be "global" or "project" type in last column).
I am trying to create a file upload field that has a little bit of style to it, but I seem to be having problems finding examples of this. I know part of the reason is that the field itself varies from browser to browser.
Any ideas how to do this? Or is there a way to do this without using a file element of a form that can be styled?
If what you mean is the text field for the file names, you can use the input[type=file] selector in the css files. For example :
input[type=file] { background-color: red; }
If what you mean is the file selection dialog box, I think it's browser/OS dependent and there's little (if any) you can do about it.
I have come up on this problem before. Unfortunately, file uploads are nearly impossible to style consistently across browsers. As of CSS 2, I think, the W3C standard specifically leaves behavior undefined--think of how many ways it would need to be implemented on different platforms. Firefox, for example, generates anonymous button and input elements inside the file upload element which only inherit some of the properties that you set on the upload element itself.
You can get some to work using, for example, Furuno's method, but know that the behavior will be spotty and differ widely across platforms/browsers.
Here's some links I found:
QuirksMode Article
One Extra Pixel Article (look for the file input styling section)
This would fit for your requirement.
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (with configurable classes) and will show selected file names (or selection errors) beautifully.
Additionally you can set various restrictions using simple data-attributes or JS settings.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.