I'm working on a music related website, and frequently use the HTML special characters for sharps (♯) and flats(♭) to keep things pretty, e.g.:
♯
♭
However, I've noticed that in some browsers (IE6, Safari for PC) those characters aren't supported. I've created a conditional javascript that serves up plain, supported characters in place of the special ones ( G# for G♯ and Bb for B♭ ). But I'm having a hard time figuring out how to detect which browsers lack those characters.
I know I could test for the browser (e.g. ie6), but I was hoping to do things right and test for character support itself.
Does anyone know of a good way to do this using either javascript, jQuery, or rails? (The page is served by a rails app, so the request object and any other Rails magic is on the the table.
If you create two SPANs, one containing the character you want, and the other containing an unprintable character U+FFFD (�) is a good one, then you can test whether they have the same width.
<div style="visibility:hidden">
<span id="char-to-check">♯</span>
<span id="not-renderable">�</span>
</div>
<script>
alert(document.getElementById('char-to-check').offsetWidth ===
document.getElementById('not-renderable').offsetWidth
? 'not supported' : 'supported');
</script>
You should make sure that the DIV is not styled using a fixed font.
"Browser support" is not the problem here. You should be serving your files as UTF-8*, and use the appropriate characters rather than the HTML entities.
Unicode sharp symbol: ♯ (U+266F)
Unicode flat symbol: ♭ (U+266D)
You should also make sure to save your files in UTF-8 (and not, say, ASCII or ISO-8859-1).
See also: the must-be-mentioned Joel on Software: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!).
*I'm not a Rails guy, but I think it does this by default.
Rather than mucking around with JavaScript, what you should be doing instead is using css's unicode-range:
#font-face {
font-family: 'MyWebFont'; /* Define the custom font name */
src: local("Segoe UI Symbol"),
local("Symbola"),
url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
unicode-range: U+266F, U+266D; /* Define the available characters */
}
body {
font-family: 'MyWebFont', Arial;
}
♯
♭
Normal text
In the local blocks, define fonts that people might have installed locally and contain the symbols you want (like Window's Segoe UI Symbol). Then define a web font (I suggest Symbola) containing the symbol you want to show.
The unicode-range directive tells supporting browsers (IE9 and up) not to download the font unless the specified symbols are present on the page (You can find their unicode number by searching Unicode-Tables.)
If they have the font already, they won't download it. If the symbol(s) aren't present on the page and your browser isn't older than dirt, the font won't be downloaded. It'll only be downloaded when it is needed.
(If you still want to support old IE, use fontsquirrel to generate your initial #font-face statement, then add the local and unicode-range parts yourself.
Add this to your HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
And check to see if IE and Safari render the page right.
Related
how can I create a custom emoji using javascript?
I have been asked to remove all the emoji which aren't supported by users device (I think emoji's are dependent on the device even though you are using on a web browser) so I have no way to test it even if I am able to implement it.
I came across this answer which might be helpful: How can I detect rendering support for emoji in JavaScript? but unfortunately my device supports all the emoji.
So I was thinking about other way round? Creating an unsupported emoji but I am not sure how to create an unsupported emoji and how to use it with javscript
I can't remove the emoji file from my device because I have also been asked to write test cases.
An "unsupported emoji" is just an unsupported Unicode character. Emojis are spread through various different blocks in the Unicode standard, they're not contained to a single block.
So just pick a code point that hasn't been assigned a character yet. For instance, the Dogra range (one I picked at random from here) is 0x11800-0x1184F but doesn't currently have a character assigned for 0x1184F, so the JavaScript string "\u{1184F}" should provide an unsupported character:
document.body.textContent = "\u{1184F}";
For me, that shows the usual glyph I get when a character is unsupported.
But beware of the detection technique you linked to. Both Roko's implementation and if-emoji don't work for me on Chrome or Firefox on Linux.
It is hard to create custom emojis. Not just to draw them. It is hard to code them.
Look at this example:
<html>
<head>
<style>
.emojiDiv {
display: flex;
}
</style>
</head>
<body>
<div class="emojiDiv"><p>This is a youtube emoji: </p><img src="https://www.startpage.com/av/proxy-image?piurl=https%3A%2F%2Fwww.logo.wine%2Fa%2Flogo%2FYouTube%2FYouTube-Icon-Full-Color-Logo.wine.svg&sp=1667958250Ta2f2d8d8411fb3044a0837895e548a3b6b4178cdebfc1c9251c5990b5a3eeb80" height="30px"><p> like it? me neither!</p></div>
</body>
</html>
And, This does not give very good results, It is not clean, And the emoji is not aligned very well, Maybe you can possibly use normal emojis? Most emojis are supported on Windows, Apple, Android, MacOS, and Linux,
You can just use normal emojis like this: 🍌, Potassium
I am using the Instagram API and below is an example of two characters I get back from IG that represent a user's name.
💛🌻
In the HTML of my web page they are displaying as question marks, but if you copy and paste them into any text editor they display as a heart and a flower.
How can I get these and other symbols to display correctly in the HTML?
The characters are U+1F49B YELLOW HEART and U+1F33B SUNFLOWER. They are relatively new as coded characters (though somewhat older as emoji symbols implemented using other techniques), and few fonts contain them: Segoe UI Symbol, Segoe UI Emoji, Quivira, Symbola, and maybe some other, very new or specialized fonts. The Segoe UI fonts are available in new versions of Windows, possibly depending on the installation of updates (Microsoft nowadays delivers some fonts and extensions to fonts via Windows update mechanisms). The other two are free fonts that users may download and install, but they are probably not pre-installed in any computer.
Thus, if the user’s system lacks those fonts, the characters do not appear; instead, some indicator of an unrepresentable character is shown.
There is an additional problem. Although browsers are expected to scan through all the installed fonts to find a glyph for a character, they often fail to do this properly, especially for more or less exotic characters. Testing on Win 7 without any font settings in the test document, I observed that these characters are displayed by IE and Firefox, but not by Chrome. This issue can be fixed by specifying a list of fonts explicitly:
.emoji {
font-family: Segoe UI Emoji, Segoe UI Symbol,
Symbola, Quivira;
}
<span class=emoji>💛🌻</span>
To cover user systems that lack these fonts, you would need to use a downloadable font via #font-face, in practice using Symbola or Quivira. They are rather large fonts, so using images may be a more viable option—especially because then you can use color images. (In principle, you can use Variation Selector control characters to ask rendering software to use emoji-style color glyphs for the characters, but the fonts don’t seem to contain such glyphs, and besides browsers might be unable to use them, i.e. might lack support to Variation Selectors.)
Since you cant get them to show correctly since its browser specific, you can download the Chrome plugin, Emoji Plugin
Edit: Another solution would be to get the unicode of the emoji that comes in, and then display an image instead. This would require you do download the emojis as images.
Sadly, there's nothing you can do. You have to wait for all browsers to adopt these HTML5 entities.
IE 11 is currently the only browser that displays all HTML5 entities. I viewed this page in IE 11 and they show up. In Chrome, for example, they don't show.
I've been trying to embed some hebrew characters in Thom Sander's free html5 template (download link).
For example, I've tried to change a left-side menu item text to Hebrew, i.e.,
Home Page => עמוד הבית
For some reason the hebrew characters are not shown at all.
When I add hebrew in other places in the document, it is shown correctly. At first I thought this may be an encoding issue but the head encoding seems to be valid: UTF-8. I think there might be some JS code ignoring the Hebrew text, but I'm not sure.
Any ideas?
Seems like someone already found a solution for that. I didn't try to implement the whole solution but tested it with your files and it works.
You can find the solution here
Basicaly you just need to use CufonRTL.js to be able to use Hebrew & Cufon.js together.
You may find CufonRTL.js at the begining of the blog post or just download the file from here
Then you ll have to load CufonRTL.js and execute something like:
CufonRTL.RTL('#menu a');
So the menu links would support Hebrew while using the Cufon library & custom font.
The reason you cannot embed Hebrew characters into your website is beacuse the template is using the cufon technique, which doesn't support right to left languages.
Planned features:
Support for right-to-left and bi-directional text
However, it looks like there is a way around it:
Using Cufon with Right-To-Left Text
Try adding this rule to the CSS
html { unicode-bidi: embed; }
http://www.w3schools.com/jsref/prop_style_unicodebidi.asp
The unicodeBidi property is used with the direction property to set or
return whether the text should be overridden to support multiple
languages in the same document.
Be sure to use:
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
Or (as a new HTML5 standard):
<meta charset='utf-8'>
And try adding this property in your CSS:
unicode-bidi: embed;
You can also try to display something, using HTML Entities instead of Unicode characters: ֑ ֒ #1427;
I'm having a problem with UTF-8 character on the page title,
I want to add this on the title of the page --> ♫ <--- (the Music symbol)
The thing is, sometimes it works (on Google Chrome) and sometimes it doesn't (when it doesn't work, it appears a square that is supposed to be an error of encoding) weirdly.
And in firefox, it always work when you look to the title in the top of the window (the title that appears up in your page) but the title that appears in the bar below appears the square thing again. :/
What do I do to fix this?
I'm defining the title via Javascript by a js file which I'm using PHP to define it utf-8 as well.
var title = "♫ My Music";
document.title = title;
by the way, it seems to work always on Linux, but on Windows, it does those stuff. =/
Thanks in advance.
This is a font problem rather than an encoding problem; a small rectangle in place of a character typically means that the character is not present in the font(s) used.
Browsers typically use some specific fonts when they render title element contents (somewhere outside the page itself). These fonts may depend on the settings in the operating systems. On Windows 7 for example, the default for them is 9pt Segoe UI, a relatively rich font, whereas older systems have more limited fonts. Anyway, that’s outside an author’s hands.
So the conclusion is that special symbols should be avoided in title elements. Their rendering is not guaranteed, and they probably have no value as far as search engines are considered.
Have you added the meta tag for charset to your HTML?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
sometimes it works (on Google Chrome) and sometimes it doesn't (when it doesn't work, it appears a square that is supposed to be an error of encoding) weirdly
This is most likely down to the font used by your browser, and your Operating System. If the character is defined in the font, it will show up. If it isn't, it won't.
There isn't much you can do about this, unfortunately - both these things are outside of your control.
Somewhat related: Unicode support in Web standard fonts
I resolve this problem (year in Spanish) with this notation:
title="A & # 241 ; o"
IMPORTANT: I insert blanks spaces between characters for adequate renderization.
I'm working on a music related website, and frequently use the HTML special characters for sharps (♯) and flats(♭) to keep things pretty, e.g.:
♯
♭
However, I've noticed that in some browsers (IE6, Safari for PC) those characters aren't supported. I've created a conditional javascript that serves up plain, supported characters in place of the special ones ( G# for G♯ and Bb for B♭ ). But I'm having a hard time figuring out how to detect which browsers lack those characters.
I know I could test for the browser (e.g. ie6), but I was hoping to do things right and test for character support itself.
Does anyone know of a good way to do this using either javascript, jQuery, or rails? (The page is served by a rails app, so the request object and any other Rails magic is on the the table.
If you create two SPANs, one containing the character you want, and the other containing an unprintable character U+FFFD (�) is a good one, then you can test whether they have the same width.
<div style="visibility:hidden">
<span id="char-to-check">♯</span>
<span id="not-renderable">�</span>
</div>
<script>
alert(document.getElementById('char-to-check').offsetWidth ===
document.getElementById('not-renderable').offsetWidth
? 'not supported' : 'supported');
</script>
You should make sure that the DIV is not styled using a fixed font.
"Browser support" is not the problem here. You should be serving your files as UTF-8*, and use the appropriate characters rather than the HTML entities.
Unicode sharp symbol: ♯ (U+266F)
Unicode flat symbol: ♭ (U+266D)
You should also make sure to save your files in UTF-8 (and not, say, ASCII or ISO-8859-1).
See also: the must-be-mentioned Joel on Software: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!).
*I'm not a Rails guy, but I think it does this by default.
Rather than mucking around with JavaScript, what you should be doing instead is using css's unicode-range:
#font-face {
font-family: 'MyWebFont'; /* Define the custom font name */
src: local("Segoe UI Symbol"),
local("Symbola"),
url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
unicode-range: U+266F, U+266D; /* Define the available characters */
}
body {
font-family: 'MyWebFont', Arial;
}
♯
♭
Normal text
In the local blocks, define fonts that people might have installed locally and contain the symbols you want (like Window's Segoe UI Symbol). Then define a web font (I suggest Symbola) containing the symbol you want to show.
The unicode-range directive tells supporting browsers (IE9 and up) not to download the font unless the specified symbols are present on the page (You can find their unicode number by searching Unicode-Tables.)
If they have the font already, they won't download it. If the symbol(s) aren't present on the page and your browser isn't older than dirt, the font won't be downloaded. It'll only be downloaded when it is needed.
(If you still want to support old IE, use fontsquirrel to generate your initial #font-face statement, then add the local and unicode-range parts yourself.
Add this to your HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
And check to see if IE and Safari render the page right.