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
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 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
On http://google.com's source code (view-source:https://www.google.com/), there is the a meta tag like this:
<meta content="Let the matches begin! Celebrate ⚽ around the 🌎🌍🌏 in today's #GoogleDoodle!" property="twitter:description">
How were those those emojis added to the source code? How is it possible to generate such a page dynamically (what would be written on the server side for the HTML to be generated like this)?
Those are Unicode characters.
For adding emojis into HTML, you can use the decimal (dec) or hexadecimal (hex) reference found in the table on w3school web page.
You can also check my shoe emojis example by running the code snippet below :-)
<p style="font-size:50px">👟 👟</p>
How can I use for example the glyph name "rcaron.terminal" which has no Unicode value in HTML? or any other such case? Is it even possible? I think it must be surely but I got no clue. It's easy for regular letters like the glyph "ß" where I would just type "ß" and get that character or "ß" (same result) but for glyphs without any Unicode value I don't know what I'm supposed to do...? I've tried also "&rcaron.terminal" but nothing, where as something like "&hearts" would work giving a heart glyph of god knows what font, probably Arial I dunno.
Do I need to use state some specific encoding aside from ANSI in my html document?
ie. < meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8" > or something... like Im really lost lol
All I found on the net was this http://text-symbols.com/html/unicode/ but I cant find any more info so I came here.
Please help! Thanks! :)
There are no glyphs in HTML which do not have a Unicode name.
If you really need to have a glyph which is not representable using regular Unicode, you might want to create a font of your own and define the glyphs you need in the private use area; but obviously, then, your HTML will be impossible to use without that particular font.
Background links:
http://arstechnica.com/information-technology/2008/10/embedded-web-fonts/
http://www.font-face.com/
Practical guides:
http://blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you/
http://blogs.atlassian.com/2013/07/how-to-make-an-icon-font-the-8-step-guide/
First navigate to this site: https://fontdrop.info/#/?darkmode=true
Upload the file with your font
Click on the Ligatures tab.
Every Glyph should have a Components field
copy the components for the character you want to use
paste that string into HTML
You don't need any & or #, it just detects the string and converts it.
In the noble effort to re-invent every wheel, our company has recently rolled our own custom web-based e-mail app, of which I was the primary designer.
One thing I've noticed is that smileys coming in from MS Outlook-based e-mails (sent from third parties) are not appearing correctly. Example: A happy face just displays a J
The HTML of the inbound message comes in like this:
<span style="...;font-family:Wingdings;...">J</span>
I know that Firefox and Chrome do not support the Wingdings font because it is non-standard. However, I am tasked with coming up with a fix.
Is there a good way to either 1) force the browser to load and use Wingdings or 2) otherwise convert the J to a smiley?
I'd rather not do anything crazy like try some wingdings-detection-regex - or even worse, parse the DOM - just to get some stupid emoticons working. Maybe there is already some library out there that already handles this?
For what it's worth, GMail seems to not 'fix' this problem either. iOS doesn't in the message view, but puzzlingly does fix it in the inbox view (replaces the J w/ emoji)
EDIT
To clarify, this question is regarding inbound messages from third parties. Outlook, by default, autocorrects ":)" to the Wingdings smiley. There's nothing I can do to prevent this coming in. What I need is a solution to correct for this.
EDIT 2
Again, the app itself is a web based e-mail client (Gmail, etc.). E-mails go in to here, NOT to users' individual Outlook/phones/other e-mail clients. It only goes into the web app.
To avoid having to parse the HTML or manipulating the DOM, a simple solution would be to use CSS3 web fonts by linking the Wingdings font-family to a copy of the Wingdings font file on your server:
<style>
#font-face {
font-family: Wingdings;
src: url(link_to_wingdings_font_file.ttf);
}
</style>
However, a license is required for this approach.
You could embed the SWEC (Symbola-based Wingdings Emoticons Compatibility) font: https://drive.google.com/open?id=0BwDrnPQfa-aMOEx0bEZCQUNrSGs
It provides basic compatibility with Wingdings emoticons. (In Wingdings, "J" represents a smile, "K" represents a lack of expression, and "L" represents a frown.) Background: certain versions of Microsoft e-mail clients still in use change user-typed expressions such as ":)", ":|", and ":(" into "J", "K", and "L", respectively, and then specify Wingdings as the font family; recipients on systems which do not include a Wingdings-compatible font are not able to see the intended emoticons, which can cause confusion.
You need to manually substitute it prior to sending the email as you have no control over what fonts the reader has installed. You also can't include anything outside bland old html and css (unless you want to mess with VML)
First I would try running your wingding through a html converter to see if there is a html code for it.
Besides that, you could try a webfont wingdings equivalent, however there are issues with Outlook playing nice when webfonts are imported in email (ignores your font stack, falling back to Times New Roman).
Besides that, all that is left is ZephyrusDigital's suggestions of using an image or :).
Against my better judgement I have decided to go for the quick hack and just use a regular expression. Here it is for anyone else that runs into the same problem:
$html = preg_replace('/\<SPAN*?(Wingdings)*?[^\>]*\>J(\<o\:p\>\<\/o\:p\>)*\<\/SPAN\>/i', ' :) ', $html);
use :)
kidding!
why not save the wingdings smiley in photoshop as a png, or make another custom one? you could use <img src="http://something.com/images/smiley.png" style="display:inline-block;"/> and it won't look weird in a text block as long as it isn't taller than your line-height.