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
Related
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
I am building a WordPress website for that content has been already given but while using that content it will display like
am\-hn-I-X-bpsS kv]-μ-am-]n-\nIÄ
How can I add these type of fonts into WordPress is there any plugins available
– use UTF-8 (Unicode) charset
– make a test post; type it directly from your computer’s Unicode Malayalam keyboard
-publish the test post and it should be visible. Try it.
Need to convert the current text to Unicode for that I used the website Unicode convertor
am\-hn-I-X-bpsS kv]-μ-am-]n-\nIÄ = മാനവികതയുടെ സ്പന്ദമാപിനികള്
Using this the problem is solved
I have got ឴symbol, that i can't display on web page (utf-8) content type. This symbol without width and can't see at all. How to show it? Code is ឴
for example here http://www.endmemo.com/unicode/khmer.php 6068 and 6069 are not visible, but i need to show it, at least space
Edited:
I'm using Arial or sans-serif. I think, that it is pretty usual fonts. What people do: they making UNIQUE text by inserting this symbol inside usual symbols. For example, user write: "a(invisible symbol of kmer)b(invisible symbol of kmer)" and so on. I see on page only "ab" without any spaces. I tried to put actual character inside html to see it, but with no luck. I thought that symbol, that is not present in font should be question mark or empty square, but not in that case. Solution can't just be simple replace in text.
If your page is UTF-8 then it's better to use the actual character rather than a HTML entity.
Your requested character is not present in many fonts. You can try finding the latest version of Code2000 which appears to support it.
You can see fonts that support this particular character here:
http://www.fileformat.info/info/unicode/char/17b4/fontsupport.htm
If you can't find a font and you want to display an empty space instead you could replace it before showing it in the page or put it in a container. The page you linked uses a table cell to hold the character.
I have problem with a web page where it is display some symbols wrongly only in mozilla. The page is click here In this page there are so many -> symbols used. It is displayed as ® in mozilla. So how can i make it to display properly as -> symbol in mozilla. The page has style which are created by micosoft word. I want to retain those as it is.So any css trick can i use it to do?
To get the error i am facing please go to this page and search for software ® click ‘Buy now’.
You use specific Microsoft extensions :
<span style="mso-list:Ignore">§<span style="font:7.0pt "Times New Roman""> </span></span>
And defining fonts in style enclosing them with " is clearly buggy.
I don't know what MSWord tries to do but it's obviously not trying to build a standard HTML document for the World Wide Web. Is that a recent version ?
You'll have to fix the generated HTML.
Another problem is that your rendering relies on the Times New Roman font, which isn't available in non Windows computer.
Using standard HTML and encoding your document in UTF-8, you could replace those spans with simple arrow characters.
But the better solution would be to simply forget the idea to convert a MSOffice document to HTML and to build a proper HTML document instead.
I am developing a theory music web page. In music notation there are some symbols like "flat" and "sharp" that can be achieved with standar characters like "b" and "#", but the final output is very unpleasant.
I have instaled special fonts to use these (and many other) music symbols, but obviously they are not installed in the vast majority of computers.
1.- Is there a way to safely use this fonts?
2.- If so, what HTML tag should I use? Will it be Ok to use the span Tag with a Class="MusicNotation" inside a p Tag to change the font of these music symbols via CSS? Is there a better ( more standar ) way to do this?
I provide an example of what I will do
This is the HTML
<p>This is a <spam class="MusicNotation">G#</spam>chord</p>
And this is the CSS:
#MusicNotation { font-family: Repreise }
This will help you:
There are also HTML code alternatives for making music note symbols. There are officially 7 music note symbols that can be displayed through HTML codes. Just copy and paste or type these following codes. Numbers should always be preceded by the ampersand and sharp sign, and should end with a semi-colon. For the quarter music note, you should type ♩ and it should look like this: ♩.
To make an eighth music note, type ♪ and it should look like this: ♪.
To make a beamed eighth music note, type ♫ and it should look like this: ♫.
To make a beamed sixteenth music note, type ♬ and it should look like this: ♬
To make a music flat sign, type ♭ and it should look like this: ♭
To make a music natural sign, type ♮ and it should look like this: ♮
To make a music sharp sign, type ♯ and it should look like this: ♯.
http://www.howtodothings.com/hobbies/how-to-write-music-note-code
Be sure to use <meta charset="utf-8">
Don't use a font-family that is unlikely to be installed on the target machines.
I'm assuming those symbols are available in Unicode somehwere, but there are many fonts that won't contain a full Unicode set and they'll show up as little boxes or worse.
#font-face is the new technology for embedding a font into a page, but you'll have to do some grunt work to get it working.
If you are open on using Flash, you can use sIFR. Take a look here: http://www.mikeindustries.com/blog/sifr
You could use this library: http://musicengravingcontrols.com/
It's open source and it has two web implementations (for Asp.Net MVC and ASP.NET Core) and one experimental implementation for WebAssembly (using Blazor).
Some article on CodeProject: https://www.codeproject.com/Articles/1252423/Music-Notation-in-NET